想基于 MCP 服务在项目内落地端到端测试，有这么几个想法，希望跟 V 友们交流一下

[FriedRiceNoodles]

我是前端开发，最近在一个后台系统和业务组件库的场景去建立单元测试和端到端测试流程。

单元测试

最初调研了一些 AI 生成单元测试的垂直领域 AI ，比如EarlyAI，一个非常垂直细分，专门在 Typescript 技术栈生成单元测试的 AI 项目。 但是实际的结果是，Cursor+Claude3.7 完全可以达到同等甚至比 EarlyAI 更好的效果，真真切切的基座模型一升级，AI 应用白忙活。

所以单元测试这块毫无疑问是可以通过 Cursor+一个较为聪明的模型可以去直接生成的，如果我们给定了贴合业务的测试用例给 AI ，效果更佳；没有测试用例给 AI 也没关系，一轮生成下来如果效果没达到预期，多来几轮基本也覆盖得差不多了，关键的是我们要能为 AI 兜底，去判断 AI 生成的测试用例合不合理、是否覆盖到了边界条件。

端到端测试

这块相比单元测试，不确定性和想象空间就会比较大了。我有这么几个想法，丢出来抛砖引玉，和各位 V 友交流一下。

1. 最基础的，模型调用Playwright MCP实现端到端测试。这在较为复杂的场景会遇到这样几个问题：

   a. 你很可能需要在 Cursor 中运行它才能得到比较好的效果，因为在 Cursor 中你可以告诉 AI 它正在测试的是哪个页面/组件，从而根据实际的代码去执行更贴切的测试用例。 b. 当场景足够复杂，很可能触碰到 token 的长度上限。 c. 需要你编写足够语义化的 HTML/JSX 代码，否则它很可能不知道页面上一些非文字的元素是什么作用。

2. 开发 MCP Server ，使 AI 可以动态获取到产品经理的 PRD 和测试同事使用的测试用例，再结合 Playwright MCP 去做端到端测试。

3. 我们使用了 MCP Server 去做端到端测试，那么是否也可以让 AI 在执行单元测试的过程中，把测试过程以端到端测试代码的形式保存下来？ https://github.com/executeautomation/mcp-playwright/pull/77

4. AI-MCP 执行端到端测试平台化，如果在本地运行效果良好，把这样的服务弄到云端，24h 不间断运行，出问题的时候 AI 分析出问题的功能点，给出语义化的报错信息，然后就是常规化的规则、告警之类的东西了。

[iYume]

之前用过 browser-use ，看起来 mcp-playwright 的原理也差不多。之前适配 Select 组件适配麻了（浏览器可以正常执行 JS 但是通过 playwright 执行就不行），经常点不到，要去调试 JS 。语义化确实是大问题，browser-use 就没有解决元素层级性的问题，对表单的识别（是否正确输入到框内的断言）就不好。

[runinhard]

E2E 测试的最大问题是元素定位，browser-use 的解决方式是从源码解析 和 视觉识别相结合，视觉识别极大的依赖大模型的能力，那换个角度，进一步降低大模型从源码定位元素的难度，比如在源码中给元素加上特定的用于测试的属性 ：test={step:1,action:click,valeu:'123'}，再将语义化的测试用例(或者使用大模型 和 test 做个映射就可以。

一个思路不一定对

[DiamondYuan]

分享一下我的思路。 同样是给予 playwright 实现
测试用例是基于自然语言的



await page.goto(`https://www.baidu.com/`);
const testWriter = new TestWriter();
await testWriter.run('选中输入框', await buildContext(page));
await testWriter.run('输入你好', await buildContext(page));
await testWriter.run('点击搜索', await buildContext(page));



testWriter 在执行的时候，我会把当前页面的截图提供给 ai 。 并且提供一系列的 tools 给 ai ， 让 ai 自己编写代码

const description = `
1. the code is sent to playwright's page.evaluate(code) to execute.
2. The result will be serialised to json. Only the first 500 characters will be returned.
3. The result must be serialisable.
4. Please don't define a function
5. Don't write the await function
`;

export const evaluateCodeInPage = (page: Page): RunnerTool<string> => {
return {
definition: {
type: 'function',
function: {
name: 'evaluateCodeInPage',
description: description,
parameters: {
type: 'object',
properties: {
code: {
type: 'string',
description: 'JavaScript code to evaluate in the page context. will call page.evaluate(code)',
},
},
},
},
},
toolCall: async (args: string) => {
const { code } = JSON.parse(args);
const result = await page.evaluate(code);
return {
content: JSON.stringify(result).slice(0, 1000),
};
},
};
};


ai 自动根据 evaluateCodeInPage 查找页面元素是否存在，自动编写 playweight 的脚本。
编写好脚本后，会调用 SaveCodeTool 把测试脚本保存在本地

export const SaveCodeTool: openai.ChatCompletionTool = {
type: 'function',
function: {
name: 'saveCode',
description: '保存代码',
parameters: {
type: 'object',
properties: {
fileName: { type: 'string', description: 'no extension' },
code: { type: 'string' },
},
},
},
};


下一次运行的时候，就完全不需要 AI 了。 只需要执行测试脚本即可。
有些 ai 写不对的地方，也可以人肉帮 ai 写一下。



未来会在这里开源 https://github.com/mockforge/testforge

[FriedRiceNoodles]

@DiamondYuan 这种方式是不是比较像“我们使用了 MCP Server 去做端到端测试，那么是否也可以让 AI 在执行单元测试的过程中，把测试过程以端到端测试代码的形式保存下来？ https://github.com/executeautomation/mcp-playwright/pull/77”