frontend-testing

name	frontend-testing
description	Testa aplicacoes web usando Playwright. Captura screenshots, executa E2E tests, analisa logs do browser. Integrado com qa-analyst para Phase 6. Use quando: testar frontend, capturar screenshots, validar UI, executar E2E.
allowed-tools	["Read","Write","Bash","Glob"]
user-invocable	true

Frontend Testing Skill

Proposito

Testa aplicacoes web locais e remotas usando Playwright:

• Screenshots: Captura visual para validacao
• E2E Tests: Testes end-to-end automatizados
• Browser Logs: Analise de erros e warnings
• Accessibility: Validacao basica de a11y

Principios de Design

1. Reconnaissance-Then-Action

Baseado no padrao do webapp-testing da Anthropic:

1. Navigate  → Ir para a pagina
2. Wait      → Aguardar network idle
3. Capture   → Screenshot ou DOM
4. Discover  → Identificar seletores do DOM renderizado
5. Interact  → Executar acoes com seletores descobertos

2. Server Lifecycle Management

Gerenciar servidor local automaticamente:

# Inicia servidor, executa teste, encerra servidor
python scripts/with_server.py --server "npm run dev" --port 3000 -- pytest tests/

3. Never Hardcode Selectors

Sempre descobrir seletores do DOM real, nunca assumir.

Comandos

/frontend-test {url}

Executa suite de testes E2E.

/frontend-test http://localhost:3000
/frontend-test https://staging.example.com

/frontend-screenshot {url} {nome}

Captura screenshot de uma pagina.

/frontend-screenshot http://localhost:3000 homepage
/frontend-screenshot http://localhost:3000/login login-page

Output: .agentic_sdlc/projects/{id}/screenshots/{nome}.png

/frontend-check {url}

Verifica saude basica da aplicacao.

/frontend-check http://localhost:3000

Verifica:

• Pagina carrega sem erros
• Console sem erros criticos
• Links nao quebrados
• Performance basica

Workflow de Testes

Setup com Servidor Local

# Single server
python scripts/with_server.py \
  --server "npm run dev" \
  --port 5173 \
  -- python scripts/run_tests.py

# Multiple servers (frontend + backend)
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python scripts/run_tests.py

Captura de Screenshot

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()

    page.goto("http://localhost:3000")
    page.wait_for_load_state("networkidle")

    page.screenshot(path="screenshot.png", full_page=True)
    browser.close()

Teste E2E Basico

def test_login_flow(page):
    page.goto("http://localhost:3000/login")
    page.wait_for_load_state("networkidle")

    # Descobrir seletores do DOM real
    page.fill('[data-testid="email"]', '[e-mail]')
    page.fill('[data-testid="password"]', 'password123')
    page.click('[data-testid="submit"]')

    # Verificar redirecionamento
    page.wait_for_url("**/dashboard")
    assert "dashboard" in page.url

Integracao com SDLC

Phase 6 (Quality) - qa-analyst

quality_gate:
  frontend_tests:
    required: true
    criteria:
      - "E2E tests passing"
      - "No console errors"
      - "Screenshots captured for review"

  commands:
    - "/frontend-test http://localhost:3000"
    - "/frontend-screenshot http://localhost:3000 homepage"

Phase 7 (Release) - Evidencias

release_artifacts:
  screenshots:
    - homepage.png
    - login-page.png
    - dashboard.png
  test_reports:
    - e2e-results.json

Dependencias

Obrigatorias

# Python
pip install playwright pytest-playwright

# Browser
playwright install chromium

Opcionais

# Para testes visuais
pip install pixelmatch pillow

# Para acessibilidade
pip install axe-playwright-python

Verificar Instalacao

python scripts/check_deps.py

Boas Praticas

1. Sempre Aguardar Network Idle

page.goto(url)
page.wait_for_load_state("networkidle")  # OBRIGATORIO

2. Usar data-testid

Preferir seletores data-testid sobre classes CSS:

<!-- BOM -->
<button data-testid="submit-btn">Submit</button>

<!-- EVITAR -->
<button class="btn btn-primary submit">Submit</button>

3. Capturar Logs do Browser

page.on("console", lambda msg: print(f"[{msg.type}] {msg.text}"))
page.on("pageerror", lambda err: print(f"[ERROR] {err}"))

4. Organizar Screenshots

.agentic_sdlc/projects/{id}/
└── screenshots/
    ├── before/           # Estado inicial
    ├── after/            # Apos mudancas
    └── regression/       # Comparacao visual

Anti-Patterns

NAO Fazer

# ❌ Hardcoded selectors sem verificar DOM
page.click("#submit-btn")

# ❌ Sleep ao inves de wait
import time
time.sleep(5)

# ❌ Ignorar erros de console
# (nao configurar handler)

Fazer

# ✅ Descobrir seletor do DOM
submit = page.locator('[data-testid="submit"]')
if submit.count() > 0:
    submit.click()

# ✅ Wait explicito
page.wait_for_selector('[data-testid="result"]')

# ✅ Capturar todos os logs
errors = []
page.on("pageerror", lambda e: errors.append(e))

Troubleshooting

"Browser nao instalado"

playwright install chromium
# Ou todos os browsers
playwright install

"Timeout ao carregar pagina"

Aumentar timeout:

page.goto(url, timeout=60000)  # 60 segundos

"Servidor nao iniciou"

Verificar porta:

lsof -i :3000
# Se ocupada, usar outra porta
python scripts/with_server.py --server "npm run dev" --port 3001 ...

"Screenshot em branco"

Aguardar conteudo:

page.wait_for_selector("main", state="visible")
page.screenshot(path="screenshot.png")

Referencias

• Playwright Python docs
• pytest-playwright
• Anthropic webapp-testing