/ Verzeichnis / Playground / playwright-skill
← Alle Server ↗ GitHub
● Community testdino-hq ⚡ Sofort

playwright-skill

von testdino-hq · testdino-hq/playwright-skill

Claude Code skill teaching Playwright best practices — locators, network stubbing, trace viewer, parallelism — from the TestDino team.

TestDino Playwright Skill primes Claude Code with Playwright-first testing patterns: role-based locators, network stubbing, fixtures, trace capture, parallelism, retries, auth state reuse. Built from TestDino's test-platform experience, it biases Claude's code generation toward maintainable E2E tests.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

playwright-skill-2.replay ▶ bereit
0/0

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: playwright-skill

How to write a maintainable first E2E test

👤 Developers adding Playwright to a project for the first time ⏱ ~30 min beginner

Wann einsetzen: You have a staging URL and a login flow; you want one solid test before scaling.

Ablauf
  1. Describe the flow
    Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ Kopiert
    → Test using getByRole, getByLabel; no .class or xpath
  2. Add auth reuse fixture
    Convert the login into a reusable auth fixture so other tests skip logging in.✓ Kopiert
    → storageState-based fixture + globalSetup
  3. Ensure non-flakiness
    Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ Kopiert
    → expect(locator).toBeVisible() rather than waitForSelector

Ergebnis: A robust first test plus a fixture the whole suite inherits.

Fallstricke
  • Claude reaches for page.waitForTimeout — Tell skill explicitly: no arbitrary waits, use web-first assertions

Stub a backend API to test frontend edge cases

👤 Frontend engineers testing empty/error/loading states ⏱ ~25 min intermediate

Wann einsetzen: You can't easily put the real backend into each state.

Ablauf
  1. Stub the endpoint
    Stub GET /api/orders to return empty array, then assert the empty state renders.✓ Kopiert
    → route.fulfill with JSON body; assertion on empty-state element
  2. Vary responses per test
    Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ Kopiert
    → Three tests sharing a helper

Ergebnis: Edge-state coverage without touching the backend.

Fallstricke
  • Stub leaks across tests — Set up in beforeEach or fixture scope, not in a module-level hook

Debug a flaky test using trace viewer

👤 Engineers triaging a flaky suite in CI ⏱ ~45 min intermediate

Wann einsetzen: A test passes locally, fails 5% of the time in CI.

Ablauf
  1. Capture trace on retry
    Configure trace: 'on-first-retry' in playwright.config.ts.✓ Kopiert
    → Config diff
  2. Analyze the trace
    Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ Kopiert
    → Concrete diff in network/DOM timing
  3. Fix
    Based on the trace, propose the minimal change to de-flake.✓ Kopiert
    → Specific locator or assertion change, not a blanket sleep

Ergebnis: A de-flaked test with a documented root cause.

Fallstricke
  • Treating flakes by bumping timeouts — Most flakes are hidden race conditions — the trace usually reveals a missing await

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

playwright-skill-2 + seo-audit-skill

Playwright captures pages, SEO audit runs against rendered HTML for JS-heavy apps

Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
Locator patterns - Writing new selectors 0
Network stubbing - Testing frontend edge states 0
Fixtures & auth reuse - Scaling a suite past 5 tests 0
Trace analysis trace.zip Debugging flakes 0
Parallelism & sharding - Suites running >5 min in CI 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
None
Tokens pro Aufruf
Test generation: 3-8k tokens
Kosten in €
Free
Tipp
Generate one test manually, save as a template, and have Claude follow the template for others.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Test credentials in .env (via dotenv). Never commit storageState.json with production auth.
Datenabfluss: Tests hit your target URL. No third-party calls from the skill.

Fehlerbehebung

Häufige Fehler und Lösungen

Test is flaky on CI only

Enable trace: 'on-first-retry' and analyze the trace from the failing attempt.

Prüfen: npx playwright show-trace trace.zip
getByRole doesn't find an element that's clearly there

Element may lack an accessible name. Use Playwright Inspector to see the computed role/name.

Prüfen: npx playwright test --ui
Login fixture works locally, fails in CI

CI may need --headed=false and explicit browser install. Run npx playwright install --with-deps in CI.

Alternativen

playwright-skill vs. andere

AlternativeWann stattdessenKompromiss
CypressYou prefer Cypress's DX and real-browser debuggingDifferent locator philosophy; less parallelism

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen