IMPORTANTE - Resolução de Caminho: Esta skill pode ser instalada em diferentes locais (sistema de plugins, instalação manual, global ou específica do projeto). Antes de executar qualquer comando, determine o diretório da skill com base em onde você carregou este arquivo SKILL.md e use esse caminho em todos os comandos abaixo. Substitua $SKILL_DIR pelo caminho real descoberto.

Caminhos comuns de instalação:

• Sistema de plugins: <plugin-root>/skills/playwright-skill
• Manual global: <agent-home>/skills/playwright-skill
• Específico do projeto: <project>/.agent/skills/playwright-skill

Automação de Navegador Playwright

Skill de automação de navegador de propósito geral. Escreverei código Playwright personalizado para qualquer tarefa de automação que você solicitar e o executarei através do executor universal.

FLUXO DE TRABALHO CRÍTICO - Siga estas etapas em ordem:

1. Detectar servidores de desenvolvimento automaticamente - Para testes em localhost, SEMPRE execute a detecção de servidor PRIMEIRO:

   cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))"
   

   • Se 1 servidor encontrado: Use-o automaticamente, informe o usuário
   • Se múltiplos servidores encontrados: Pergunte ao usuário qual testar
   • Se nenhum servidor encontrado: Peça a URL ou ofereça ajuda para iniciar o servidor de desenvolvimento

2. Escrever scripts em /tmp - NUNCA escreva arquivos de teste no diretório da skill; sempre use /tmp/playwright-test-*.js

3. Usar navegador visível por padrão - Sempre use headless: false a menos que o usuário solicite especificamente o modo headless

4. Parametrizar URLs - Sempre torne as URLs configuráveis via variável de ambiente ou constante no topo do script

Como Funciona

1. Você descreve o que deseja testar/automatizar
2. Eu detecto automaticamente servidores de desenvolvimento em execução (ou peço a URL se estiver testando um site externo)
3. Eu escrevo código Playwright personalizado em /tmp/playwright-test-*.js (não vai poluir seu projeto)
4. Eu o executo através de: cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js
5. Resultados exibidos em tempo real, janela do navegador visível para depuração
6. Arquivos de teste limpos automaticamente de /tmp pelo seu sistema operacional

Configuração (Primeira Vez)

cd $SKILL_DIR
npm run setup

Isso instala o Playwright e o navegador Chromium. Necessário apenas uma vez.

Padrão de Execução

Etapa 1: Detectar servidores de desenvolvimento (para testes em localhost)

cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"

Etapa 2: Escrever script de teste em /tmp com parâmetro de URL

// /tmp/playwright-test-page.js
const { chromium } = require('playwright');

// Parameterized URL (detected or user-provided)
const TARGET_URL = 'http://localhost:3001'; // <-- Auto-detected or from user

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto(TARGET_URL);
  console.log('Page loaded:', await page.title());

  await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });
  console.log('📸 Screenshot saved to /tmp/screenshot.png');

  await browser.close();
})();

Etapa 3: Executar a partir do diretório da skill

cd $SKILL_DIR && node run.js /tmp/playwright-test-page.js

Padrões Comuns

Testar uma Página (Múltiplos Viewports)

// /tmp/playwright-test-responsive.js
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3001'; // Auto-detected

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 100 });
  const page = await browser.newPage();

  // Desktop test
  await page.setViewportSize({ width: 1920, height: 1080 });
  await page.goto(TARGET_URL);
  console.log('Desktop - Title:', await page.title());
  await page.screenshot({ path: '/tmp/desktop.png', fullPage: true });

  // Mobile test
  await page.setViewportSize({ width: 375, height: 667 });
  await page.screenshot({ path: '/tmp/mobile.png', fullPage: true });

  await browser.close();
})();

Testar Fluxo de Login

// /tmp/playwright-test-login.js
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3001'; // Detectado automaticamente

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto(`${TARGET_URL}/login`);

  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');

  // Aguardar redirecionamento
  await page.waitForURL('**/dashboard');

…