Playwright Pro
Toolkit de testes Playwright de nível produção para agentes de codificação com IA.
Comandos Disponíveis
Quando instalado como plugin Claude Code, estes estão disponíveis como comandos /pw::
| Comando |
O que faz |
/pw:init |
Configurar o Playwright — detecta framework, gera config, CI, primeiro teste |
/pw:generate <spec> |
Gerar testes a partir de história de usuário, URL ou componente |
/pw:review |
Revisar testes para anti-padrões e lacunas de cobertura |
/pw:fix <test> |
Diagnosticar e corrigir testes com falha ou instáveis |
/pw:migrate |
Migrar do Cypress ou Selenium para Playwright |
/pw:coverage |
Analisar o que está testado vs. o que está faltando |
/pw:testrail |
Sincronizar com TestRail — ler casos, enviar resultados |
/pw:browserstack |
Executar no BrowserStack, obter relatórios cross-browser |
/pw:report |
Gerar relatório de testes no formato preferido |
Fluxo de Trabalho de Início Rápido
A sequência recomendada para a maioria dos projetos:
1. /pw:init → configura config, pipeline CI e um primeiro teste de fumaça
2. /pw:generate → gera testes a partir da sua especificação ou URL
3. /pw:review → valida qualidade e sinaliza anti-padrões ← sempre executar após generate
4. /pw:fix <test> → diagnostica e repara quaisquer testes com falha/instáveis ← executar quando o CI ficar vermelho
Pontos de verificação:
- Após
/pw:generate — sempre execute /pw:review antes de fazer commit; ele captura anti-padrões de localizador e asserções ausentes automaticamente.
- Após
/pw:fix — execute a suite completa localmente (npx playwright test) para confirmar que a correção não introduz regressões.
- Após
/pw:migrate — execute /pw:coverage para confirmar paridade com a suite antiga antes de descomissionar os testes Cypress/Selenium.
Exemplo: Gerar → Revisar → Corrigir
# 1. Gerar testes a partir de uma história de usuário
/pw:generate "As a user I can log in with email and password"
# Gerado: tests/auth/login.spec.ts
# → Playwright Pro cria o arquivo usando o template de auth.
# 2. Revisar os testes gerados
/pw:review tests/auth/login.spec.ts
# → Sinaliza: um teste usou page.locator('input[type=password]') — sugere getByLabel('Password')
# → Correção aplicada automaticamente.
# 3. Executar localmente para confirmar
npx playwright test tests/auth/login.spec.ts --headed
# 4. Se um teste for instável no CI, diagnosticá-lo
/pw:fix tests/auth/login.spec.ts
# → Identifica asserção web-first ausente; substitui waitForTimeout(2000) por expect(locator).toBeVisible()
Regras de Ouro
getByRole() em vez de CSS/XPath — resistente a mudanças de marcação
- Nunca
page.waitForTimeout() — use asserções web-first
expect(locator) tenta automaticamente; expect(await locator.textContent()) não
- Isole cada teste — sem estado compartilhado entre testes
baseURL na config — zero URLs hardcoded
- Retries:
2 no CI, 0 localmente
- Traces:
'on-first-retry' — depuração rica sem lentidão
- Fixtures em vez de globais —
test.extend() para estado compartilhado
- Um comportamento por teste — múltiplas asserções relacionadas são aceitáveis
- Simule apenas serviços externos — nunca simule sua própria aplicação
Prioridade de Localizador
1. getByRole() — botões, links, cabeçalhos, elementos de formulário
2. getByLabel() — campos de formulário com rótulos
3. getByText() — texto não interativo
4. getByPlaceholder() — inputs com placeholder
5. getByTestId() — quando nenhuma opção semântica existe
6. page.locator() — CSS/XPath como último recurso
O que Está Incluído
- 9 skills com instruções detalhadas passo a passo
- 3 agents especializados: test-architect, test-debugger, migration-planner
- 55 templates de teste: auth, CRUD, checkout, pesquisa, formulários, dashboard, configurações, integração, notificações, API, acessibilidade
- 2 servidores MCP (TypeScript): integrações TestRail e BrowserStack
- Hooks inteligentes: validação automática de qualidade de teste, detecção automática de projetos Playwright
- 6 documentos de referência: regras de ouro, localizadores, asserções, fixtures, armadilhas, testes instáveis
- Guias de migração: tabelas de mapeamento Cypress e Selenium
Configuração de Integração
TestRail (Opcional)
export TESTRAIL_URL="https://your-instance.testrail.io"
export TESTRAIL_USER="your@email.com"
export TESTRAIL_API_KEY="your-api-key"
BrowserStack (Opcional)
export BROWSERSTACK_USERNAME="your-username"
export BROWSERSTACK_ACCESS_KEY="your-access-key"
Referência Rápida
Veja o diretório reference/ para:
golden-rules.md — As 10 regras não negociáveis
locators.md — Prioridade completa de localizador com folha de referência
assertions.md — Referência de asserções web-first
fixtures.md — Fixtures personalizados e padrões storageState
common-pitfalls.md — Os 10 erros principais e correções
flaky-tests.md — Comandos de diagnóstico e correções rápidas
Veja templates/README.md para o índice completo de templates.
1---2name: playwright-pro3description: Toolkit de testes Playwright de nível produção. Use quando o usuário menciona testes Playwright, testes E2E, automação de navegador, correção de testes instáveis, migração de testes, testes CI/CD ou suites de testes. Gere testes, corrija falhas instáveis, migre do Cypress/Selenium, sincronize com TestRail, execute no BrowserStack. 55 templates, 3 agents, relatórios inteligentes.4---56# Playwright Pro78Toolkit de testes Playwright de nível produção para agentes de codificação com IA.910## Comandos Disponíveis1112Quando instalado como plugin Claude Code, estes estão disponíveis como comandos `/pw:`:1314| Comando | O que faz |15|---|---|16| `/pw:init` | Configurar o Playwright — detecta framework, gera config, CI, primeiro teste |17| `/pw:generate <spec>` | Gerar testes a partir de história de usuário, URL ou componente |18| `/pw:review` | Revisar testes para anti-padrões e lacunas de cobertura |19| `/pw:fix <test>` | Diagnosticar e corrigir testes com falha ou instáveis |20| `/pw:migrate` | Migrar do Cypress ou Selenium para Playwright |21| `/pw:coverage` | Analisar o que está testado vs. o que está faltando |22| `/pw:testrail` | Sincronizar com TestRail — ler casos, enviar resultados |23| `/pw:browserstack` | Executar no BrowserStack, obter relatórios cross-browser |24| `/pw:report` | Gerar relatório de testes no formato preferido |2526## Fluxo de Trabalho de Início Rápido2728A sequência recomendada para a maioria dos projetos:2930```311. /pw:init → configura config, pipeline CI e um primeiro teste de fumaça322. /pw:generate → gera testes a partir da sua especificação ou URL333. /pw:review → valida qualidade e sinaliza anti-padrões ← sempre executar após generate344. /pw:fix <test> → diagnostica e repara quaisquer testes com falha/instáveis ← executar quando o CI ficar vermelho35```3637**Pontos de verificação:**38- Após `/pw:generate` — sempre execute `/pw:review` antes de fazer commit; ele captura anti-padrões de localizador e asserções ausentes automaticamente.39- Após `/pw:fix` — execute a suite completa localmente (`npx playwright test`) para confirmar que a correção não introduz regressões.40- Após `/pw:migrate` — execute `/pw:coverage` para confirmar paridade com a suite antiga antes de descomissionar os testes Cypress/Selenium.4142### Exemplo: Gerar → Revisar → Corrigir4344```bash45# 1. Gerar testes a partir de uma história de usuário46/pw:generate "As a user I can log in with email and password"4748# Gerado: tests/auth/login.spec.ts49# → Playwright Pro cria o arquivo usando o template de auth.5051# 2. Revisar os testes gerados52/pw:review tests/auth/login.spec.ts5354# → Sinaliza: um teste usou page.locator('input[type=password]') — sugere getByLabel('Password')55# → Correção aplicada automaticamente.5657# 3. Executar localmente para confirmar58npx playwright test tests/auth/login.spec.ts --headed5960# 4. Se um teste for instável no CI, diagnosticá-lo61/pw:fix tests/auth/login.spec.ts62# → Identifica asserção web-first ausente; substitui waitForTimeout(2000) por expect(locator).toBeVisible()63```6465## Regras de Ouro66671. `getByRole()` em vez de CSS/XPath — resistente a mudanças de marcação682. Nunca `page.waitForTimeout()` — use asserções web-first693. `expect(locator)` tenta automaticamente; `expect(await locator.textContent())` não704. Isole cada teste — sem estado compartilhado entre testes715. `baseURL` na config — zero URLs hardcoded726. Retries: `2` no CI, `0` localmente737. Traces: `'on-first-retry'` — depuração rica sem lentidão748. Fixtures em vez de globais — `test.extend()` para estado compartilhado759. Um comportamento por teste — múltiplas asserções relacionadas são aceitáveis7610. Simule apenas serviços externos — nunca simule sua própria aplicação7778## Prioridade de Localizador7980```811. getByRole() — botões, links, cabeçalhos, elementos de formulário822. getByLabel() — campos de formulário com rótulos833. getByText() — texto não interativo844. getByPlaceholder() — inputs com placeholder855. getByTestId() — quando nenhuma opção semântica existe866. page.locator() — CSS/XPath como último recurso87```8889## O que Está Incluído9091- **9 skills** com instruções detalhadas passo a passo92- **3 agents especializados**: test-architect, test-debugger, migration-planner93- **55 templates de teste**: auth, CRUD, checkout, pesquisa, formulários, dashboard, configurações, integração, notificações, API, acessibilidade94- **2 servidores MCP** (TypeScript): integrações TestRail e BrowserStack95- **Hooks inteligentes**: validação automática de qualidade de teste, detecção automática de projetos Playwright96- **6 documentos de referência**: regras de ouro, localizadores, asserções, fixtures, armadilhas, testes instáveis97- **Guias de migração**: tabelas de mapeamento Cypress e Selenium9899## Configuração de Integração100101### TestRail (Opcional)102```bash103export TESTRAIL_URL="https://your-instance.testrail.io"104export TESTRAIL_USER="your@email.com"105export TESTRAIL_API_KEY="your-api-key"106```107108### BrowserStack (Opcional)109```bash110export BROWSERSTACK_USERNAME="your-username"111export BROWSERSTACK_ACCESS_KEY="your-access-key"112```113114## Referência Rápida115116Veja o diretório `reference/` para:117- `golden-rules.md` — As 10 regras não negociáveis118- `locators.md` — Prioridade completa de localizador com folha de referência119- `assertions.md` — Referência de asserções web-first120- `fixtures.md` — Fixtures personalizados e padrões storageState121- `common-pitfalls.md` — Os 10 erros principais e correções122- `flaky-tests.md` — Comandos de diagnóstico e correções rápidas123124Veja `templates/README.md` para o índice completo de templates.