夜雨聆风【AI 测试 Skill 入门篇】01 | 环境搭建：Node.js + Playwright + Trae CN 全指南
一、痛点：想开始自动化测试，但卡在了环境搭建
想转型 AI 测试工程师的你，是不是有这些困惑？
1. 不知道从哪里开始
你可能听说过：
✅ Playwright 是新一代的自动化测试框架 ✅ 比 Selenium 更稳定、更快 ✅ 支持多浏览器（Chromium、Firefox、WebKit）
但当你想自己动手试试时，发现：
❌ 不知道需要安装什么 ❌ 不知道安装顺序是什么 ❌ 不知道安装版本有什么要求
2. 安装过程中各种报错
你可能遇到过：
❌ Node.js 版本太旧，Playwright 不支持 ❌ 安装 Playwright 浏览器时网络超时 ❌ 权限不足，无法安装 ❌ 安装完了不知道怎么验证
3. 不知道如何与 AI 工具结合
你可能听说过 AI 辅助测试工具，比如：
✅ Trae CN ✅ Cursor ✅ GitHub Copilot
但不知道：
❌ 这些工具怎么安装？ ❌ 怎么和 Playwright 结合使用？ ❌ 安装完了怎么开始？
二、解决方案：3 步完成环境搭建
今天给大家一个 完整的环境搭建指南，从 0 到 1 搭建好 Playwright 自动化测试环境。
环境搭建流程
┌─────────────────────────────────────────────────────────┐│ 环境搭建 3 步走 │├─────────────────────────────────────────────────────────┤│ ││ 第一步：安装 Node.js（环境基础） ││ ├── 下载 Node.js ││ ├── 安装 Node.js ││ └── 验证安装成功 ││ ││ 第二步：安装 Playwright（测试框架） ││ ├── 创建项目目录 ││ ├── 初始化 npm 项目 ││ ├── 安装 Playwright ││ └── 安装浏览器驱动 ││ ││ 第三步：安装 Trae CN（AI 辅助工具） ││ ├── 下载 Trae CN ││ ├── 安装 Trae CN ││ └── 配置 Trae CN ││ │└─────────────────────────────────────────────────────────┘三、实际操作：一步步来
第一步：安装 Node.js
为什么需要 Node.js？
Playwright 是一个基于 Node.js 的框架，所以必须先安装 Node.js。
安装步骤
1. 检查是否已安装 Node.js
打开命令行（Windows 用 PowerShell 或 CMD，Mac/Linux 用 Terminal），输入：
node -vnpm -v如果显示版本号（如 v18.19.0），说明已安装如果显示"命令不存在"，说明需要安装
2. 下载 Node.js
推荐版本：Node.js 18.x 或 20.x LTS（长期支持版）
下载地址：https://nodejs.org/
┌─────────────────────────────────────────────────────────┐│ Node.js 下载页面 │├─────────────────────────────────────────────────────────┤│ ││ 选择 LTS 版本（长期支持）： ││ ┌─────────────────────────────────────────────────┐ ││ │ 20.12.0 LTS 21.7.3 Current │ ││ │ 推荐给大多数用户 最新功能 │ ││ └─────────────────────────────────────────────────┘ ││ ││ ✅ 点击左边的 "20.12.0 LTS" 下载 ││ │└─────────────────────────────────────────────────────────┘3. 安装 Node.js
- Windows
：双击下载的 .msi文件，一路点击"下一步"即可 - Mac
：双击下载的 .pkg文件，一路点击"继续"即可 - Linux
：使用包管理器安装
4. 验证安装
重新打开命令行，输入：
node -v# 输出示例：v20.12.0npm -v# 输出示例：10.5.0如果显示了版本号，说明 Node.js 安装成功！
第二步：安装 Playwright
创建项目目录
首先，创建一个专门存放 Playwright 测试项目的目录：
# 创建目录mkdir playwright-tests# 进入目录cd playwright-tests初始化 npm 项目
npm init -y这会创建一个 package.json 文件，内容类似：
{ "name": "playwright-tests", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}安装 Playwright
# 安装 Playwrightnpm install -D @playwright/test解释：
-D表示安装为开发依赖（devDependencies） @playwright/test是 Playwright 的测试运行器
安装浏览器驱动
Playwright 需要下载浏览器驱动才能运行测试：
# 安装所有浏览器驱动（Chromium、Firefox、WebKit）npx playwright install如果网络慢，可以只安装 Chromium：
# 只安装 Chromium（推荐，体积小，速度快）npx playwright install chromium验证 Playwright 安装
# 查看 Playwright 版本npx playwright --version# 输出示例：Version 1.43.0创建第一个测试文件
在项目目录下创建 tests 目录，然后创建 login.spec.ts 文件：
// tests/login.spec.tsimport { test, expect } from '@playwright/test';test('页面能够正常加载', async ({ page }) => { // 导航到 sogoodtool.com 登录页面 await page.goto('https://sogoodtool.com/#/login'); // 验证页面标题 await expect(page).toHaveTitle(/登录/);});运行测试
# 运行所有测试npx playwright test# 或者运行特定文件npx playwright test tests/login.spec.ts如果测试运行成功，说明 Playwright 环境搭建完成！
第三步：安装 Trae CN
什么是 Trae CN？
Trae CN 是一个 AI 辅助编程工具，类似 Cursor、GitHub Copilot，但：
✅ 支持中文界面 ✅ 支持多种 AI 模型 ✅ 可以直接在编辑器中调用 AI 生成代码 ✅ 特别适合 AI 测试工程师
下载 Trae CN
下载地址：https://trae.cn/
┌─────────────────────────────────────────────────────────┐│ Trae CN 下载页面 │├─────────────────────────────────────────────────────────┤│ ││ 支持的平台： ││ ├── Windows（.exe 或 .zip） ││ ├── macOS（.dmg） ││ └── Linux（.AppImage 或 .deb） ││ ││ ✅ 根据你的操作系统选择对应的版本下载 ││ │└─────────────────────────────────────────────────────────┘安装 Trae CN
- Windows
：运行下载的 .exe文件，或解压.zip后运行 - Mac
：打开 .dmg文件，将 Trae CN 拖拽到"应用程序"文件夹 - Linux
：运行 .AppImage或安装.deb包
配置 Trae CN
第一次打开 Trae CN 时，需要：
- 登录或注册账号
- 配置 AI 模型
（可以选择内置的模型，或配置自己的 API Key） - 打开项目目录
（File → Open Folder，选择你的 playwright-tests目录）
如何使用 Trae CN 辅助写测试
在 Trae CN 中，你可以：
方式 1：直接提问
在 AI 对话窗口中输入：
帮我写一个 Playwright 测试用例，测试 sogoodtool.com 的登录功能方式 2：选中代码后提问
选中一段代码，然后输入：
这段代码有什么问题？怎么优化？方式 3：使用注释驱动
在代码中写注释，AI 会自动补全：
// 请帮我写一个测试，验证用户登录成功后跳转到 dashboard// 1. 打开登录页面// 2. 输入邮箱和密码// 3. 点击登录按钮// 4. 验证跳转到 dashboard四、环境检查清单
安装完成后，确认以下内容都已就绪：
┌─────────────────────────────────────────────────────────┐│ 环境检查清单 │├─────────────────────────────────────────────────────────┤│ ││ 【Node.js】 ││ ├── ✅ node -v 显示版本号（v18+ 或 v20+） ││ └── ✅ npm -v 显示版本号 ││ ││ 【Playwright】 ││ ├── ✅ package.json 中有 @playwright/test 依赖 ││ ├── ✅ npx playwright --version 显示版本号 ││ ├── ✅ 浏览器驱动已安装（Chromium、Firefox 或 WebKit） ││ └── ✅ npx playwright test 可以运行测试 ││ ││ 【Trae CN】 ││ ├── ✅ 可以正常启动 Trae CN ││ ├── ✅ 可以打开项目目录 ││ └── ✅ AI 对话功能正常 ││ │└─────────────────────────────────────────────────────────┘五、常见问题解决
问题 1：Playwright 安装浏览器超时
解决方法：
# 方法 1：使用国内镜像PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install# 方法 2：只安装 Chromium（体积小）npx playwright install chromium问题 2：Node.js 版本太旧
解决方法：
# 查看当前版本node -v# 如果版本 < 18，需要升级# Windows：重新下载安装# Mac/Linux：使用 n 或 nvm 管理版本问题 3：权限不足
解决方法：
# Windows：以管理员身份运行命令行# Mac/Linux：使用 sudo（不推荐，最好修改目录权限）问题 4：运行测试时报错
解决方法：
# 查看详细错误信息npx playwright test --reporter=list# 或者在 UI 模式下运行npx playwright test --ui六、下一篇预告
恭喜你！现在你已经完成了 环境搭建，可以开始写 Playwright 自动化测试了。
下一篇文章，我将带你实战：
【AI 测试 Skill 入门篇】02 | 第一个自动化测试：sogoodtool.com 实战案例
在那篇文章中，你将学到：
如何使用 playwright-cliSkill 编写第一个测试如何导航页面、定位元素、输入内容 如何做断言、验证结果 如何运行测试、查看报告
敬请期待！
七、想更高效地学习？加入知识星球
你想获得什么？
今天给大家介绍的 环境搭建指南，只是 Playwright 自动化测试的第一步。
如果你想：
✅ 获得 完整的 Playwright 学习路径（从入门到高级） ✅ 学习 如何用 AI 辅助写测试（Trae CN + Playwright） ✅ 获得 8 个完整的 Playwright Skill（可以直接复用） ✅ 学习 sogoodtool.com 的实际测试案例 ✅ 有问题可以随时提问，获得解答
我推荐的 Skill
我整理了 8 个完整的 Playwright 自动化测试 Skill，放在我的知识星球里：
playwright-cli | |
playwright-robust-locators | |
playwright-core-features-testing | |
playwright-positive-negative-testing | |
playwright-cli-url-docs-to-json-zh | |
playwright-cli-execute-stop-zh | |
json-testcase-to-excel-zh | |
ai-testing-skill |
如何获取？
这些 Skill 都已经放在我的 「Bigtalk软件测试进阶」 知识星球里了。
扫描下方二维码，加入知识星球，即可获得：
✅ 8 个完整的 Playwright 自动化测试 Skill ✅ sogoodtool.com 的实际测试案例 ✅ 我会在星球里持续更新更多测试干货 ✅ 可以向我提问，我会在星球里解答
微信扫码，加入「Bigtalk软件测试进阶」
想转型 AI 测试工程师？想掌握 Playwright 自动化测试？
扫描二维码，加入知识星球，开始你的进阶之路！ 🚀
下一篇：《【AI 测试 Skill 入门篇】02 | 第一个自动化测试：sogoodtool.com 实战案例》，敬请期待！
