Playwright MCP — Casos de uso, Instalar & Demo ao vivo

Name: Playwright MCP Server
Author: microsoft

Por que usar

Principais recursos

First-party — publicado e mantido pela equipe Microsoft Playwright
Baseado em árvore de acessibilidade — muito mais confiável que agentes de navegador baseados em pixels
Suporta Chromium, Firefox, WebKit, modo headed ou headless
Múltiplas abas, upload/download de arquivos, interceptação de rede, gravação de vídeo

Demo ao vivo

Como fica na prática

playwright.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": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

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

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

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

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

VS Code → Cline → MCP Servers → Edit

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

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

~/.codeium/windsurf/mcp_config.json

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

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "playwright",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add playwright -- npx -y @playwright/mcp@latest

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

Casos de uso

Usos do mundo real: Playwright

Teste de fumaça de um deploy em produção em 60 segundos

👤 Engenheiros DevOps, gerentes de lançamento ⏱ ~5 min intermediate

Quando usar: Você acabou de fazer um deploy e quer uma verificação rápida de que os fluxos críticos do usuário ainda funcionam, antes de declarar sucesso.

Pré-requisitos

Credenciais de conta de teste (use uma conta QA dedicada, não um usuário real) — Armazene em variáveis de ambiente ou no seu próprio prompt

Fluxo

Abra a página inicial e verifique se carrega

Abra https://app.example.com. Verifique se a página retorna 200, o H1 diz 'Welcome', e o botão de login está visível.✓ Copiado

→ Pass/fail com screenshot se falhar
Execute o fluxo login → ação principal → logout

Faça login como [email protected] / [password]. Depois crie um novo projeto nomeado 'smoke-test-<timestamp>'. Depois delete-o. Depois faça logout.✓ Copiado

→ Cada etapa tem sucesso; se alguma falhar, screenshot + DOM dump
Diagnostique qualquer falha

Se uma etapa falhou, capture o snapshot da página e diga-me o que é diferente de um baseline funcionando.✓ Copiado

→ Elemento específico ou requisição de rede que quebrou

Resultado: Confiança (ou pânico rápido) sobre seu deploy em menos de um minuto, sem precisar de um suite E2E completo.

Armadilhas

Dados de teste hard-coded acumulam e poluem a produção — Sempre use timestamps únicos em dados de teste e limpe ao final do fluxo
A sessão do navegador persiste entre execuções, mascarando bugs que precisam de um estado limpo — Execute com --browser-context: incognito ou limpe cookies entre execuções

Combine com: sentry

Audite seu site em 5 larguras de viewport e relate problemas

👤 Engenheiros de frontend, designers ⏱ ~15 min intermediate

Quando usar: Antes de enviar um site de marketing ou página de produto, você quer verificar se não quebra em larguras comuns.

Fluxo

Abra a página em 5 larguras de viewport (320, 375, 768, 1024, 1440)

Abra https://example.com nos viewports 320×568, 375×812, 768×1024, 1024×768, 1440×900. Tire um screenshot de página inteira de cada um.✓ Copiado

→ 5 screenshots salvos
Detecte overflow horizontal em cada largura

Para cada viewport, liste quaisquer elementos onde scrollWidth > viewportWidth. Estes estão causando scroll horizontal e parecem quebrados.✓ Copiado

→ Lista por-viewport de seletores CSS ofensivos
Sugira correções

Para cada elemento de overflow, obtenha seu CSS calculado e sugira a menor correção (provavelmente max-width, overflow-wrap, ou ajuste de breakpoint).✓ Copiado

→ Diff acionável por elemento

Resultado: Uma lista de correções priorizada com seletores específicos, adequada para ser arquivada como um único PR.

Armadilhas

Usuários reais têm barras de rolagem (15px no Windows), que o navegador headless não simula por padrão — Teste com ambos --browser=chromium e --browser=webkit; larguras importam mais do que você pensa

Combine com: chrome-devtools · filesystem

Rastreie seu site e encontre cada link interno quebrado

👤 Mantenedores de documentação, gerentes de SEO ⏱ ~30 min intermediate

Quando usar: Antes de um push de marketing ou uma vez por trimestre — 404s silenciosos em links internos prejudicam SEO e confiança do usuário.

Fluxo

Rastreie o site coletando todos os links internos

Começando de https://docs.example.com, rastreie todas as páginas no mesmo domínio (profundidade máxima 3). Colete cada href encontrado.✓ Copiado

→ Inventário completo de links
Teste cada link

Para cada URL única, envie uma requisição HEAD e capture o código de status. Sinalize qualquer coisa >= 400.✓ Copiado

→ Lista de links quebrados com códigos de status
Agrupe links quebrados por referrer

Para cada link quebrado, liste qual(is) página(s) link para ele, para que eu saiba onde corrigir.✓ Copiado

→ Lista por-link-quebrado de referrers, ordenada por contagem de referrer

Resultado: Um relatório markdown que você pode entregar à equipe de docs listando cada link quebrado agrupado por qual página precisa ser corrigida.

Armadilhas

Alguns sites aplicam rate-limit em crawlers agressivos — Adicione atraso entre requisições; se executando em produção, faça durante horas de pico baixo

Combine com: filesystem · github

Raspe dados que requerem autenticação

👤 Analistas de dados, pesquisadores ⏱ ~20 min advanced

Quando usar: Os dados que você precisa estão atrás de um login (seu próprio painel de admin, relatórios internos, etc.) e scrapers básicos não podem alcançá-lo.

Pré-requisitos

Credenciais válidas para o alvo — Use uma conta de serviço, nunca a sua pessoal

Fluxo

Faça login

Abra https://target.example.com/login. Preencha o campo de email com [email] e senha com [password]. Envie.✓ Copiado

→ Sessão confirmada — pousou na URL do dashboard
Navegue para a página de dados

Clique na seção Reports. Aguarde a tabela de dados renderizar.✓ Copiado

→ Tabela visível em DOM
Extraia os dados

Leia cada linha da tabela de relatório. Retorne como JSON com cada coluna como uma chave.✓ Copiado

→ Dataset completo como JSON

Resultado: Dados estruturados que você não poderia ter obtido com um scraper HTTP simples, pronto para colocar em uma planilha ou BD.

Armadilhas

MFA está ativado e quebra o fluxo — Configure uma senha específica do app se o serviço suportar, ou use um token API de longa duração em vez disso
Captchas aparecem após múltiplos logins — Use um contexto de navegador persistente (--user-data-dir) para que cookies sejam reutilizados e você não acione gates de captcha

Combine com: postgres · filesystem

Combinações

Combine com outros MCPs para 10× de alavancagem

playwright + filesystem

Raspe um site, salve o conteúdo de cada página em disco para RAG offline

Rastreie docs.stripe.com começando de /api, salve cada página como arquivo Markdown sob ./knowledge/stripe/{path}.md.✓ Copiado

playwright + chrome-devtools

Teste de performance + funcional em um fluxo — verifique se a página carrega corretamente E rápido

Abra minha página inicial. Verifique o H1, depois capture um rastreamento Lighthouse e diga-me se LCP está abaixo de 2 segundos.✓ Copiado

playwright + sentry

Reproduza um erro de produção relatado no Sentry reproduzindo breadcrumbs do usuário

Sentry issue WEB-3a91 diz que o usuário clicou em X depois Y depois crashou. Reproduza essa sequência exata em Playwright e confirme.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
browser_navigate	url: str	Navegue para uma URL — primeira ação de qualquer fluxo	1 carregamento de página
browser_snapshot		Obtenha uma visão estruturada de todos os elementos interativos (links, botões, inputs)	gratuito
browser_click	ref: str (from snapshot) \| selector: str	Clique em um elemento identificado por ref de snapshot ou seletor CSS	gratuito
browser_type	ref, text, submit?: bool	Preencha um campo de input; com submit:true também pressiona Enter	gratuito
browser_screenshot	fullPage?: bool, path?: str	Capture evidência visual — debugging ou auditoria	espaço em disco
browser_evaluate	script: str	Execute JS arbitrário no contexto da página — use com moderação, prefira ferramentas específicas	gratuito
browser_network_requests		Inspecione o que a página está carregando; útil para encontrar endpoints de API ocultos	gratuito

Custo e limites

O que custa rodar

Cota de API: Gratuito — executa localmente, apenas seus recursos de máquina
Tokens por chamada: Snapshots são 500-3000 tokens dependendo da complexidade da página
Monetário: Gratuito. Binários do navegador baixados uma vez (~300MB Chromium).
Dica: Use browser_snapshot em vez de screenshots — é 100× mais barato em tokens e mais confiável para Claude agir.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Passe via variáveis de ambiente; nunca coloque credenciais de produção real em prompts

Saída de dados: Navegadores se conectam a qualquer URL para a qual você navegar. Sem telemetria para Microsoft.

Sessões do navegador persistem — limpe cookies entre execuções se estiver testando auth.
Modo headed abre uma janela real na sua máquina; use headless para CI.

Solução de problemas

Erros comuns e correções

Elemento não encontrado / TimeoutError

A página não terminou de renderizar. Adicione uma espera explícita: browser_wait_for(selector) ou browser_wait_for(text='...') antes da ação.

Verificar: Take a snapshot first to see what's actually on the page

Navegador falha ao iniciar no Linux

Instale dependências do SO: npx playwright install-deps. Comum em Docker — use a imagem oficial do Playwright como base.

Verificar: playwright --version

Todas as navegações falham com net::ERR_*

Problema de sandboxing de rede. Execute com --no-sandbox se em Docker, ou verifique seu firewall / proxy.

Site detecta automação e mostra captcha

Use --browser-type=firefox (menos detectado que Chromium headless), ou execute headed se apropriado. Alguns sites são intencionalmente resistentes a bots — respeite isso.

Alternativas

Playwright vs. outros

Alternativa	Quando usar	Troca
puppeteer MCP	Você só precisa de Chromium e quer uma API ligeiramente mais simples	Apenas Chromium; sem Firefox/WebKit; comunidade menor agora
Firecrawl MCP	Você apenas precisa extrair conteúdo, não interagir com a página	Hospedado (custa créditos) mas zero infra; não pode clicar em fluxos
Browserbase MCP	Você precisa executar automações do navegador a partir de um contexto serverless (sem navegador local)	Serviço hospedado com preço por minuto; ótimo para agentes de produção

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills