Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

playwright-debugging

Étoiles0

Forks0

Mis à jour23 juin 2026 à 19:16

Use when a Playwright test fails and you need fast root-cause diagnosis using trace viewer, inspector, console/network evidence, and repeatable repro commands. Focuses on shortest path from failure to permanent fix.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

jagreehal

jagreehal/playwright-cookbook

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Analystes en assurance qualité des logiciels et testeursProfessions informatiques et mathématiques·SOC 15-1253

SKILL.md

readonly

name	playwright-debugging
description	Use when a Playwright test fails and you need fast root-cause diagnosis using trace viewer, inspector, console/network evidence, and repeatable repro commands. Focuses on shortest path from failure to permanent fix.

Playwright Debugging

Debugging should be evidence-first: reproduce, capture trace, isolate failure class, apply targeted fix.

5-Step Triage

Re-run single test with --repeat-each.
Re-run with --workers=1.
Open trace and inspect action/network/console timelines.
Classify failure: locator, timing, state leak, network, product bug.
Apply the specific fix and prove with repeated runs.

Commands

# 1) reproduce
npx playwright test e2e/foo.spec.ts -g "can save profile" --repeat-each=30

# 2) isolate parallelism
npx playwright test e2e/foo.spec.ts -g "can save profile" --repeat-each=30 --workers=1

# 3) headed + inspector
PWDEBUG=1 npx playwright test e2e/foo.spec.ts -g "can save profile"

# 4) open trace
npx playwright show-trace test-results/**/trace.zip

Symptom -> Cause -> Fix

Timeout waiting for visible element -> wrong locator or premature assert -> move to semantic locator + expect(locator).
Passes serially, fails parallel -> shared resource collision -> worker-indexed test data.
Passes on retry only -> race condition -> remove snapshot reads / sleeps, use web-first assertions.
Fails only CI -> env differences -> pin viewport/timezone/locale; never rely on networkidle (racy everywhere, worse on CI) — wait on a specific response or web-first assertion.
Random 5xx/429 -> upstream dependency -> mock route or split into integration-tagged tests.

Anti-Patterns

Rerunning failing tests repeatedly without opening trace artifacts.
Debugging by adding sleeps instead of fixing synchronization.
Accepting “passed on retry” as success without root-cause classification.
Mixing multiple speculative fixes in one PR, making causality unclear.
Ignoring CI-only environment differences (locale/timezone/resources).

Mandatory Artifacts for Any Flake PR

Failing trace screenshot or trace link.
Root-cause category.
Exact code change that removes class of failure.
Proof run: at least one repeated run command and result.

Cross-References

Assertion model: playwright-assertions
Isolation fixes: playwright-test-isolation
Network fixes: playwright-network-mocking
Suite hardening: playwright-reliability

Quick Quality Checklist

Specs do not construct objects directly; fixtures own spec-visible wiring.
No sleeps (waitForTimeout) used as synchronization.
Locators are semantic first (getByRole/getByLabel) and centralized.
Network behavior is intentional: mocked or explicitly integration-tagged.
Changes include at least one reproducible command/example.

Plus depuis ce dépôt

même dépôt

playwright-i18n

jagreehal/playwright-cookbook

Use when testing a localized UI built with i18next and react-i18next, when deciding how to select a control whose text is translated, or when making the i18next setup type-safe so a bad t() key fails the build instead of shipping an empty string. Pairs the locator priority of playwright-locators with the test-id judgment of playwright-testid-strategy for the localized case.

2026-06-290

playwright-shadcn

jagreehal/playwright-cookbook

Use when testing shadcn/ui components built on base (`@base-ui/react`) with Playwright, or when a review treats "we use shadcn, so accessibility is handled" as settled. Covers what the primitives give you (real roles, keyboard, focus traps) versus what stays application code (the accessible name), the portal scoping every overlay needs, and the surfaces where a test id hides a missing name.

2026-06-290

playwright-testid-strategy

jagreehal/playwright-cookbook

Use when deciding whether a `data-testid` is justified, reviewing a PR that reaches for test ids, asserting that a conditional element is present or gone, or judging whether an aria-label is a real label or a test hook in disguise. Settles the "default or fallback" question that playwright-locators raises, with the cases where a test id is genuinely the only solution and the anti-patterns that hide accessibility bugs.

2026-06-290

build-tested-components

jagreehal/playwright-cookbook

Use when building a new UI component or feature with its tests, hardening an existing component for testability, or adding component/e2e coverage. Co-designs accessible markup with role-first selectors so the query that finds an element also proves a real user can reach it, then drives a two-tier test matrix (jsdom component tests + Playwright/axe journeys). Triggers on "build a component", "add tests for X", "write tests", "make this testable", "cover this component".

2026-06-230

playwright-components

jagreehal/playwright-cookbook

Use when modelling reusable UI fragments (sidebars, headers, modals, table rows, cards) in Playwright tests, when the same locators appear on multiple pages, or when one feature renders differently across themes/frameworks/A-B variants. The container-rooted component pattern that composes anywhere without ceremony.

2026-06-230

playwright-fixtures

jagreehal/playwright-cookbook

Use when designing the fixtures.ts file for a Playwright suite, deciding between test-scoped and worker-scoped fixtures, composing fixtures together, providing options with defaults, or wiring page objects, components, and flows into specs. The DI layer that lets specs read like user stories.

2026-06-230

name	playwright-debugging
description	Use when a Playwright test fails and you need fast root-cause diagnosis using trace viewer, inspector, console/network evidence, and repeatable repro commands. Focuses on shortest path from failure to permanent fix.

Playwright Debugging

Debugging should be evidence-first: reproduce, capture trace, isolate failure class, apply targeted fix.

5-Step Triage

Re-run single test with --repeat-each.
Re-run with --workers=1.
Open trace and inspect action/network/console timelines.
Classify failure: locator, timing, state leak, network, product bug.
Apply the specific fix and prove with repeated runs.

Commands

# 1) reproduce
npx playwright test e2e/foo.spec.ts -g "can save profile" --repeat-each=30

# 2) isolate parallelism
npx playwright test e2e/foo.spec.ts -g "can save profile" --repeat-each=30 --workers=1

# 3) headed + inspector
PWDEBUG=1 npx playwright test e2e/foo.spec.ts -g "can save profile"

# 4) open trace
npx playwright show-trace test-results/**/trace.zip

Symptom -> Cause -> Fix

Timeout waiting for visible element -> wrong locator or premature assert -> move to semantic locator + expect(locator).
Passes serially, fails parallel -> shared resource collision -> worker-indexed test data.
Passes on retry only -> race condition -> remove snapshot reads / sleeps, use web-first assertions.
Fails only CI -> env differences -> pin viewport/timezone/locale; never rely on networkidle (racy everywhere, worse on CI) — wait on a specific response or web-first assertion.
Random 5xx/429 -> upstream dependency -> mock route or split into integration-tagged tests.

Anti-Patterns

Rerunning failing tests repeatedly without opening trace artifacts.
Debugging by adding sleeps instead of fixing synchronization.
Accepting “passed on retry” as success without root-cause classification.
Mixing multiple speculative fixes in one PR, making causality unclear.
Ignoring CI-only environment differences (locale/timezone/resources).

Mandatory Artifacts for Any Flake PR

Failing trace screenshot or trace link.
Root-cause category.
Exact code change that removes class of failure.
Proof run: at least one repeated run command and result.

Cross-References

Assertion model: playwright-assertions
Isolation fixes: playwright-test-isolation
Network fixes: playwright-network-mocking
Suite hardening: playwright-reliability

Quick Quality Checklist

Specs do not construct objects directly; fixtures own spec-visible wiring.
No sleeps (waitForTimeout) used as synchronization.
Locators are semantic first (getByRole/getByLabel) and centralized.
Network behavior is intentional: mocked or explicitly integration-tagged.
Changes include at least one reproducible command/example.