agentleFS
sayurionishisayurionishi/playwright-scaffold/.claude/skills/debugging/SKILL.md

debugging

Skill1 starsChanged 3 months agoMITView on GitHub

Use when a test fails, flakes, or behaves unexpectedly. Investigate and fix the root cause — never suppress, never bump timeouts, never silently skip.

119 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use Problem-Solving Techniques, media-processing and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • truongtv22Skill

    Problem-Solving Techniques

    Apply systematic problem-solving techniques for complexity spirals (simplification cascades), innovation blocks (collision-zone thinking), recurring patterns (meta-pattern recognition), assumption constraints (inversion exercise), scale uncertainty (scale game), and dispatch when stuck. Techniques derived from Microsoft Amplifier project patterns adapted for immediate application.

    Also in 4 projects that use this

  • mrgoonieSkill

    media-processing

    Process multimedia files with FFmpeg (video/audio encoding, conversion, streaming, filtering, hardware acceleration) and ImageMagick (image manipulation, format conversion, batch processing, effects, composition). Use when converting media formats, encoding videos with specific codecs (H.264, H.265, VP9), resizing/cropping images, extracting audio from video, applying filters and effects, optimizing file sizes, creating streaming manifests (HLS/DASH), generating thumbnails, batch processing images, creating composite images, or implementing media processing pipelines. Supports 100+ formats, hardware acceleration (NVENC, QSV), and complex filtergraphs.

    Also in 6 projects that use this

  • JetBrainsSkill

    ssr

    Guide for using Structural Search and Replace in IntelliJ. Use when creating or modifying SSR inspections or search patterns.

    Also in 3 projects that use this

  • mrgoonieSkill

    web-frameworks

    Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.

    Also in 6 projects that use this

  • DevNewbie1826Skill

    remove-ai-slops

    Remove AI-generated code slop from branch changes or an explicit file list while preserving behavior, including junk tests (prose pins, source greps, copied inventories, mock echoes), each proven by its class rule before a cut. Use when asked to remove slop, clean AI code, deslop, clean up generated code, strip slop, prune junk tests, or review generated-code cleanup. Start by locking behavior with regression tests, then use the category and workflow references.

    Also in 3 projects that use this

  • DevNewbie1826Skill

    programming

    MUST USE for work on Python, Rust, TypeScript, JavaScript, or Go source files and project manifests, and whenever a test or spec file is written, reshaped, reviewed, or deleted. Triggers: write or edit code; add, change, or delete a test; test authoring gate; junk tests; new project; Go HTTP service (gin lane); Bubble Tea TUI; CJK IME; Connect-Go RPC; sqlc or pgx; branded IDs; exhaustive matching; unsafe Rust; Miri; oversized file; refactoring; logging, log levels, structured logging, or observability; arena, allocator, bumpalo, const fn, const generics, compile-time programming, zero-allocation APIs, bitfields, repr, scope guards, errdefer-style cleanup, Zig-like patterns, zero-copy parsing, packed data, or FFI; Rust public API design or macros.

    Also in 3 projects that use this

  • +6 more from mrgoonie

The file

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 107 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Never suppress — investigate first, fix second.

    line 8

“Common” is measured: kept by at least 6 in 10 of the 107 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Debugging

Never suppress — investigate first, fix second. A green test that hides a real problem is worse than a red one.

Steps

  1. Read the full error — type, expected vs received, the failing line.
  2. Classify the mode (table below).
  3. Reproduce with the single spec, deterministically: npx playwright test <file> --project=<p>.
  4. Investigate with the right tool: Trace Viewer (npm run report), UI Mode (npm run test:ui), --debug inspector, re-explore with playwright-cli.
  5. Fix at the root cause.
  6. Re-run. For a flake fix, run 5× consecutively green before declaring it fixed.
  7. Green locally, red in CI? Replay CI: npm run test:ci -- <file>.

Failure mode → cause → fix

ModeLikely causeFix
TimeoutError on action/assertwrong/changed locator, or waiting on the wrong signalre-explore selector (selectors); use a pre-registered response wait (wait-strategy)
Flaky (passes sometimes)bad wait — waitForTimeout/networkidle/missed responsewait-strategy: pre-register before trigger; web-first assert; blur-after-fill
toBeHidden() passes but data isn't loadedloader selector matched zero elements (CSS-module hash)[class*="…"] partial-match or testid + .first()
ZodError from .parse(body)response ≠ documented contract (drift)real bug → test.skip + // FIXME; else fix the schema
Strict-mode violation (>1 match)locator not specificscope it / .first() (selectors)
Locator not foundmarkup changedre-explore; update the page object
"fixture is undefined"not registered / imported from @playwright/testregister in fixtures/; import from test-options
Passes alone, fails in suiteshared-state couplingmake independent; @destructive cleanup (test-standards)

Forbidden "fixes" (these are refusals)

  • try { await expect(...) } catch {} — swallowing an assertion.
  • Raising a timeout to mask a slow/missing signal.
  • test.skip without a // FIXME: <ticket>.
  • Loosening a schema / weakening an assertion to turn red green.

Reading a timeout failure

The error text names the cause — read it before touching anything.

ErrorMeansFix
locator.click: Timeout 10000ms exceeded + element is not enabledButton genuinely disabledThe app hasn't enabled it — usually a form not committed. fillAndBlur (wait-strategy)
…+ element is not visibleHidden or zero-sizeWrong locator, or the screen isn't ready. Assert readiness first
…+ element intercepts pointer events / subtree interceptsCovered by somethingA toast, modal backdrop, sticky header, or spinner overlay. Wait for it to clear — do NOT { force: true }
…+ element is not stableStill animatingWait for a post-animation signal
resolved to 2 elementsStrict-mode violationScope it. Not .first() (selectors)
Test timeout of 45000ms exceeded with no action namedThe test ran out of budget across many stepsThe test is doing too much, or an early wait is silently slow. Split it, or check the trace

{ force: true } is not a fix for an interception error. It skips the actionability checks, so the click lands on whatever is actually on top — the test goes green while the user-visible bug remains.

The trace (trace: 'on-first-retry') shows exactly what the action was waiting for and what was on top of the element. Open it before theorising: npx playwright show-trace <path>.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.