用途：该技能用于在本地 Web 应用上运行 Playwright 测试，覆盖 UI 验证与视觉回归、用户流程测试、无障碍合规、跨浏览器兼容性，并借助截图和 trace 调试 UI 行为。资料给出的是 FrankX 项目环境，配置位于 playwright.config.ts，testDir 为 ./tests/e2e，webServer 命令为 npm run dev，地址为 http://localhost:3000，trace 设为 on-first-retry，截图设为 only-on-failure。
主要能力与模式：支持 Page Object Model，将页面操作封装为类；支持基础测试结构（import { test, expect } from '@playwright/test'）；支持表单测试、API Mocking（page.route 返回模拟 JSON）、视觉回归（toHaveScreenshot，可设 maxDiffPixels）、无障碍测试（结合 @axe-core/playwright 的 AxeBuilder，检查 wcag2a、wcag2aa 违规项）。调试方面提供失败自动截图、Trace Viewer、Debug Mode、UI mode 与 console 日志监听。
必要用法与命令：运行全部 e2e 测试用 npm run test:e2e；运行指定文件用 npx playwright test homepage.spec.ts；指定浏览器用 npx playwright test --project=chromium；更新快照用 npx playwright test --update-snapshots；录制生成测试用 npx playwright codegen localhost:3000；查看报告用 npx playwright show-report。启用 trace 用 npx playwright test --trace on，查看用 npx playwright show-trace trace.zip；调试用 npx playwright test --headed --slowmo=500、npx playwright test homepage.spec.ts --debug、npx playwright test --ui。
适用场景：编写新的 e2e 测试、调试 UI 问题、验证用户流程、测试响应式设计、执行无障碍审计。资料还列出与 test-driven-development、systematic-debugging、shadcn-ui-patterns 等相关技能。
限制：资料仅描述 FrankX 这一具体项目的配置与测试样例，未提供通用安装步骤、收费信息、平台支持范围或量化效果；不同项目需自行调整 baseURL、webServer 命令与目录结构。建议使用语义定位器（getByRole、getByLabel、getByText），避免脆弱选择器，并在测试间清理状态。