Playwright MCP Explicado: Deixe a IA Escrever Seus Testes

Antes do Playwright MCP, testes gerados por IA falhavam nos locators porque a IA imaginava uma estrutura DOM que não correspondia à aplicação real. Com o MCP, a IA abre seu navegador, inspeciona a árvore de acessibilidade real e gera locators getByRole e getByLabel a partir do que vê, não do que assume.

O que é MCP e por que importa para testes

MCP (Model Context Protocol) é um protocolo aberto que permite que assistentes de IA se conectem a ferramentas externas e fontes de dados. A Anthropic lançou em 2024 e a equipe do Playwright adicionou suporte oficial a MCP em 2025.

O que isso significa na prática: quando você usa o Claude no seu IDE conectado via MCP, ele pode abrir um navegador, navegar para sua aplicação e inspecionar o DOM. Tudo isso antes de escrever uma linha de código de teste.

Antes do MCP, a geração de testes com IA funcionava assim:

1. Você descreve sua aplicação em texto

2. A IA gera código baseado na descrição

3. Você descobre que os locators estão errados porque a IA imaginou uma estrutura que não corresponde à realidade

4. Você corrige os locators manualmente

Com MCP, funciona assim:

1. A IA abre sua aplicação no navegador

2. A IA inspeciona a estrutura DOM real

3. A IA gera código usando roles reais, labels reais, data-testids reais

4. Os locators funcionam na primeira execução (geralmente)

A diferença não é só conveniência. É uma mudança qualitativa na qualidade do resultado.

Configurando o Playwright MCP

Pré-requisitos

• Node.js 18 ou superior
• Um cliente AI compatível com MCP (Claude Desktop, ou um IDE com suporte a MCP)

Instalação

npm install -g @playwright/mcp

Ou adicione como dependência de projeto:

npm install --save-dev @playwright/mcp

Conectando ao Claude Desktop

Adicione o servidor MCP à configuração do seu Claude Desktop. Abra o arquivo de config:

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

Reinicie o Claude Desktop. Você deve ver uma nova ferramenta Playwright disponível no menu de ferramentas.

Conectando ao VS Code

Se você usa uma extensão do VS Code compatível com MCP (como a extensão Claude para VS Code), a configuração é similar: adicione o servidor nas configurações de servidores MCP da extensão.

O que a IA vê através do MCP

Quando a IA se conecta via Playwright MCP, ela tem acesso a:

Gerando um teste com MCP

Veja como uma sessão real com MCP funciona. Você abre seu assistente de IA, pede para escrever um teste, e ele começa a trabalhar:

A IA vê:

• Uma barra de navegação com um botão "Login" (role: button, name: "Login")
• Um modal com dois campos de input (label: "Username", label: "Password")
• Um botão de submit (role: button, name: "Submit")
• Após o login: um heading com texto "My Travel Items"

import { test, expect } from '@playwright/test';

test('usuário consegue fazer login com credenciais válidas', async ({ page }) => {
  await page.goto('https://lab.becomeqa.com');
  
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Username').fill('admin@becomeqa.com');
  await page.getByLabel('Password').fill('testpass123');
  await page.getByRole('button', { name: 'Submit' }).click();
  
  await expect(page.getByRole('heading', { name: 'My Travel Items' })).toBeVisible();
});

Os locators estão corretos porque a IA olhou para a aplicação real, não para uma descrição dela. getByRole('button', { name: 'Login' }) funciona porque a IA verificou que aquele botão existe com exatamente esse nome acessível.

Rodando testes gerados pelo MCP com seu setup existente

O MCP gera testes Playwright padrão. Eles se integram com sua suite de testes existente sem alterações:

# Roda como qualquer outro teste
npx playwright test tests/login.spec.ts

# Ou roda todos os testes
npx playwright test

Os testes gerados usam o mesmo playwright.config.ts, os mesmos reporters, o mesmo pipeline de CI. O MCP é uma ferramenta de geração, não um test runner separado.

Workflow prático: desenvolvimento de testes com IA

Um workflow que funciona bem na prática:

Peça à IA para escrever um teste para um cenário específico. Seja específico sobre o que quer verificar: não só "testar o login" mas "verificar que fazer login com credenciais válidas mostra o dashboard com o nome do usuário na navegação."

Verifique:

• Os locators usam getByRole / getByLabel / getByTestId? (Bom)
• Há padrões getByXpath ou locator('div.alguma-classe')? (Ruim, vão quebrar)
• Há chamadas page.waitForTimeout(2000)? (Ruim, use await expect(...) em vez disso)
• O teste tem assertions significativas, não só "página carregou"?

npx playwright test tests/login.spec.ts --headed

Observe a execução. Corresponde ao que você esperava?

Se algo estiver errado, diga à IA o que aconteceu. "O teste falha no step do modal. Parece que o modal demora um momento para aparecer. Pode adicionar uma espera adequada?" A IA pode navegar de volta para a aplicação e inspecionar o que está acontecendo.

Quando o teste do caminho feliz funcionar, peça testes negativos: "Agora escreva um teste para o caso em que a senha está errada." O MCP permite que a IA interaja com a aplicação para ver o que realmente acontece: qual mensagem de erro aparece, onde aparece, como está redigida.

O que o MCP gera bem vs. menos bem

• Fluxos do caminho feliz com estrutura de UI clara
• Interações com formulários (fill, select, click)
• Assertions em texto e headings visíveis
• Interações com modais e diálogos
• Testes para aplicações acessíveis com HTML semântico bom

• Cenários complexos dependentes de estado ("usuário tem exatamente 3 itens em um estado específico")
• Testes que dependem de setup de dados no backend
• Testes de layout visual (este elemento está posicionado corretamente?)
• Race conditions e cenários sensíveis a timing
• Testes que precisam de setup/teardown de banco ou API

Para a segunda categoria, o código gerado pela IA dá uma estrutura inicial que precisa de refinamento manual.

MCP vs. geração de código por prompt

| Aspecto | MCP | Geração por prompt |

|--------|-----|-------------------|

| Precisão dos locators | Alta, do DOM real | Variável, a partir de descrição |

| Taxa de sucesso na primeira execução | Geralmente funciona | Frequentemente precisa de correções |

| Requisito | Acesso ao app via navegador | Só descrição em texto |

| Útil quando | App está rodando localmente | App ainda não foi construído |

Ambas as abordagens têm seu lugar. Para testar uma aplicação implantada, o MCP é muito superior. Para escrever testes antes de a aplicação existir (TDD), a geração por prompt a partir de uma especificação ainda é útil.

Usando MCP no CI

O MCP é uma ferramenta de desenvolvimento, não de CI. O workflow é:

1. Use o MCP localmente para gerar e iterar nos testes

2. Faça commit dos testes gerados no seu repositório

3. O CI roda os testes em modo headless usando Playwright padrão

Você não roda o MCP no CI. Você roda os testes que o MCP ajudou a escrever.

FAQ

Qualquer aplicação web acessível via navegador. Não importa se o frontend é React, Vue, Angular ou HTML puro. O MCP funciona no nível do navegador, não do framework.

Experimentalmente, sim. Você pode pedir à IA para olhar a aplicação atual e corrigir um teste que está falhando por conta de uma mudança de UI. Na prática, isso funciona bem para atualizações de locators, mas menos bem para mudanças estruturais no fluxo do teste.

O pacote @playwright/mcp é open source e gratuito. Você precisa de um cliente AI compatível com MCP. O Claude Desktop (Anthropic) tem níveis gratuito e pago. Outros clientes compatíveis variam.

Os dois. Especifique o que quer: "Escreva este teste em TypeScript com strict mode" ou a IA vai usar o que corresponder à configuração do seu projeto existente.

Com a configuração MCP certa e o cliente AI adequado, sim. Você pode pedir à IA para rodar um teste, observar a falha, inspecionar a aplicação no estado de falha e atualizar o teste. Esse é o workflow de testes agentivo que está surgindo em 2026: a IA itera nos testes de forma autônoma até que passem.