Habilidade de Teste de Aplicações Web com Playwright

--- name: web-application-testing-skill description: Um kit de ferramentas para interagir e testar aplicações web locais usando Playwright. --- # Teste de Aplicações Web Esta skill permite testes e depuração abrangentes de aplicações web locais usando automação Playwright. ## Quando Usar Esta Skill Use esta skill quando precisar de: - Testar funcionalidades de frontend em um navegador real - Verificar comportamento e interações da interface do usuário - Depurar problemas em aplicações web - Capturar capturas de tela para documentação ou depuração - Inspecionar logs do console do navegador - Validar envios de formulários e fluxos de usuário - Verificar design responsivo em diferentes viewports ## Pré-requisitos - Node.js instalado no sistema - Uma aplicação web em execução local (ou URL acessível) - 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 menus suspensos - Lidar com diálogos e alertas ### 2. Verificação - Afirmar presença de elementos - Verificar conteúdo de texto - Checar visibilidade de elementos - Validar URLs - Testar comportamento responsivo ### 3. Depuração - Capturar capturas de tela - Visualizar logs do console - Inspecionar solicitações de rede - Depurar testes com falha ## Exemplos de Uso ### Exemplo 1: Teste Básico de Navegação ```javascript // Navegar para uma página e verificar título await page.goto('http://localhost:3000'); const title = await page.title(); console.log('Título da página:', title); ``` ### Exemplo 2: Interação com Formulário ```javascript // Preencher e enviar um formulário await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### Exemplo 3: Captura de Tela ```javascript // Capturar uma captura de tela para depuração await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## Diretrizes 1. **Sempre verifique se a aplicação está em execução** - Verifique se o servidor local está acessível antes de executar testes 2. **Use esperas explícitas** - Aguarde elementos ou navegação concluírem antes de interagir 3. **Capture capturas de tela em falhas** - Tire capturas de tela 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 data-testid ou seletores baseados em função em vez de classes CSS ## Padrões Comuns ### Padrão: Aguardar Elemento ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### Padrão: Verificar se Elemento Existe ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### Padrão: Obter Logs do Console ```javascript page.on('console', msg => console.log('Log do navegador:', msg.text())); ``` ### Padrão: Lidar com Erros ```javascript 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