playwright-skill MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Role-based and accessible locator patterns (avoid CSS/XPath fragility)
Network stubbing and response mocking idioms
Fixtures for auth state reuse across tests
Trace capture + debugging workflow via trace viewer
Parallelism and sharding guidance
Flakiness mitigation: web-first assertions, retry policy

Demo ao vivo

Como fica na prática

playwright-skill-2.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "playwright-skill-2",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright-skill-2": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/testdino-hq/playwright-skill",
          "~/.claude/skills/playwright-skill"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add playwright-skill-2 -- git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

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.

Pré-requisitos

Skill installed — git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill
@playwright/test installed — npm init playwright@latest

Fluxo

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
Add auth reuse fixture

Convert the login into a reusable auth fixture so other tests skip logging in.✓ Copiado

→ storageState-based fixture + globalSetup
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

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

Capture trace on retry

Configure trace: 'on-first-retry' in playwright.config.ts.✓ Copiado

→ Config diff
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
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

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

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.

storageState.json contains session cookies. Gitignore it and don't upload as CI artifact publicly.

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

Alternativa	Quando usar	Troca
Cypress	You prefer Cypress's DX and real-browser debugging	Different locator philosophy; less parallelism

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills