Vibe Coding 知识库

Playwright 介绍和 AI 用法 ​

Playwright 是微软维护的浏览器自动化和端到端测试工具。它可以驱动 Chromium、Firefox、WebKit，适合做前端页面测试、跨浏览器验证、截图、录制、调试和 CI 自动化。

在 AI 编程培训里，Playwright 有两个完全不同的角色：

  • 作为测试框架：写进项目代码里，形成可重复运行的端到端测试。
  • 作为 AI 浏览器工具：让 Claude Code、Codex 这类代理打开页面、点击、输入、截图、读取页面状态。

这两个角色不要混在一起。前者是“项目质量资产”，后者是“AI 临时验证工具”。

Playwright 能做什么 ​

能力适合场景
打开页面并点击输入验证登录、表单、筛选、管理后台操作
多浏览器测试Chromium、Firefox、WebKit 兼容性
截图和视频记录 UI 问题，留课堂演示证据
Trace Viewer回放失败步骤，定位失败原因
Codegen手动操作页面并生成测试脚本
MCP / Agent CLI让 AI 通过工具操作浏览器

形态一：项目里的 Playwright Test ​

这是最标准、最推荐沉淀下来的形态。它会在项目中生成测试配置和测试文件。

安装：

bash
npm init playwright@latest

运行测试：

bash
npx playwright test

打开 HTML 报告：

bash
npx playwright show-report

录制测试：

bash
npx playwright codegen http://127.0.0.1:5173/

适合写入仓库的内容：

text
playwright.config.ts
tests/
  admin-login.spec.ts
  ai-training-nav.spec.ts

课堂建议：当示例项目有稳定页面后，再让 AI 帮忙补 Playwright Test。不要在页面结构还没稳定时过早写大量 E2E 测试。

形态二：Playwright MCP ​

Playwright MCP 是把浏览器能力暴露给 AI 工具的方式。AI 会通过 MCP 工具打开网页、读取 accessibility snapshot、点击元素、输入文本、截图。

通用 MCP 配置示例：

json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

MCP 交互通常是这条链路：

  1. browser_navigate 打开 URL。
  2. browser_snapshot 读取页面可访问性树。
  3. browser_click、browser_type、browser_fill_form 操作页面。
  4. 再次 snapshot 或截图，确认结果。

这适合做“AI 看得见页面”的验证，例如：

text
打开 http://127.0.0.1:5173/ai-training/，确认左侧有课程导航和环境与杂项知识点两个分组，并截图。

形态三：Playwright Agent CLI ​

Playwright Agent CLI 是给编码代理使用的浏览器命令行工具。它可以全局安装，也可以用 npx 临时运行。

安装：

bash
npm install -g @playwright/cli@latest
playwright-cli --help

不全局安装也可以：

bash
npx playwright-cli --help

安装浏览器：

bash
playwright-cli install-browser
playwright-cli install-browser --with-deps

给支持本地 skills 的编码代理安装 Playwright 技能：

bash
playwright-cli install --skills

技能安装后，AI 可以更好地理解 playwright-cli 的命令、快照、截图、会话和调试流程。没有安装 skills 时，也可以让 AI 先读取 playwright-cli --help 再操作。

在 Claude Code 里的用法 ​

Claude Code 可以通过三种方式使用 Playwright。

形态用法适合场景
Playwright Test让 Claude 修改项目，新增 tests/*.spec.ts稳定功能的自动化回归
Playwright MCP用 claude mcp add 或 .mcp.json 连接 MCP server让 Claude 直接操作本地网页
Agent CLI + Skills安装 playwright-cli 和 skills让 Claude 按命令行工具进行浏览器验证

Claude Code 添加 MCP 的典型命令形式：

bash
claude mcp add playwright -- npx -y @playwright/mcp@latest

也可以在项目 .mcp.json 中配置，方便团队共享：

json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

课堂提示词示例：

text
请用 Playwright 打开本地页面，验证登录后能进入后台，并把失败点和截图保存下来。

如果要沉淀成正式测试：

text
请为后台登录和文档分类筛选补 Playwright Test，先写最小可用用例，再运行 npx playwright test。

在 Codex 里的用法 ​

Codex 也有三种常见形态。

形态用法适合场景
项目测试让 Codex 安装 @playwright/test 并写测试文件长期回归测试
MCP server在 ~/.codex/config.toml 或项目 .codex/config.toml 配置 MCP让 Codex CLI / IDE 使用浏览器工具
Codex App 浏览器能力在 Codex App 内用可用的浏览器插件或 in-app browser 验证页面本地前端人工/AI 联合验收

Codex MCP CLI 形式：

bash
codex mcp add playwright -- npx -y @playwright/mcp@latest

Codex config.toml 形式：

toml
[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest"]

Codex App 中的提示词可以更直接：

text
用浏览器打开 http://127.0.0.1:4175/ai-training/，检查左侧导航是否包含环境与杂项知识点。

如果当前 Codex 会话已经有 Browser Use 或 Playwright 工具，优先用当前工具验证，不一定要在项目里安装 Playwright Test。只有需要长期回归时，才把测试文件写进仓库。

Claude Code 和 Codex 的差异 ​

对比项Claude CodeCodex
MCP 配置习惯claude mcp add、.mcp.json、/mcp 查看状态codex mcp add、~/.codex/config.toml 或项目 .codex/config.toml
技能入口Claude Skills、slash 命令、插件Codex Skills、插件、$skill 或自动触发
浏览器验证常用 Playwright MCP 或 Agent CLICodex App 可用 in-app browser，也可接 Playwright MCP
测试沉淀写入 tests/*.spec.ts 并由项目命令运行同样写入项目测试，适合 CI 和后续回归
课堂演示重点让 Claude 通过 MCP 看页面、写 E2E 测试让 Codex 用浏览器验证本地页面，并把验证证据写进最终汇报

什么时候用哪一种 ​

目标推荐形态
课堂上快速验证页面是否能点Playwright MCP、Agent CLI 或 Codex in-app browser
要把登录流程长期保留下来Playwright Test
AI 需要看页面后再改 UIMCP / in-app browser
CI 中每次构建都跑Playwright Test
临时抓一张页面截图MCP、Agent CLI 或当前浏览器工具

安全与稳定性提醒 ​

  • 不要让 AI 在真实生产后台随意点击删除、支付、发短信、发邮件等操作。
  • Playwright MCP 是工具，不是测试资产；正式回归仍要写 tests/*.spec.ts。
  • E2E 测试不要覆盖所有细节，优先覆盖登录、关键业务流、权限边界和发布前冒烟路径。
  • 选择稳定 locator：优先角色、文本、data-testid，少用脆弱 CSS 路径。
  • 本地服务端口要写清楚，例如 http://127.0.0.1:4175/，避免 AI 打错环境。

官方来源 ​