本文介绍了一种创新性的E2E（端到端）测试方法，通过TRAE插件和Playwright MCP的结合，实现了完全使用自然语言设计、执行E2E测试并自动生成脚本。文章详细阐述了如何安装TRAE插件和Playwright MCP，并通过具体的自然语言指令演示了如何完成登录、查找用户等复杂测试场景。该方法极大地提升了测试效率，并将配置生成、脚本纠错等技术难题交由TRAE处理，为软件测试带来了更便捷的体验。

🌟 TRAE与Playwright MCP的结合，实现了E2E测试的自然语言化。用户可以通过输入自然语言指令，如“测试http://xxxx.demo.cn/admin，输入用户名228228，密码225225225”，TRAE能够智能识别并调用Playwright的工具（如browser_navigate、browser_type）来模拟用户操作，完成登录等任务。

🚀 TRAE的强大之处在于其能够处理更复杂的测试需求，即使在页面结构不明确的情况下，也能利用Playwright的browser_snapshot工具分析页面结构，找到关键元素（如“用户管理”菜单），并完成相应的操作，例如查找特定用户“Peter”。

📝 在完成自然语言驱动的测试设计后，TRAE可以将整个测试流程自动生成为可执行的Playwright测试脚本（如login.test.js）。这个过程包括了导航、输入、点击、断言等步骤，并能生成playwright.config.js配置文件，甚至能够处理测试过程中的错误并进行自动修正，最终成功执行测试。

💡 该方法通过指定`--executable-path`参数，允许用户使用已安装的浏览器（如Chrome）来运行测试，避免了Playwright自动下载浏览器带来的空间占用问题，提高了灵活性和效率。此外，结合VS Code的Playwright Test插件，可以实现与IDE的深度集成，进一步优化开发和测试流程。

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即可

 {   "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，这是我在多个项目中使用的国产大模型，个人认为相当能打。

输入提示词

 测试一下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

 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，当然这个配置文件它写了好几次才写对……

 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

 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完成，无需人工干预。