TRAE和playwright MCP完成E2E测试

E2E测试

你刚刚开发完成一个网站或APP。如何确保它能稳定运行？这时就需要E2E（End-to-End，端到端）测试了。

简单来说，E2E测试就像是雇佣了一个不知疲倦的 "虚拟用户" ，它会严格按照你的指令，模拟真实用户的操作路径：

启动应用：打开你的网站或APP。
核心操作：像真实用户一样，点击按钮、填写表单、搜索内容。
完成流程并验证：执行一个完整的业务流程（例如：下单、支付），并检查最终结果是否符合预期。

核心目的： 确保应用在真实场景下，从用户开始使用到完成目标的整个过程中，各个功能模块能够协同工作，流程顺畅无阻。这就像我们点外卖，从浏览、下单、支付到收到餐品，整个体验必须一气呵成，不能在任何环节卡住。

市面上的E2E测试工具琳琅满目，而 Playwright 是目前最受推崇的工具之一。

虽然网上介绍Playwright的文章很多，但它们大多需要你编写代码。本文将另辟蹊径，为你介绍一种更高效的组合：使用TRAE与Playwright MCP来完成E2E测试。

通过这种方式，你将能够完全通过自然语言来设计、执行E2E测试并生成脚本，极大地提升测试效率。

安装TRAE Plugin

我这里使用的是VS Code下面的TRAE插件（TRAE Plugin）。这里使用插件版本主要是自己积累了很多VS Code的插件和专有配置，很难完全移植到TRAE IDE上，其实TRAE插件也蛮好用的，只要你能够准确提供上下文，国内的模型完成常见任务也能胜任。

安装TRAE Plugin没有任何的难度，搜索TRAE就轻松装上了，我一般喜欢把TRAE放到右边的辅助栏上

安装playwright MCP

首先我们需要在TRAE中配置playwright MCP

如上图点击即可，TRAE提供以下2种添加方式

从市场添加
手动添加

我个人一般用手动添加，因为可以灵活配置各种参数，如图编辑json即可

perl 复制代码

 {
   "mcpServers": {
     "playwright": {
       "command": "npx",
       "args": [
         "@playwright/mcp@latest",
         "--executable-path",
         "C:\Tools\chrome\chrome.exe"
       ]
     }
   }
 }

鉴于自动下载chrome比较麻烦，我这里通过--executable-path配置了我机器上的chrome地址

自然语言设计测试

新建一个项目，使用VS Code打开该项目的目录。在TRAE中输入@符号，选择Builder with MCP，我选用的是Doubao-Seed-1.6，这是我在多个项目中使用的国产大模型，个人认为相当能打。

输入提示词

arduino 复制代码

 测试一下http://xxxx.demo.cn/admin 
 输入用户名228228，密码225225225

TRAE很智能的识别到使用playwright的browser_navigate工具

通过解析页面，识别到用户名和密码的输入框，并调用browser_type工具来执行

最终使用browser_click登录成功

那么我们给他提一个更复杂的需求

复制代码

 再用户管理功能中查找用户名是Peter的用户

这个有一定难度，因为我们从截图上根本不知道用户管理在哪里，但是这难不倒TRAE，TRAE会使用Playwright的browser_snapshot工具来获取当前页面的详细结构，确认是否存在用户管理相关的菜单项。

在browser_snapshot的帮助下，不但找到了用户管理的菜单，并成功进入了菜单，找到了用户。

生成脚本

我们通过自然语言完成了E2E测试的设计，为了下次我们能够直接运行E2E测试，我们需要生成测试脚本，这个直接交给 TRAE来完成

复制代码

 生成测试脚本

有了之前设计测试的过程的铺垫，整个过程非常顺利

自动生成了login.test.js

scss 复制代码

 const { test, expect } = require('@playwright/test');
 
 test('登录系统并查找用户名为Peter的用户', async ({ page }) => {
   // 导航到登录页面
   await page.goto('http://xxxx.demo.cn/admin');
   await expect(page).toHaveTitle('视频投票');
 
   // 输入用户名和密码
   await page.getByRole('textbox', { name: '账号' }).fill('228228');
   await page.getByRole('textbox', { name: '密码' }).fill('225225225');
   await page.getByRole('button', { name: '登录' }).click();
 
   // 验证登录成功并导航到主页
   await expect(page).toHaveURL('http://xxxx.demo.cn/admin/#/main');
 
   // 导航到用户管理页面
   await page.getByRole('menuitem', { name: ' 管理面板 ' }).click();
   await page.getByRole('menuitem', { name: '用户' }).click();
   await expect(page).toHaveURL('http://xxxx.demo.cn/admin/#/user');
 
   // 验证用户列表中存在用户名为Peter的用户
   const userRow = page.getByRole('row', { name: 'Peter' });
   await expect(userRow).toBeVisible();
   await expect(userRow.getByText('228228')).toBeVisible();
   await expect(userRow.getByText('超级管理员')).toBeVisible();
 });

这里说明一下，如果您没有安装playwright，这里会下载各家的浏览器，占用大量空间，我这里直接要求他使用我已经存在的chrome

复制代码

 使用C:\Tools\chrome\chrome.exe运行该测试

它会自动生成配置文件playwright.config.js，当然这个配置文件它写了好几次才写对......

php 复制代码

 const { defineConfig, devices } = require('@playwright/test');
 
 module.exports = defineConfig({
   projects: [
     {
       name: 'chrome',
       use: {
         ...devices['Desktop Chrome'],
         launchOptions: {
           executablePath: 'C:/Tools/chrome/chrome.exe'
         }
       },
     },
   ],
 });

然后它会执行npx playwright test进行测试，测试过程也不是一帆风顺，好在TRAE能够读取终端的出错信息，反复修改login.test.js，最终成功

最终版本的login.test.js

csharp 复制代码

 const { test, expect } = require('@playwright/test');
 
 test('登录系统并查找用户名为Peter的用户', async ({ page }) => {
   // 导航到登录页面
   await page.goto('http://xxxx.demo.cn/admin');
   await expect(page).toHaveTitle('视频投票');
 
   // 输入用户名和密码
   await page.getByRole('textbox', { name: '账号' }).fill('228228');
   await page.getByRole('textbox', { name: '密码' }).fill('225225225');
   await page.getByRole('button', { name: '登录' }).click();
 
   // 验证登录成功并导航到主页
   await expect(page).toHaveURL('http://xxxx.demo.cn/admin/#/main');
 
   // 导航到用户管理页面
   await page.getByRole('menuitem', { name: ' 管理面板 ' }).click();
   await page.getByRole('menuitem', { name: '用户' }).click();
   await expect(page).toHaveURL('http://xxxx.demo.cn/admin/#/user');
 
   // 验证用户列表中存在用户名为Peter的用户
   const userRow = page.getByRole('row', { name: 'Peter' });
   await expect(userRow).toBeVisible();
   await expect(userRow.getByRole('cell', { name: '228228', exact: true })).toBeVisible();
   await expect(userRow.getByText('超级管理员')).toBeVisible();
 });

安装Playwright Test for VS Code插件后，还可以和VS Code深度集成

总结

通过这种方式，能够完全通过自然语言来设计、执行E2E测试并生成脚本，极大地提升测试效率。

中间的配置文件生成、测试脚本纠错等难点完全由TRAE完成，无需人工干预。