Playwright MCP 自动化测试工具

Setup Inicial para Playwright MCP

Sumário

• Estrutura de pastas
• Testes implementados
• Recursos/Features habilitados
• Setup inicial (local)
• Principais comandos
• Onde ficam os artefatos
• Observações e dicas

Playwright MCP (Model Context Protocol) é a integração do framework Playwright (usado para automação e testes de aplicações web) com o MCP, um protocolo aberto criado pela OpenAI para conectar ferramentas externas a modelos de IA.

➡️ Em poucas palavras: permite que o Playwright seja controlado diretamente por modelos de IA, possibilitando que o próprio modelo execute testes, navegue em páginas, colete dados e valide comportamentos em tempo real.

Pre requisitos

• NodeJS: NodeJs
• VsCode: VsCode
• Playwright MCP server: playwright-mcp

Iniciar um projeto Playwright

• Criar um folder e depois dentro do folder executar o comando abaixo

npm init playwright@latest

Adicionar o Playwright MCP Server

• Abrir as extensoes do VsCode, no canto inferior esquerdo deve ver a opcao MCP SERVERS
  

• Clicar no icone de um globo, para abrir todos os MCP servers

• Selecionar Playwright e instalar

Configurações do MCP + VsCode

• Criar um novo diretorio na raiz do projeto com o nome .vscode
• Dentro desta pasta criar o arquivo settingsjson
  

Consultar MCP instalado

• Pode consultar o MCP no chat da AI que estiver a utilizar.

• Exemplo com o Github Copilot
  🎥 Watch the demo video
  

- Estrutura de pastas

tests/ — casos de teste (ex.: demoqa.spec.ts).

• page/ — Page Objects (POM) para encapsular interações com páginas (ex.: demoqaPage.ts).
• hook/ — fixtures e hooks do Playwright (ex.: hook.ts, browserManager.ts) responsáveis por configurar contexto, vídeos e salvar artefatos.
• test-results/ — saída dos testes (screenshots, page-source, vídeos e pastas com detalhes por execução).
• playwright-report/ — relatório HTML gerado pelo Playwright (recriado a cada execução com --reporter=html).
• utils/ — utilitários do projeto (ex.: testUtils.ts para carregar .env).
• img/ — imagens e demos usadas pelo README.
• playwright.config.ts — configuração do Playwright (timeouts, projects, opções use).
• .env — configurações locais (opcional) usadas pelos testes.

Testes implementados

Atualmente existem testes para o site DemoQA (cenários de exemplo):

• Scenario 1: Preencher o formulário "Text Box" e verificar os resultados.
• Scenario 2: Selecionar checkboxes na seção "Check Box" e verificar seleção.

Os testes usam Page Object Model (POM) e um hook global que captura screenshots e page-source quando o teste falha. O hook também tenta salvar o vídeo gravado, mas com timeout para não bloquear a execução.

Recursos/Features habilitados

• Gravação de vídeo por teste (configurada pelo browserManager), com salvamento apenas em falhas e timeboxed para evitar timeouts.
• Captura de screenshot em falhas e exportação do HTML (page.content()) para diagnóstico.
• Timeouts configuráveis em playwright.config.ts (timeout, actionTimeout).
• Integração leve com .env via utils/testUtils.ts para injeção de credenciais/URLs locais.

Setup inicial (local)

1. Instale Node.js (v16+ recomendada).
2. Clone o repositório e abra a pasta:

git clone <repo-url>
cd "playwright_mcp"

3. Instale as dependências:

npm install

4. (Opcional) Instale os navegadores do Playwright (se ainda não estiverem instalados):

npx playwright install

5. (Opcional) Crie um arquivo .env na raiz com variáveis usadas pelos testes, por exemplo:

BASE_URL=https://demoqa.com
TEST_USER=playwright_user
TEST_PASS=ChangeMe123

6. Verifique/ajuste playwright.config.ts conforme necessário (timeouts, projects, baseURL, etc.).

Principais comandos

• Executar todos os testes (todos os projetos):

npx playwright test

• Executar apenas Chromium:

npx playwright test --project=chromium

• Executar e gerar relatório HTML (substitui playwright-report/):

npx playwright test --reporter=html

• Abrir último relatório HTML gerado:

npx playwright show-report

• Listar testes (sem executar):

npx playwright test --list

• Remover backups antigos (mantém 3 mais recentes por padrão):

npm run cleanup:reports

Onde ficam os artefatos

• Screenshots: test-results/screenshots/
• Page source (HTML): test-results/page-source/
• Vídeos (quando salvos): test-results/videos/
• Relatório: playwright-report/index.html

Observações e dicas

• Se o relatório HTML parecer antigo (ex.: mostrando execuções anteriores), remova ou faça backup da pasta playwright-report/ antes de executar npx playwright test --reporter=html — o comando acima irá recriar a pasta com o último run.
• Para reduzir o tempo de salvamento de artefatos em CI, considere desabilitar vídeos ou gravar apenas em retries/CI.
• O hook atual timeboxa a operação de salvamento do vídeo (5s) para evitar que a finalização do vídeo cause timeouts no afterEach.