playwright

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Use this skill when the user:

当用户出现以下情况时使用本Skill：

Mentions “Playwright”, “@playwright/test”, “playwright.config.ts”, “trace viewer”, or “PWDEBUG”
References
```
*.spec.ts
```
/
```
*.test.ts
```
files that import
```
@playwright/test
```

提及“Playwright”、“@playwright/test”、“playwright.config.ts”、“trace viewer”或“PWDEBUG”
引用了导入
```
@playwright/test
```
的
```
*.spec.ts
```
/
```
*.test.ts
```
文件

Route Playwright work into the right workflow (suite vs. one-off script vs. debugging)
Standardize patterns that prevent flaky tests (locators, assertions, waits)
Keep artifacts in
```
./tmp/
```
for predictable cleanup

Writing/maintaining
@playwright/test
suites → See

references/e2e-with-playwright-test.md

Auth once, reuse state (
storageState
) → See

references/auth-and-storage-state.md

CI hardening + config knobs → See
```
references/ci-and-config.md
```
Locators, assertions, POM, fixtures → See
```
references/patterns.md
```
Fixtures (worker-scoped, auto fixtures) → See
```
references/fixtures.md
```
Mocking APIs / controlling network → See
```
references/api-mocking.md
```

Visual testing (
toHaveScreenshot
) → See

references/visual-testing.md

Link checking / dead link detection → See
```
references/link-checking.md
```
Flaky tests / trace viewer / retries → See
```
references/debugging.md
```
One-off automation (screenshots/logs/check flows) → See
```
references/ad-hoc-automation.md
```

编写/维护
@playwright/test
测试套件 → 查看

references/e2e-with-playwright-test.md

一次性认证，复用状态(
storageState
) → 查看

references/auth-and-storage-state.md

视觉测试(
toHaveScreenshot
) → 查看

references/visual-testing.md

Prefer
```
getByRole
```
/
```
getByLabel
```
over CSS/XPath; add
```
data-testid
```
only when needed.
Use web-first assertions (
```
await expect(locator).toBeVisible()
```
) instead of boolean checks.
Never add
```
waitForTimeout()
```
to “fix” flake; if you use it temporarily while debugging, remove it before calling the work “done”.
Don’t default to
```
networkidle
```
everywhere; use it intentionally (SPAs / known background activity can make it misleading).
For CLI agent runs, use minimal reporters to avoid log spam; store artifacts under
```
./tmp/playwright/
```
.
Keep tests independent; avoid cross-test shared state.

E2E suite changes: run
```
npx playwright test --reporter=line
```
(or
```
--reporter=dot
```
) and confirm failures reproduce.
Flake fixes: run the previously failing test at least 5 times (ex:
```
--repeat-each 5
```
) before calling it fixed.
CI-sensitive changes: run the suite in “CI-like” settings (ex:
```
CI=1 npx playwright test --reporter=line
```
) and confirm it still behaves.

E2E测试套件变更：运行
```
npx playwright test --reporter=line
```
（或
```
--reporter=dot
```
）并确认失败场景可复现。
不稳定测试修复：至少运行之前失败的测试5次（例如：
```
--repeat-each 5
```
）后，再确认问题已修复。
对CI敏感的变更：在“类CI”环境下运行测试套件（例如：
```
CI=1 npx playwright test --reporter=line
```
）并确认行为符合预期。

Consolidated from upstream installed skills:

playwright-best-practices

playwright-testing

playwright-expert

playwright-skill

webapp-testing

整合自上游已安装的Skill：

playwright-best-practices

playwright-testing

playwright-expert

playwright-skill

webapp-testing