用途
本技能是一份面向 Playwright 与 Next.js 应用的测试优化指南，用于指导编写可靠、快速、可维护的端到端（E2E）测试，并帮助调试和修复不稳定或失败的测试。
适用时机
在以下场景中可参考这些指南：
- 为 Next.js 应用编写新的 Playwright 测试
- 调试不稳定或失败的测试
- 优化测试执行速度
- 设置认证状态复用
- 为测试配置 CI/CD 流水线
- 测试 Server Components 与 App Router 特性
- 审查测试代码的可靠性问题
规则分类（按优先级）
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 测试架构 | CRITICAL | arch- |
| 2 | 选择器与定位器 | CRITICAL | loc- |
| 3 | 等待与断言 | HIGH | wait- |
| 4 | 认证与状态 | HIGH | auth- |
| 5 | Mock 与网络 | MEDIUM-HIGH | mock- |
| 6 | Next.js 集成 | MEDIUM | next- |
| 7 | 性能与速度 | MEDIUM | perf- |
| 8 | 调试与 CI | LOW-MEDIUM | debug- |
规则速查
1. 测试架构（CRITICAL）
- arch-test-isolation - 每个测试使用全新的浏览器上下文
- arch-parallel-execution - 启用并行测试执行
- arch-page-object-model - 对复杂页面使用页面对象模型
- arch-fixtures - 使用 fixtures 进行共享设置
- arch-test-production - 针对生产构建进行测试
- arch-cleanup-state - 每个测试后清理测试状态
2. 选择器与定位器（CRITICAL）
- loc-role-selectors - 优先使用基于角色的选择器而非 CSS
- loc-data-testid - 对动态元素使用 data-testid
- loc-label-selectors - 对表单输入使用 getByLabel
- loc-text-selectors - 对静态内容使用 getByText
- loc-avoid-xpath - 避免使用 XPath 选择器
- loc-chained-locators - 链式定位器以提高特异性
- loc-placeholder-selector - 谨慎使用 getByPlaceholder
- loc-frame-locator - 使用 frameLocator 定位 iframe 内的元素
3. 等待与断言（HIGH）
- wait-web-first-assertions - 使用 web-first 断言
- assert-aria-snapshots - 使用 aria 快照断言无障碍结构
- wait-avoid-hard-waits - 避免硬等待
- wait-network-idle - 等待可观察的就绪状态，而非网络空闲
- wait-action-retries - 让操作在交互前自动等待
- wait-soft-assertions - 对非关键检查使用软断言
- wait-custom-timeout - 适当配置超时
4. 认证与状态（HIGH）
- auth-storage-state - 使用存储状态复用认证
- auth-multiple-roles - 为不同角色使用独立的存储状态
- auth-session-storage - 处理认证的 session storage
- auth-api-login - 使用 API 登录以加快认证设置
- auth-parallel-workers - 对并行测试使用 worker 作用域的认证
5. Mock 与网络（MEDIUM-HIGH）
- mock-api-responses - Mock API 响应以实现确定性测试
- mock-intercept-modify - 拦截并修改真实响应
- mock-har-files - 对复杂 mock 场景使用 HAR 文件
- mock-abort-requests - 中止不必要的请求
- mock-network-conditions - 模拟网络条件
6. Next.js 集成（MEDIUM）
- next-wait-hydration - 交互前等待 hydration 完成
- next-server-components - 正确测试 server components
- next-app-router-navigation - 测试 App Router 导航模式
- next-server-actions - 端到端测试 server actions
- next-baseurl-config - 配置 baseURL 以实现简洁导航
7. 性能与速度（MEDIUM）
- perf-sharding - 对大型测试套件使用分片
- perf-headless-ci - 在 CI 中使用无头模式
- perf-browser-selection - 策略性地选择浏览器
- perf-reuse-server - 在安全时复用匹配的本地服务器
- perf-retries - 使用重试来检测和诊断不稳定性
8. 调试与 CI（LOW-MEDIUM）
- debug-trace-viewer - 对失败的测试使用 trace viewer
- debug-screenshots-videos - 失败时捕获截图和视频
- debug-inspector - 使用 Playwright Inspector 进行交互式调试
- debug-ci-reporters - 为 CI 集成配置 reporter
使用方式
首先在项目根目录运行：
npx -y @pymodel/react-frontend-skills detect # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill playwright # deprecated APIs → rule IDs
对上述每条与任务匹配的规则以及每个扫描命中项，阅读 references/<rule-id>.md：了解其重要性，以及错误与正确代码的对比。
限制
资料未提供该技能的具体收费、价格、平台支持范围或效果保证等信息。