Playwright 端到端测试 Runner

为什么需要专门的 E2E 思路

Playwright 自带自动等待，但测试仍容易在动态 DOM、网络时序和共享状态上翻车。用 CSS/XPath 硬选元素、到处 waitForTimeout，会让套件变慢且一改 UI 就红一片。这个技能把「旅程怎么拆、元素怎么找、失败怎么查」收成一套可重复的做法，面向可维护、可 CI 复跑的端到端测试。

技能如何组织测试

Test Journey 按真实用户流写：登录 → 操作 → 断言；一个逻辑域一个文件（如 auth.spec.ts、checkout.spec.ts），单测内用 Arrange-Act-Assert。

定位优先级（语义优先）：

• getByRole('button', { name: 'Submit' })
• getByLabel / getByPlaceholder / getByText
• getByTestId 仅作兜底；避免 getByCss、getByXPath 绑死样式结构

等待：用 expect(...).toBeVisible()、toBeEnabled() 等条件断言；网络用 page.waitForResponse() / waitForRequest()，而不是固定 sleep。

Flaky 对照表涵盖时序、竞态、共享状态、动画、外部依赖与用例顺序——对应隔离页面/数据、Mock、fixture、并行与串行策略。

产物：Trace（npx playwright show-trace）、失败截图与可选失败录像，便于 CI 里 --retries=2 仍失败时的定位。

适用边界

它指导测试设计与 Playwright 用法，不替代你编写业务断言或搭建测试环境（DB、鉴权 fixture）。动画-heavy 页面可能仍需在测试配置里关动画或等终态；外部 API 仍建议 Mock 而非依赖不稳定联调。