Playwright MCP

Gere testes Playwright com assistentes de IA fornecendo acesso em tempo real ao DOM do navegador, interações e capturas de tela.

GitHub

Experimente este MCPPatrocinado

Documentação

Como Usar o playwright-mcp?

Introdução

Já tentou usar o Cursor ou o Claude para escrever testes Playwright? Sim, é meio bagunçado.

Por quê? Porque seu assistente de IA não tem ideia do que está na sua página web. É como tentar descrever uma pintura para alguém que está vendado. O resultado?

Testes instáveis → A IA está adivinhando seletores e errando.
Scripts quebrados → Você gasta mais tempo corrigindo testes do que escrevendo-os.
Pesadelos de depuração → A IA não consegue "ver" o que está acontecendo, então você acaba fazendo todo o trabalho pesado.

Não seria legal se sua IA pudesse realmente entender sua página web em vez de apenas fazer suposições fundamentadas?

Conheça o playwright-mcp!

playwright-mcp dá superpoderes ao seu assistente de IA ao tornar o navegador totalmente visível para ele. Em vez de trabalhar no escuro, seu assistente de IA agora tem acesso em tempo real ao DOM da página, elementos e interações.

Como o playwright-mcp Funciona (ou Como Corrigimos Essa Bagunça)

Uma vez instalado, o playwright-mcp inicia um navegador controlado pelo Playwright e dá ao seu assistente de IA acesso total a ele. Isso desbloqueia:

Gravação de interações → Clique, digite, role—deixe o playwright-mcp transformar suas ações em casos de teste Playwright totalmente funcionais.
Captura de telas → Capture elementos ou páginas inteiras para que sua IA obtenha contexto visual real (sem mais adivinhações).
Extração do DOM → Obtenha toda a estrutura HTML para que a IA possa gerar seletores sólidos.
Execução de JavaScript → Execute JS personalizado dentro do navegador para depuração, automação ou apenas por diversão.

Por Que Você Vai Amar o playwright-mcp

🚀 Testes gerados por IA que realmente funcionam → Sem mais seletores instáveis, testes quebrados ou adivinhações.

⏳ Economia massiva de tempo → Escreva e depure testes Playwright 5x mais rápido.

🛠️ Menos dores de cabeça → Seu assistente de IA obtém contexto ao vivo da página, então pode gerar casos de teste reais.

🔌 Funciona de imediato → Conecte-o ao Cursor, Claude, WindSurf ou qualquer outra ferramenta que você use—simplesmente funciona.

Dê à Sua IA o Contexto Que Ela Merece

Cansado de corrigir testes gerados por IA? Pare de depurar os palpites ruins da IA—comece a escrever testes Playwright impecáveis. Use o guia abaixo para instalar o playwright-mcp e deixe seu assistente de IA realmente ajudar você de uma vez.

Instalação: Comece a Funcionar em Nenhum Tempo

Pré-requisitos (ou o Que Você Precisa Antes de Começar)

Antes de instalar o playwright-mcp, certifique-se de ter:

✅ Node.js instalado no seu sistema (porque, bem… é um pacote npm)

✅ Playwright e seu navegador Chromium instalados

✅ Um IDE que suporte MCP, como o Cursor

✅ Uma mente pronta para automatizar testes Playwright como um profissional

Configurando o playwright-mcp (É Fácil, Eu Prometo)

Conecte-o ao Seu IDE (Configuração no Cursor)

Se você está usando o Cursor, siga estes passos para conectar o playwright-mcp como um chefe:

Abra o IDE Cursor
Navegue até Configurações (⚙️)
Selecione Configurações do Cursor → Vá para a aba MCP
Clique em "Adicionar novo servidor MCP"
Preencha os seguintes detalhes:
- Nome → playwright-mcp
- Comando → npx -y playwright-mcp
Clique em "Adicionar" e pronto—você está conectado! 🚀

Nota: Se clicar em "Adicionar novo servidor MCP" abrir um arquivo (.cursor/mcp.json), cole o seguinte código e salve:

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "playwright-mcp"
      ]
    }
  }
}

Agora o Cursor realmente entende suas páginas web. Sem mais sugestões aleatórias de testes baseadas em zero contexto! Vá para o tutorial do Claude ou tutorial do Cursor para entender em detalhes.

Conecte-o ao Claude desktop

Espere… Funciona com Outros Assistentes de IA? Sim! Embora o playwright-mcp seja uma combinação perfeita para IDEs, você pode usá-lo com o Claude desktop para escrever testes também.

Instale o playwright-mcp (A Parte Fácil)
1. Primeiro, abra seu terminal e execute:
2. npm install -g playwright-mcp
Conecte-o ao Claude Desktop
1. Encontre o Arquivo de Configuração
2. No Windows
  1. %APPDATA%\Claude\claude_desktop_config.json
3. No macOS:
  1. ~/Library/Application Support/Claude/claude_desktop_config.json
4. Atualize o arquivo de configuração
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "playwright-mcp"]
    }
  }
}
```
Reinicie o Claude Desktop (Porque É um Novo Dia)
1. Feche e reabra o Claude Desktop para aplicar as alterações.
Verifique se Está Funcionando
1. Depois que tudo estiver configurado, vamos testar se o Claude consegue realmente falar com o Playwright agora.
2. Abra o Claude e pergunte: "Liste todas as ferramentas MCP disponíveis."
3. Se o playwright-mcp estiver instalado corretamente, ele deve listar ferramentas como:
  1. get-context
  2. get-full-dom
  3. get-screenshot
  4. execute-code
  5. init-browser
  6. validate-selectors
4. Peça ao Claude para iniciar o navegador e um navegador deve abrir após sua aprovação!

Agora que o Claude tem acesso às páginas web, você pode pedir que ele escreva testes altamente contextuais! Vá para o tutorial do Claude ou tutorial do Cursor para entender em detalhes.

📖 Ver Documentação