e2e-testing-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

🧪 Skill: e2e-testing-expert (v1.0.0)

Executive Summary

执行摘要

Senior End-to-End (E2E) Test Architect for 2026. Specialized in Playwright orchestration, visual regression testing, and high-performance CI/CD sharding. Expert in building resilient, auto-waiting test suites using the Page Object Model (POM), automated accessibility auditing (Axe-core), and deep-trace forensic debugging.

2026年资深端到端（E2E）测试架构师。专攻Playwright编排、视觉回归测试、高性能CI/CD分片。擅长使用页面对象模型（POM）、自动化可访问性审计（Axe-core）和深度追踪取证调试构建健壮的自动等待测试套件。

📋 The Conductor's Protocol

📋 编排规范

Test Surface Mapping: Identify critical user flows (Happy Path, Edge Cases, Auth) that require E2E coverage.
Environment Sync: Ensure the test environment (Staging/Preview) is seeded with predictable data and mocks.

Sequential Activation:

activate_skill(name="e2e-testing-expert")

→

activate_skill(name="github-actions-pro")

→

activate_skill(name="ui-ux-pro")

Verification: Execute
```
bun x playwright test
```
and verify results via the Trace Viewer for any flaky failures.

测试覆盖范围映射: 识别需要E2E覆盖的核心用户流程（正常路径、边界场景、鉴权）。
环境同步: 确保测试环境（预发/预览环境）填充了可预测的测试数据和mock数据。

顺序激活:

activate_skill(name="e2e-testing-expert")

→

activate_skill(name="github-actions-pro")

→

activate_skill(name="ui-ux-pro")

。

验证: 执行
```
bun x playwright test
```
，通过Trace Viewer验证结果，排查偶现失败问题。

🛠️ Mandatory Protocols (2026 Standards)

🛠️ 强制规范（2026标准）

1. User-Visible Locators First

1. 优先使用用户可见定位器

As of 2026, CSS/XPath selectors are considered legacy and fragile.

Rule: Always use
```
getByRole
```
,
```
getByText
```
, or
```
getByLabel
```
.
Protocol: If an element is not reachable via a standard role, work with
```
ui-ux-pro
```
to fix the accessibility tree instead of adding
```
data-testid
```
.

2026年起，CSS/XPath选择器已被视为遗留方案且稳定性差。

规则: 始终使用
```
getByRole
```
、
```
getByText
```
或
```
getByLabel
```
。
规范: 如果元素无法通过标准角色定位，与
```
ui-ux-pro
```
协作修复可访问性树，而非添加
```
data-testid
```
。

2. Page Object Model (POM) Architecture

2. 页面对象模型（POM）架构

Rule: Never write raw locators in test files.
Protocol: Encapsulate all page-specific logic and selectors in POM classes under
```
tests/models/
```
.

规则: 不要在测试文件中直接编写原始定位器。
规范: 将所有页面专属逻辑和定位器封装在
```
tests/models/
```
目录下的POM类中。

3. Visual Regression & Masking

3. 视觉回归与遮罩

Rule: Use
```
expect(page).toHaveScreenshot()
```
for critical UI components.
Protocol: Mask dynamic content (dates, usernames, ads) using the
```
mask
```
property to prevent false positives.

规则: 核心UI组件使用
```
expect(page).toHaveScreenshot()
```
做校验。
规范: 使用
```
mask
```
属性遮盖动态内容（日期、用户名、广告），避免误报。

4. Forensic Debugging (Tracing)

4. 取证调试（追踪）

Rule: Never debug via screenshots/videos in CI. Use Playwright Traces.
Protocol: Configure
```
trace: 'on-first-retry'
```
in CI to capture full DOM snapshots and network logs for every failure.

规则: 不要在CI中通过截图/视频调试，使用Playwright Traces。
规范: 在CI中配置
```
trace: 'on-first-retry'
```
，为每次失败捕获完整DOM快照和网络日志。

5. Continuous Accessibility (Axe-core)

5. 持续可访问性检测（Axe-core）

Rule: Every E2E test must include an accessibility audit.
Protocol: Use
```
@axe-core/playwright
```
to run
```
injectAxe
```
and
```
checkA11y
```
during key user flows.

规则: 每个E2E测试必须包含可访问性审计。
规范: 使用
```
@axe-core/playwright
```
在核心用户流程中运行
```
injectAxe
```
和
```
checkA11y
```
。

🚀 Show, Don't Just Tell (Implementation Patterns)

🚀 实践出真知（实现模式）

Page Object Model (POM) Example

页面对象模型（POM）示例

tests/models/LoginPage.ts

typescript

import { Page, Locator, expect } from "@playwright/test";

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel("Email address");
    this.passwordInput = page.getByLabel("Password");
    this.loginButton = page.getByRole("button", { name: "Sign in" });
  }

  async goto() {
    await this.page.goto("/auth/login");
  }

  async login(email: string, pass: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(pass);
    await this.loginButton.click();
  }
}

tests/models/LoginPage.ts

typescript

import { Page, Locator, expect } from "@playwright/test";

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel("Email address");
    this.passwordInput = page.getByLabel("Password");
    this.loginButton = page.getByRole("button", { name: "Sign in" });
  }

  async goto() {
    await this.page.goto("/auth/login");
  }

  async login(email: string, pass: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(pass);
    await this.loginButton.click();
  }
}

Visual Testing & Accessibility

视觉测试与可访问性检测

typescript

test("homepage looks correct and is accessible", async ({ page }) => {
  await page.goto("/");
  
  // 1. Accessibility Check
  await injectAxe(page);
  await checkA11y(page);

  // 2. Visual Regression
  await expect(page).toHaveScreenshot("homepage.png", {
    mask: [page.getByTestId("current-date")],
    maxDiffPixels: 100
  });
});

typescript

test("homepage looks correct and is accessible", async ({ page }) => {
  await page.goto("/");
  
  // 1. 可访问性检查
  await injectAxe(page);
  await checkA11y(page);

  // 2. 视觉回归校验
  await expect(page).toHaveScreenshot("homepage.png", {
    mask: [page.getByTestId("current-date")],
    maxDiffPixels: 100
  });
});

🛡️ The Do Not List (Anti-Patterns)

🛡️ 禁止项列表（反模式）

DO NOT use

page.waitForTimeout()

. Use web-first assertions like

expect().toBeVisible()

DO NOT test 3rd party APIs (Stripe, Auth0) directly. Use
```
page.route()
```
to mock them.
DO NOT share state between tests. Use a fresh
```
BrowserContext
```
for every test.
DO NOT run all tests in one job. Use Playwright Sharding (
```
--shard=1/3
```
) for large suites.
DO NOT ignore console errors or warnings during tests. Fail the test if unexpected errors occur.

禁止使用
```
page.waitForTimeout()
```
，使用
```
expect().toBeVisible()
```
这类优先面向Web的断言。
禁止直接测试第三方API（Stripe、Auth0），使用
```
page.route()
```
对其做mock。
禁止在测试间共享状态，每个测试使用全新的
```
BrowserContext
```
。
禁止在单个任务中运行所有测试，大型测试套件使用Playwright分片能力（
```
--shard=1/3
```
）。
禁止忽略测试过程中的控制台错误或警告，出现非预期错误时直接标记测试失败。

📂 Progressive Disclosure (Deep Dives)

📂 进阶内容（深入讲解）

Advanced Locators & Auto-Waiting: Role-based vs. Text-based strategy.
Network Mocking & Interception: Using
```
page.route()
```
for stable tests.
Sharding & Parallelism in CI: Running 1,000 tests in under 2 minutes.
Visual Regression Strategies: Tolerance, Masking, and Baseline management.

高级定位器与自动等待: 基于角色 vs 基于文本的策略对比。
网络Mock与拦截: 使用
```
page.route()
```
实现稳定测试。
CI中的分片与并行执行: 2分钟内运行1000个测试。
视觉回归策略: 容差、遮罩与基准版本管理。

🛠️ Specialized Tools & Scripts

🛠️ 专用工具与脚本

```
scripts/analyze-traces.sh
```
: A wrapper to open the Trace Viewer for the latest CI failures.
```
scripts/generate-pom.ts
```
: Scaffolds a POM class based on a URL's accessibility tree.

```
scripts/analyze-traces.sh
```
: 用于打开最新CI失败记录的Trace Viewer的封装脚本。
```
scripts/generate-pom.ts
```
: 基于URL的可访问性树生成POM类骨架的脚本。

🎓 Learning Resources

🎓 学习资源

Updated: January 23, 2026 - 20:50

更新时间：2026年1月23日 20:50