Playwright E2E Builder 技能：测试购物车主流程
EnglishClaude Code 安装步骤
- 从 GitHub 固定提交获取完整的 `cli-tool/components/skills/development/playwright-e2e-builder` 目录。
- 复制到目标项目的 `.claude/skills/`，确认 `.claude/skills/playwright-e2e-builder/SKILL.md`，再从项目根目录启动 Claude Code，输入 `/playwright-e2e-builder`。
中文摘要
用 Claude Code 规划和编写 Playwright 端到端测试。先摸清被测项目的路由和启动方式，再决定测试数据、身份状态和用例拆分。
SKILL.md 中文导读
可复现示例
本地测试目录预置商品 Demo Mug。打开 /products，用可访问名称定位 Add to cart，点击后转到 /cart，断言商品 Demo Mug 和数量 1 均可见。运行 npx playwright test cart.spec.ts。工作步骤
- 检查现有 Playwright 配置，沿用项目现有 webServer 和 baseURL。先定一个关键流程，再选择测试数据的重置方式。
- 优先用角色或可访问名称定位用户会操作的元素，检查用户能看到的页面状态。多个测试共享同一流程时，再提取页面对象或夹具。
验收方法
测试从干净状态可以重复执行，购物车数量、商品名称和路由都可核对。一次失败可从测试报告定位到具体断言。
GitHub 原文 · 更新日期
适用环境
准备自己的本地测试站、Node.js 项目、@playwright/test 和相应浏览器。用专门的测试商品与账户。
常见问题
只有一个购物车用例，需要一开始就建页面对象吗？
先把流程写清楚。多个用例开始重复同一组定位或操作后，再抽出页面对象，并保留业务断言在用例中。