用途
该技能用于在编写或修改 Playwright 测试(.spec.ts、.test.ts 且包含 @playwright/test 导入)时,提供一套最佳实践规范,帮助生成更稳定、可维护的测试代码。
主要能力
CLI 上下文控制
在 Claude Code 或任何 CLI 智能体中运行 Playwright 测试时,应始终使用精简 reporter,防止冗长输出占用上下文窗口。使用 --reporter=line 或 --reporter=dot 运行 CLI 测试。可在 playwright.config.ts 中配置:当设置了 CI 或 CLAUDE 环境变量时默认使用精简 reporter,配置片段见 playwright-patterns.md。
定位器优先级(从最稳健到最不稳健)
始终优先使用面向用户的属性:
- page.getByRole('button', { name: 'Submit' }) —— 无障碍角色
- page.getByLabel('Email') —— 表单控件标签
- page.getByPlaceholder('Search...') —— 输入框占位符
- page.getByText('Welcome') —— 可见文本(非交互元素)
- page.getByAltText('Logo') —— 图片替代文本
- page.getByTitle('Settings') —— title 属性
- page.getByTestId('submit-btn') —— 显式测试契约
- CSS/XPath —— 最后手段,避免使用
核心规则
- Web-first 断言:始终使用 await expect(locator).toBeVisible(),不要使用 expect(await locator.isVisible()).toBe(true);Web-first 匹配器会自动等待并重试。
- 测试隔离:每个测试创建自己的数据,绝不在测试之间共享状态。
- 认证状态复用:通过 setup 项目 + storageState 保存已认证状态,绝不在每个测试中通过 UI 登录。
- 优先使用 fixtures 而非 beforeEach:fixtures 封装 setup 与 teardown,按需运行且可组合。
反模式
- page.waitForTimeout(ms) —— 改用自动等待的定位器
- page.locator('.class') —— 改用 role/label/testid
- XPath 选择器 —— 脆弱,改用面向用户的属性
- 测试之间共享状态 —— 每个测试创建自己的数据
- 每个测试都通过 UI 登录 —— 使用 setup 项目 + storageState
- 不带 await 的手动断言 —— 使用 Web-first 断言
- 硬编码等待 —— 依赖 Playwright 的自动等待
- 在 CI/智能体中使用默认 reporter —— 使用 --reporter=line 或 --reporter=dot
检查清单
- 定位器使用 role/label/testid,而非 CSS 类或 XPath
- 所有断言使用 await expect() Web-first 匹配器
- Page Object 在构造函数中定义定位器
- 不使用 page.waitForTimeout() —— 使用自动等待
- 测试相互隔离 —— 无共享状态
- 通过 setup 项目复用认证状态
- 在导航前设置网络 mock
- 每个测试创建测试数据或通过 fixtures 提供
- 为复杂流程添加调试日志
- 在 CI/智能体上下文中使用精简 reporter(line/dot)
使用方式
在编写或修改 Playwright 测试文件时应用上述规则。Page Object Model、fixtures、网络 mock 与配置示例见 playwright-patterns.md。
适用场景
适用于使用 @playwright/test 编写端到端测试、需要提升测试稳定性与可维护性的开发场景,尤其适合在 CLI 智能体环境中运行测试并需要控制输出体积的情况。
限制
资料未提供该技能的安装方式、依赖版本、支持平台及收费信息。