SuperAPI AI 工具集

playwright-best-practices

测试与质量

查看项目

更新于 10-15 14:30

技能介绍

用途

该技能用于在编写或修改 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 智能体环境中运行测试并需要控制输出体积的情况。

限制

资料未提供该技能的安装方式、依赖版本、支持平台及收费信息。