Testes de Aplicações Web

Esta habilidade permite testes e depuração abrangentes de aplicações web locais usando a automação do Playwright.

Você deve usar o Playwright MCP Server para realizar o trabalho, se possível. Se o MCP Server não estiver disponível, você pode executar o código em um ambiente Node.js local com o Playwright instalado.

Quando Usar Esta Habilidade

Use esta habilidade quando precisar:

• Testar a funcionalidade frontend em um navegador real
• Verificar o comportamento e as interações da UI
• Depurar problemas de aplicações web
• Capturar screenshots para documentação ou depuração
• Inspecionar logs do console do navegador
• Validar envios de formulário e fluxos de usuário
• Verificar o design responsivo em diferentes viewports

Pré-requisitos

• Node.js instalado no sistema
• Uma aplicação web rodando localmente (ou URL acessível)
• O Playwright será instalado automaticamente se não estiver presente

Capacidades Principais

1. Automação de Navegador

• Navegar para URLs
• Clicar em botões e links
• Preencher campos de formulário
• Selecionar em dropdowns
• Lidar com diálogos e alertas

2. Verificação

• Afirmar a presença de elementos
• Verificar conteúdo de texto
• Checar a visibilidade de elementos
• Validar URLs
• Testar comportamento responsivo

3. Depuração

• Capturar screenshots
• Visualizar logs do console
• Inspecionar requisições de rede
• Depurar testes falhos

Exemplos de Uso

Exemplo 1: Teste de Navegação Básico

// Navigate to a page and verify title
await page.goto("http://localhost:3000");
const title = await page.title();
console.log("Page title:", title);

Exemplo 2: Interação com Formulário

// Fill out and submit a form
await page.fill("#username", "testuser");
await page.fill("#password", "password123");
await page.click('button[type="submit"]');
await page.waitForURL("**/dashboard");

Exemplo 3: Captura de Screenshot

// Capture a screenshot for debugging
await page.screenshot({ path: "debug.png", fullPage: true });

Diretrizes

1. Sempre verifique se o aplicativo está rodando - Verifique se o servidor local está acessível antes de executar os testes
2. Use esperas explícitas - Espere que os elementos ou a navegação sejam concluídos antes de interagir
3. Capture screenshots em caso de falha - Tire screenshots para ajudar a depurar problemas
4. Limpe recursos - Sempre feche o navegador quando terminar
5. Lide com timeouts graciosamente - Defina timeouts razoáveis para operações lentas
6. Teste incrementalmente - Comece com interações simples antes de fluxos complexos
7. Use seletores com sabedoria - Prefira seletores data-testid ou baseados em role em vez de classes CSS

Padrões Comuns

Padrão: Esperar por Elemento

await page.waitForSelector("#element-id", { state: "visible" });

Padrão: Verificar se Elemento Existe

const exists = (await page.locator("#element-id").count()) > 0;

Padrão: Obter Logs do Console

page.on("console", (msg) => console.log("Browser log:", msg.text()));

Padrão: Lidar com Erros

try {
  await page.click("#button");
} catch (error) {
  await page.screenshot({ path: "error.png" });
  throw error;
}

Limitações

• Requer ambiente Node.js
• Não pode testar aplicativos móveis nativos (use React Native Testing Library em vez disso)
• Pode ter problemas com fluxos de autenticação complexos
• Alguns frameworks modernos podem exigir configuração específica

Funções Auxiliares

Algumas funções auxiliares estão disponíveis em test-helper.js para simplificar tarefas comuns como esperar por elementos, capturar screenshots e lidar com erros. Você pode importar e usar essas funções em seus testes para melhorar a legibilidade e a manutenibilidade.