内容
# 🎭 Playwright 智能代理 - TodoMVC 演示
[](https://playwright.dev/)
[](https://www.typescriptlang.org/)
[](https://playwright.dev/docs/test-agents)
使用 Playwright 的 AI 驱动的 **规划器**、**生成器** 和 **修复器** 智能代理，自动生成、运行和修复 [TodoMVC](https://demo.playwright.dev/todomvc) 应用的测试。
---
## 🎯 什么是 Playwright 测试智能代理？
可以将 Playwright 智能代理视为您的 AI 测试助手。无需手动编写测试，只需描述您要测试的内容，智能代理即可处理其余工作。
### 智能代理三人组
| 智能代理 | 角色 | 输入 | 输出 |
| :--- | :--- | :--- | :--- |
| **🎭 规划器** | **探索者** | 测试需求 | 可读的路线图（`.md`） |
| **🎭 生成器** | **构建者** | 路线图 | 可执行的测试代码（`.spec.ts`） |
| **🎭 修复器** | **维护者** | 损坏的测试 | 自动补丁和修复 |
### 工作流程可视化
```mermaid
graph LR
A[测试需求] --> B(🎭 规划器)
B --> C[specs/plan.md]
C --> D(🎭 生成器)
D --> E[tests/demo.spec.ts]
E --> F{运行测试}
F -- 失败 --> G(🎭 修复器)
G --> H[修复的代码]
F -- 成功 --> I[成功]
```
---
## 🚀 快速开始（5 分钟）
### 1. 安装
```bash
# 克隆并安装
git clone <您的仓库 URL>
cd playwright-agents-ts
npm install
# 初始化智能代理（选择您的 AI 工具循环）
# 对于 VS Code：
npx playwright init-agents --loop=vscode
# 对于 Claude Code：
npx playwright init-agents --loop=claude
```
### 2. 配置检查
确保您的智能代理可以通过 MCP（模型上下文协议）与浏览器通信。
* **智能代理文件夹**：`/.github/agents/`（自动生成）
* **MCP 配置**：`/.vscode/mcp.json`
> [!TIP]
> 您的 `mcp.json` 应如下所示，以便智能代理正确运行：
> ```json
> {
> "servers": {
> "playwright-test": {
> "type": "stdio",
> "command": "npx",
> "args": ["playwright", "run-test-mcp-server"]
> }
> }
> }
> ```
---
## 🛠 分步指南
### 步骤 1：创建种子测试
“种子”测试告诉智能代理如何访问您的应用。参见 [tests/seed.spec.ts](tests/seed.spec.ts)。
### 步骤 2：运行规划器 🎭
在您的 AI 工具中，询问 **规划器智能代理**：
> “为 TodoMVC 应用创建测试计划，涵盖：添加、标记完成、筛选和删除 todos。参考：tests/seed.spec.ts”
### 步骤 3：运行生成器 🎭
询问 **生成器智能代理**：
> “为 specs/todomvc-plan.md 中的所有场景生成 Playwright 测试。参考：tests/seed.spec.ts”
### 步骤 4：运行和修复 🎭
1. 运行测试：`npm test`
2. **破坏它**：更改测试文件中的文本定位器（例如，`'1 项剩余'` 到 `'99 项'`）。
3. **修复它**：询问 **修复器智能代理**：
> “修复失败的测试：tests/<您的测试文件>.spec.ts”
---
## 📁 项目结构
```text
├── .github/agents/ # AI 智能代理指令
├── specs/ # Markdown 测试计划（规划器输出）
├── tests/ # 可执行的测试文件（生成器输出）
├── pages/ # 页面对象模型（封装逻辑）
├── fixtures/ # 自定义测试上下文/设置
└── playwright.config # 全局 Playwright 设置
```
---
## 🧪 命令
| 命令 | 描述 |
| :--- | :--- |
| `npm test` | 运行所有测试（无头） |
| `npm run test:headed` | 运行测试时显示浏览器 |
| `npm run test:ui` | 打开 Playwright UI 模式 |
| `npm run report` | 查看详细的 HTML 报告 |
---
## 📚 资源和学习
* [详细的 MCP 设置指南](DOCS/MCP_GUIDE.md) - 深入了解 MCP 服务器。
* [官方 Playwright 智能代理文档](https://playwright.dev/docs/test-agents)
* [模型上下文协议（MCP）](https://modelcontextprotocol.io)
---
## 🧱 设计哲学
1. **干净的规格**：规格文件描述 *意图*，而非实现。
2. **智能定位器**：使用面向用户的属性（`getByRole`，`getByText`）。
3. **自主维护**：让修复器自动处理 UI 变更。
---
## License
MIT
