手把手教你写UI自动化-第一天工具环境准备

前言

UI自动化测试是测试工程师提高工资的必要筹码，我将开两个专栏持续更新接口/UI自动化，通过我亲身实战经验给大家一些我学习过程的问题。有基础的朋友坚持1个星期即可独自编写脚本，可直接上手项目，薪资当然也可以大胆自信的找下一个nextLevel！

本文旨在为初学者和希望搭建UI自动化环境的开发者提供一份清晰、可操作的指南。我们将逐步介绍搭建一个完整UI自动化测试环境所需的工具链，包括：

• Node.js：作为JavaScript运行时环境，是后续工具的基础。
• VS Code：强大的代码编辑器，提供丰富的扩展支持。
• Playwright：微软推出的现代化端到端测试框架，支持多浏览器自动化。
• AI辅助工具 (Trae)：提升编码效率的智能助手。
• Git：版本控制系统，用于管理自动化脚本代码。

通过本文，您将能够成功配置本地开发环境，为后续编写和运行UI自动化测试脚本打下坚实基础。无论您是测试工程师、开发人员还是对自动化感兴趣的学习者，本文都将为您提供直接的帮助。

2026年7月23日 UI自动化环境准备

1、node.js下载安装

（1）访问地址https://nodejs.org/zh-cn/download

下载完成之后双击安装

（2）测试是否安装成功：node -v；npm -v

2、安装 VS Code 和汉化

访问 VS Code 官网 Visual Studio Code – The open source AI code editor | Your home for multi-agent development，点击 "Download for Windows" 下载适配的安装包，默认会下载稳定版（Stable）。

下载的是一个类似 VSCodeUserSetup-{version}.exe 安装程序，双击下载的 .exe 文件。

安装程序打开后，会要求你接受 Visual Studio Code 的条款和条件，点击"I accept the agreement(我接受协议)"，然后点击" Next(下一步) "。

选择安装位置，没特别要求按默认的来，点击" Next(下一步) "。

接下来是设置一些开始菜单的目录，按默认就好了，点击 " Next(下一步) "。

接下来，可以勾选以下选项（推荐）：

• 在桌面创建快捷方式。

• 将 VS Code 添加到右键菜单中（方便直接用 VS Code 打开文件）。

• 将 VS Code 添加到 PATH 环境变量（方便在终端中运行 code 命令）。

点击"Install(安装)"按钮，等待完成后启动 VS Code。

点击 "Finish(完成)" 按钮完成安装：

启动 VS Code ，界面如下所示：

安装汉化包

VS Code 安装汉化包很简单，打开 VS Code，点击左侧安装扩展图标，在搜索框输入 Chinese：

然后点击第一个搜索出来选项【Chinese (Simplified) (简体中文)】的 Install 按钮就可以：

安装完成后，重启 VSCode，界面显示的就是中文了。

3、 playwright安装

打开VsCode，点击”插件“，搜索 Playwright Test for VSCode 并安装

4.安装AI协助工具 Trae

5.Git代码下载和提交

UI自动化脚本普遍需要管理，一般公司都需要，这里也介绍一下

配置git，参考文章

手把手教你配置Git客户端上传代码至Gitlab仓库-腾讯云开发者社区-腾讯云

（1） 安装git

Git 各平台安装包下载地址为：Redirecting…

下载安装包，双击运行。除下图选择建议勾选第二个还有修改默认安装地址，其他一律点击“next”

电脑桌面右键出现这个即表示安装成功！

（2）设置ssh

5.1 打开本地git bash,使用如下命令生成ssh公钥和私钥对

5.2 查看生成的密钥内容

cat ~/.ssh/id_rsa.pub

~表示用户目录

复制下面生成的密钥内容（注意不要复制有空格），后面在gitlab中添加ssh密钥会用到。

5.3 登录gitlab,找到Profile Settings–>SSH Keys—>Add SSH Key,并把上一步中复制的密钥内容粘贴到Key所对应的文本框中。

总结

至此，我们已经完成了UI自动化测试环境的完整搭建。关注我！持续更新！教会你学会UI自动化，有问题的宝子可评论，看到会回复。