メニュー
Use when writing or reviewing Playwright E2E tests - locator strategies, Page Object Model, auto-waiting, network interception, and WordPress/WooCommerce test helpers.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when automating browser tasks - clicking, filling forms, taking screenshots, debugging UI, or testing web flows. Requires chrome-devtools or playwright MCP.
Use when analyzing Claude Code raw session logs, parsing JSONL transcripts, investigating agent behavior, extracting metrics from session data, debugging subagent dispatches, or building session analysis tools. Triggers on session IDs, JSONL paths, ~/.claude/projects references, or requests to understand what happened in a CC session.
Optimize system prompts for Claude Code agents using proven prompt engineering patterns. Use when users request prompt improvement, optimization, or refinement for agent workflows, tool instructions, or system behaviors.
Use when writing or modifying frontend React/HTML components, creating interactive widgets, building forms, or implementing overlays/modals/dropdowns — ensures accessible output by default with correct ARIA, keyboard, focus, and screen reader support
(user)
Use when writing or reviewing Go tests - standard testing package, table-driven tests, subtests, test helpers, httptest, benchmarks, fuzz testing, and interface-based mocking.
| name | e2e-testing-patterns |
| description | Use when writing or reviewing Playwright E2E tests - locator strategies, Page Object Model, auto-waiting, network interception, and WordPress/WooCommerce test helpers. |
Playwright end-to-end testing patterns. For shared test quality principles (philosophy, smells, mocking decisions), see testing-patterns.
| Need | Reference File | Sections to Read |
|---|---|---|
| Playwright + E2E patterns | ${CLAUDE_SKILL_DIR}/../testing-patterns/references/playwright-patterns.md | Full file (~461L, manageable) |
| Behavior vs implementation | ${CLAUDE_SKILL_DIR}/../testing-patterns/references/test-philosophy.md | ## The Fundamental Shift + ## Four Core Principles |
| Flaky/brittle tests | ${CLAUDE_SKILL_DIR}/../testing-patterns/references/test-smells.md | ## The Six Major Test Smells (relevant subsection) |
| Mock usage decisions | ${CLAUDE_SKILL_DIR}/../testing-patterns/references/mocking-strategies.md | ## The Mocking Decision Framework |
| Test layer strategy | ${CLAUDE_SKILL_DIR}/../testing-patterns/references/test-layers.md | ## The Three Layers + ## Choosing the Right Layer |
How to read sections: Grep for heading to find line number, Read with offset+limit.
page.getByRole('button', { name: 'Submit' }) — accessible, resilientpage.getByLabel('Email') — form elementspage.getByText('Welcome') — visible contentpage.getByTestId('checkout-form') — explicit test hookspage.locator('.class') / #id — last resort, fragile| Use | Instead Of | Why |
|---|---|---|
await expect(locator).toBeVisible() | page.waitForTimeout(2000) | Auto-waits, deterministic |
page.getByRole() | page.locator('.btn') | Resilient to CSS changes |
| Page Object Model | Inline selectors | Reusable, single source of truth |
page.route() for external APIs | Real HTTP calls | Fast, deterministic, no rate limits |
| Config-based URLs | http://localhost:8080 | Works across environments |
toHaveScreenshot({ maxDiffPixelRatio: 0.01 }) | toMatchSnapshot() | Tolerates rendering differences |
test.describe() grouping | Flat test structure | Logical organization |
await before all assertions | Missing await | Playwright assertions are async |
| Pattern | Why Harmful | Fix |
|---|---|---|
| CSS selectors as primary locators | Break on styling changes | Use role/label/text locators |
page.waitForTimeout() | Arbitrary delay, flaky | Use expect(locator).toBeVisible() |
| Missing test isolation | Tests depend on prior state | beforeEach setup, clean state |
| Hardcoded URLs | Breaks across environments | Use config/env variables |
| No Page Object Model | Duplicated selectors | Extract to page object classes |
| Screenshot without tolerance | Pixel-perfect failures | Set maxDiffPixelRatio |
Missing await before assertions | Silent assertion skip | Always await Playwright expects |
page.evaluate() for assertions | Bypasses auto-waiting | Use Playwright locator assertions |
| No network interception | Flaky external calls | page.route() for third-party APIs |
this or the next page object for chaining