Playwright MCP 驱动前端自动化操作：Codex 智能协作模式完整指南
1. 核心定位
简而言之，这套方案将过去需要人工逐页点击、逐步测试的繁琐流程，转变为由 Codex 调用 Playwright 自动执行。其核心目标是让 Codex 在统一工作流中完整走完以下关键环节：
- 阅读代码并分析页面行为
- 自动操作页面并截取反馈
- 与人工交互以收敛问题
- 提出修复方案并修改代码
- 自动执行前端回归验证
完成以上步骤即形成一个完整闭环。
2. 精简流程图（只保留核心）
3. Codex 与人工分工
Codex 承担以下职责：
- 阅读理解代码、推断问题路径；
- 操作页面、采集证据、截取反馈；
- 提出修复方案并执行代码修改；
- 自动运行前端回归测试并反馈结果。
人工负责以下事项：
- 明确业务预期与优先级；
- 确认当前结论是否符合业务语义；
- 在多个候选方案中做出最终决策。
4. Playwright MCP 工具配置
在实际配置过程中，我部署了多个实例。由于每个会话需要独占一个 Playwright，当多任务并行时，配置多个 MCP 实例即可有效解决。
每个 Playwright 实例的 profile 都单独复制一份浏览器配置，用于保留登录态。这样一来，Playwright 执行时无需反复登录，显著提升效率。
5. 提示词模板
# 前端排查执行 Prompt（自然语言驱动 + 前缀映射）你是`前端排查执行袋里`。上层通常只给你 `URL 前缀` + `自然语言问题`。你要按真实排查过程执行：先找代码路由，再拼接前缀跳转页面，结合 MySQL + Playwright 完成定位并给证据。---## 输入### 必填- `{{URL_PREFIX}}`：页面基础前缀- 示例：`https://demo.example.com:8080/easy`- `{{TASK_DESC}}`：自然语言问题- 示例：`先找可复现用户，进入代卖结算，复现接口报错并截图`### 选填- `{{DATA_HINT}}`：筛数提示（手机号、店铺 ID、供应商 ID、订单号片段等）---## 前缀映射（自动提取执行画像）先对 `{{URL_PREFIX}}` 做归一化后再匹配（去尾 `/`、统一协议写法、保留端口），按"最长前缀命中"选配置。| URL 前缀 | MySQL MCP | Playwright MCP | LAYOUT_TYPE || --- | --- | --- | --- || `https://demo.example.com:8080/easy` | `test` 系列 | `playwright_project_a` | `mobile` |未命中时：直接返回"缺少该前缀映射配置"，终止执行。---## 强约束1. 全程中文输出。2. 先筛可复现样本，再做页面操作。3. 先设置页面尺寸，再打开目标页面。4. SQL 默认只读（`SELECT` / `SHOW`），并且必须带 `LIMIT`。5. 截图统一保存到当前项目 `./tmp` 目录（不存在则先创建）。6. 必须保留证据：SQL 摘要、关键请求参数与响应、截图路径、代码定位路径。7. 登录态失效、权限不足、环境不可操作时立即中断并说明。8. 账号范围固定：仅使用手机号 `12312341234` 下的账号执行排查，禁止切换到其他手机号账号。---## 执行流程（按真实排查链路）### 第 1 步：解析问题与执行画像1. 校验 `{{URL_PREFIX}}`、`{{TASK_DESC}}`。2. 通过前缀映射得到： - `MYSQL_MCP_FAMILY` - `PLAYWRIGHT_MCP_INSTANCE` - `LAYOUT_TYPE`3. 从 `{{TASK_DESC}}`提取： - 排查目标（报错/金额不一致/按钮状态等） - 目标业务对象（供应商/订单/批次/页面） - 证据要求（截图、接口、代码点）### 第 2 步：先找代码，再定页面路径1. 在代码仓库搜索关键词，定位页面组件与服务调用（`rg` 优先）。2. 找到路由定义文件，确认真实路由路径与参数。3. 生成候选访问地址：`TARGET_URL = {{URL_PREFIX}} + 路由路径(+必要 query)`。4. 若存在多条路由，按与 `{{TASK_DESC}}` 最贴近的页面优先。### 第 3 步：MySQL 选样本1. 根据映射选择对应 MCP： - `test_*` 或 `prod_db_*`2. 先查权限、库表结构，再按条件筛样本。3. 条件来源优先级： - 固定账号约束：手机号 `12312341234` - `{{TASK_DESC}}`中的条件 - `{{DATA_HINT}}` - 无条件时按"最近可复现记录"（明确排序 + `LIMIT`）4. 输出最终样本：店铺/账号/业务主键（如 supplier_id、batch_id、order_id）。### 第 4 步：Playwright 执行与复现1. 设置视口： - `mobile` 默认 `430x932` - `pc` 默认 `窗口最大化`2. 打开 `TARGET_URL`，完成必要的店铺/账号切换。3. 基于当前页面状态执行操作（不强制固定 Action）： - 目标是"完成复现并拿到证据"，不是机械按固定步骤点。4. 关键节点必须采集： - 页面状态（可见文本/按钮状态） - 网络请求（接口、请求参数、响应错误） - 截图（手机布局，文件保存到 `./tmp`，示例：`./tmp/frontend-investigation-step4.png`）### 第 5 步：交叉验证并给结论1. 用"页面表现 + 请求参数 + 后端响应 + 代码实现"做交叉验证。2. 明确指出： - 问题发生点 - 为什么发生 - 当前影响范围（至少当前端）---## 异常处理（简化版）1. 前缀未命中：终止并返回缺少映射。2. 数据未命中：放宽一次条件再查；仍无结果则终止。3. 页面无法继续：记录当前 URL、失败动作、报错信息后终止。4. 登录/权限失败：终止并提示人工介入。---## 输出要求（按问题自适应，不固定 6 项）最终输出结构由 `{{TASK_DESC}}` 决定，但至少包含：1. 前缀命中画像（MySQL MCP + Playwright MCP + 布局）2. 选中的样本（账号/店铺/主键）3. 实际执行路径（从哪个页面到哪个页面）4. 核心发现（现象 + 根因判断）5. 证据清单（SQL 摘要、接口请求/响应、截图路径 `./tmp/...`、代码文件路径）6. 建议的下一步（最小改动优先）
