AI驱动的E2E playwright agents自动化测试实操

1.背景

playwright 现在有了playwright agents，这实际也是playwright MCP的进一步演进，agents可以生成测试计划，然后基于计划生成测试；如果这些测试没有通过，还可以调试并修复它们。下面来让我们深入了解一下吧。

2.实操步骤

2.1 通过命令添加agent的定义到项目

开始时，需要使用以下命令添加agent的定义到项目中，因我使用的是Claude的ai 客户端，不同的AI客户端需要切换--loop参数，具体可参考https://playwright.dev/docs/test-agents#artifacts-and-conventions

npx playwright init-agents --loop=claude

　　运行完命令后，可在指定目录下查看生成的一些定义文件信息、 MCP 配置文件和一个seed.spec.ts种子文件：

 注：种子文件的作用是定义自动化执行的入口和环境准备；就为测试提供初始内容；

官方文档里也写明：planner 会先运行 seed test 来完成环境初始化，再开始探索。

2.2 报错问题及解决方案

报错	原因	解决
unknown command 'init-agents'	Playwright < 1.56	升级 @playwright/test@latest
浏览器 launch 失败	chromium 内核版本不匹配	npx playwright install chromium

2.3 playwright test agents 的使用

前提：我们用https://demo.playwright.dev/todomvc/#/来做E2E的自动化测试（需要seed文件在上面已经生成）

第一步：先生成对应功能模块的测试计划，使用@Planner agent生成对应模块的测试计划

提示词：

planner 正在做的事：planner_setup_page 设置页面 → browser_snapshot 探索接口文档管理页 → 梳理正常/边界/异常三类场景 → planner_save_plan 存成 specs/ 下的 markdown 计划

运行完成后，会specs/ 下生成一个MD的文件，具体效果如下：

文件的内容如下:主要包括模块、场景、覆盖的内容

 

第二步：根据测试计划生成用例，使用generate agent，生成的用例在tests/目录下

 

生成的用例效果如图：

 生成的用例可以直接用命令运行：npx playwright test ，也可以在VSCODE里面的test中运行

第三步：失败用例修复，修复以下运行失败的case，具体如下

 运行用例，失败用例如下

 

3.什么时候用 test agents

Playwright Test Agents这项目里有 3 个测试 agent，各管一段，按任务性质对号入座：

Agent	什么时候用	产出
planner（绿色）	你要的是「设计方案」——探索页面、梳理流程、列测试场景（正常/边界/异常）	specs/*.plan.md
generator（测试生成）	你要的是「写代码」——把计划变成可运行的 Playwright 测试	tests/*.spec.ts
healer（治愈）	你要的是「修挂掉的测试」——抓现场、对比期望 vs 实际、定位根因并修复	修好的测试

简单判断依据：

• 说「设计测试方案 / 规划用例」 → planner
• 说「生成 / 写测试代码」 → generator
• 说「测试挂了 / 帮我修」 → healer