菜单
Use Playwright as an investigation tool, not just a regression suite — broken-image audits, console-error capture, failed-request capture, negative-path tests, accessibility scans. Use during exploratory testing or whenever a real bug is suspected but not reliably reproducible.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Decide WHEN to drive the browser MCP, WHEN to invoke a Playwright Test Agent (planner/generator/healer), and WHEN to just edit files. The orchestrator skill — read this first when a Playwright task comes in.
Mix API calls into Playwright suites — pure API tests via the request fixture and hybrid tests that seed state via API then assert through the UI. Use when login/setup is slow, when verifying side-effects, or for API regression coverage alongside UI.
Unblock a failing or hard-to-author Playwright test — UI mode, codegen, trace viewer, Inspector, page.pause(), failure artifacts. Use whenever a test fails mysteriously, when you need to discover a locator, or when stepping through a flow.
Build custom Playwright fixtures, skip repeated login with storage state, and keep tests isolated so they run in any order in parallel. Use when tests need auth, share setup, or are slow because every test re-logs-in.
Pick locators that survive UI changes and lean on Playwright's auto-waiting to kill flakes. Use when authoring or refactoring a spec, replacing brittle CSS/XPath, or chasing flaky failures.
Make tests deterministic and fast by controlling the network — page.route for stubs, HAR record/replay, request/response modification, WebSocket mocking. Use when tests are flaky due to a slow/unreliable backend, when testing edge-case responses, or when running CI without external services.
| name | playwright-bug-hunting |
| description | Use Playwright as an investigation tool, not just a regression suite — broken-image audits, console-error capture, failed-request capture, negative-path tests, accessibility scans. Use during exploratory testing or whenever a real bug is suspected but not reliably reproducible. |
A regression test asks "did we break what we know about?" A bug hunt asks "what's broken that we don't know about?"
Working reference in this repo: the 'finds products with broken or mismatched images' test in tests/example.spec.ts + getFindings() in pages/inventory.page.ts.
const findings = await page.evaluate(() =>
Array.from(document.querySelectorAll('img')).map(img => ({
src: img.src, alt: img.alt,
isBroken: !img.complete || img.naturalWidth === 0,
}))
);
expect(findings.filter(f => f.isBroken)).toEqual([]);
test.beforeEach(async ({ page }) => {
page.on('console', m => {
if (m.type() === 'error') throw new Error(`Console error: ${m.text()}`);
});
});
Every test now fails on a JS error in the app. Catches bugs the explicit assertions miss.
page.on('response', r => {
if (r.status() >= 500) throw new Error(`5xx from ${r.url()}`);
});
For every form ask: empty input? wrong password? locked / suspended / trial-expired user? Most bugs hide in unhappy branches. Template: 'shows an error for locked out user' in tests/example.spec.ts.
npm i -D @axe-core/playwright
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
Forcing empty states, errors, slow responses — see [[playwright-network-mocking]]. Use it to make hard-to-reproduce bugs reproducible.
Workshop exercises in .roo/WORKSHOP_GUIDE.md.