从手动点屏幕到自然语言驱动：我用 Trae + Playwright MCP 跑了一次 AI 自动化测试

joe45Docker

13人浏览 · 2026-06-04 15:03:43

joe45Docker · 2026-06-04 15:03:43 发布

上一篇文章，开发2天，测试2个月：那个用AI写代码的同事，把麻烦甩给了谁？
介绍多种多种测试方案，这篇实战一个trae搭配 playwright MCP的方式。不一定局限某一种工具，找个适合你的，或者结合你正在用的工具。

一个真实场景：学生端看不到小组评分，我用AI修复后，手动验证需要登录、点菜单、找数据、截图、对比……
而用 Trae 搭配 Playwright MCP，一句话就能完成。

一、问题背景：修复一个 Bug，手动验证 5 分钟

最近在做一个 xxxx平台的学生端。教师评分后，学生端无法看到小组评分——列表里只有“待评”，实际上第1组已经有60分。使用trae修改了代码，修复了 scoreMap 的构建逻辑（之前只对教师/管理员身份从 scores 取数据，现在改为从 leaderboard 构建）。

修复完成后，我需要验证学生端是否正确显示了：

第1组：4人，60分
第2组：4人，待评
第3组：1人，待评

如果按传统手工测试，流程是：

打开浏览器，输入学生端 URL
输入账号 aaa01 / 密码 1 登录
找到“演练回溯” → 点击对应实验
滚动到“成绩评分”区域，看小组评分
再切回教师端确认数据一致

每次修复后都要重复一次。如果 Bug 反复，一个下午就耗在点屏幕上。

在这里插入图片描述

二、转向 AI 自动化测试：Trae + Playwright MCP

Trae IDE 支持 MCP（Model Context Protocol）。我添加了 Playwright MCP 服务，然后创建一个测试智能体，勾选 Playwright 工具集。

在这里插入图片描述

配置完成后，测试流程不再是“写脚本 → 跑 → 看报告”，而是用自然语言描述测试目标，AI 自动调用 Playwright 执行。

三、实际执行过程（全程记录）

看起来步骤很多，实际都是Ai自己完成。

1. 安装 Playwright 浏览器（仅首次）

在 Ubuntu 终端环境，执行：

npx playwright install chromium

Trae 的智能体会自动检测浏览器缺失，提示安装。安装完成后即可使用。

(如果下载很慢，失败了；要不使用代理，要不自己用工具下载 chrome-linux64.zip 179Mb）

在这里插入图片描述

然后解压到正确的路径

ls -la /home/ap/.cache/ms-playwright/chromium-1124/chrome-linux/ && mkdir -p /home/ap/.cache/ms-playwright/chromium-1200/chrome-linux64 && cp -r /home/ap/.cache/ms-playwright/chromium-1124/chrome-linux/* /home/ap/.cache/ms-playwright/chromium-1200/chrome-linux64/

无头模式

mkdir -p /home/ap/.cache/ms-playwright/chromium_headless_shell-1200/chrome-headless-shell-linux64 && ln -s /home/ap/.cache/ms-playwright/chromium-1200/chrome-linux64/chrome /home/ap/.cache/ms-playwright/chromium_headless_shell-1200/chrome-headless-shell-linux64/chrome-headless-shell

2. 下达测试指令

在 Trae 对话框中选择“测试智能体”，输入：

帮我使用 Playwright MCP 测试一下 http://192.168.0.aaa:aaa/module1/drill?experimentId=217
登录学生账号 aaa01 / 1
然后验证小组评分是否显示正确（第1组60分，第2/3组待评）

在这里插入图片描述

3. AI 自动执行的步骤（从日志回放）

步骤1：打开页面

Playwright/playwright_navigate
参数: { "url": "http://192.168.0.aaa:aaa/module1/drill?experimentId=217" }

步骤2：填写用户名

Playwright/playwright_fill
参数: { "selector": "input[type=\"text\"]", "value": "aaa01" }
响应: Filled input[type="text"] with: aaa01

步骤3：填写密码

Playwright/playwright_fill
参数: { "selector": "input[type=\"password\"]", "value": "1" }

步骤4：点击登录按钮

Playwright/playwright_click
参数: { "selector": ".login-btn" }
响应: Clicked element: .login-btn

步骤5：导航到演练页面（登录后自动跳转，AI 再次确认）

Playwright/playwright_navigate
（无额外参数，保持当前URL）

步骤6：获取页面可见文本

Playwright/playwright_get_visible_text
响应: 
…3 个小组参与
第1组 4人 60分
第2组 4人 待评
第3组 1人 待评…

在这里插入图片描述

步骤7：关闭浏览器

Playwright/playwright_close

4. 测试结果与判断

AI 自动从获取的文本中提取关键信息，并给出结论：

✅ 第1组显示 60分
✅ 第2组显示待评
✅ 第3组显示待评

结论：修复已完成并验证成功。学生端现在可以正确显示小组评分，与教师端保持一致。

在这里插入图片描述

整个过程从输入指令到拿到报告，耗时不到 2 分钟。AI 自动完成了找输入框、填表、点击、等待页面加载、提取文本、分析断言的全部工作。

四、与传统自动化的对比

维度	传统UI自动化（Selenium/Appium）	AI + Playwright MCP
脚本编写	需要写代码，选择器脆弱	自然语言描述，AI 生成选择器
维护成本	页面改动 -> 修改脚本	页面改动 -> AI 重新适配（通常自动）
调试	看日志、截图	AI 输出每一步的操作和响应
失败处理	脚本停止，人工介入	可配置自动重试或反馈给编码Agent
学习曲线	需要懂框架	只需要懂业务