/ Diretório / Playground / playwright-skill
← Todos os servidores ↗ GitHub
● Comunidade testdino-hq ⚡ Instantâneo

playwright-skill

por 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.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

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

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: playwright-skill

How to write a maintainable first E2E test

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

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

Fluxo
  1. Describe the flow
    Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ Copiado
    → 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.✓ Copiado
    → storageState-based fixture + globalSetup
  3. Ensure non-flakiness
    Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ Copiado
    → expect(locator).toBeVisible() rather than waitForSelector

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

Armadilhas
  • 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

Quando usar: You can't easily put the real backend into each state.

Fluxo
  1. Stub the endpoint
    Stub GET /api/orders to return empty array, then assert the empty state renders.✓ Copiado
    → 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.✓ Copiado
    → Three tests sharing a helper

Resultado: Edge-state coverage without touching the backend.

Armadilhas
  • 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

Quando usar: A test passes locally, fails 5% of the time in CI.

Fluxo
  1. Capture trace on retry
    Configure trace: 'on-first-retry' in playwright.config.ts.✓ Copiado
    → 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.✓ Copiado
    → Concrete diff in network/DOM timing
  3. Fix
    Based on the trace, propose the minimal change to de-flake.✓ Copiado
    → Specific locator or assertion change, not a blanket sleep

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

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

Combinações

Combine com outros MCPs para 10× de alavancagem

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.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
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

Custo e limites

O que custa rodar

Cota de API
None
Tokens por chamada
Test generation: 3-8k tokens
Monetário
Free
Dica
Generate one test manually, save as a template, and have Claude follow the template for others.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Test credentials in .env (via dotenv). Never commit storageState.json with production auth.
Saída de dados: Tests hit your target URL. No third-party calls from the skill.

Solução de problemas

Erros comuns e correções

Test is flaky on CI only

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

Verificar: 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.

Verificar: 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.

Alternativas

playwright-skill vs. outros

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

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills