# Webapp Testing

> Toolkit para interactuar con y probar aplicaciones web locales con Playwright: verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar pantallas del navegador y ver sus logs.

Fuente: https://skillsagentes.com/skills/every-app/open-seo/webapp-testing
Markdown: https://skillsagentes.com/skills/every-app/open-seo/webapp-testing.md

Repositorio: https://github.com/every-app/open-seo
Autor: every-app
Licencia: Complete terms in LICENSE.txt
Actualizado: el mes pasado
Coste de contexto: 51 tok instalada, 985 tok al activarse, 5.6k tok con todos los archivos del bundle
Bundle: 6 archivos, 22 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add every-app/open-seo --skill webapp-testing --agent claude-code
# Cursor
npx -y skills add every-app/open-seo --skill webapp-testing --agent cursor
# Codex
npx -y skills add every-app/open-seo --skill webapp-testing --agent codex
# Gemini CLI
npx -y skills add every-app/open-seo --skill webapp-testing --agent gemini
# Windsurf
npx -y skills add every-app/open-seo --skill webapp-testing --agent windsurf
# Cline
npx -y skills add every-app/open-seo --skill webapp-testing --agent cline
```

## Qué hace

- Toolkit para interactuar con y probar aplicaciones web locales usando Playwright con scripts nativos de Python.
- Trae `scripts/with_server.py`, que gestiona el ciclo de vida de uno o varios servidores; se ejecuta siempre con `--help` primero y se usa como caja negra sin leer su fuente.
- Un árbol de decisión enruta: HTML estático se lee directo para sacar selectores; app dinámica sigue el patrón de reconocimiento y luego acción.
- El patrón clave: navegar y esperar `networkidle`, inspeccionar el DOM o hacer captura, identificar selectores del estado renderizado y ejecutar acciones con ellos.
- Lanza Chromium siempre en modo headless, usa selectores descriptivos (`text=`, `role=`, CSS, IDs) y cierra el navegador al terminar.

## Cuándo usarla

- Se quiere verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar pantallas del navegador o ver sus logs en una app web local.

## Qué la activa

- "Prueba que el formulario de login de mi app local funciona"
- "Captura una pantalla de esta página en localhost:5173"
- "Depura por qué este botón no responde en la UI"

## Antes de instalar

- Necesita Python con Playwright y Chromium; es una skill vendida desde `anthropics/skills` y fijada por hash en `skills-lock.json`.
- Necesita en el PATH: npm, python

## Archivos

- LICENSE.txt — 11 KB
- SKILL.md — 4 KB
- examples/console_logging.py — 1 KB
- examples/element_discovery.py — 1 KB
- examples/static_html_automation.py — 953 B
- scripts/with_server.py — 4 KB

## SKILL.md

Reproducido tal cual desde every-app/open-seo bajo Complete terms in LICENSE.txt. Esta sección es el documento original y está en inglés.

# Web Application Testing

To test local web applications, write native Python Playwright scripts.

**Helper Scripts Available**:
- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers)

**Always run scripts with `--help` first** to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.

## Decision Tree: Choosing Your Approach

```
User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Run: python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors
```

## Example: Using with_server.py

To start a server, run `--help` first, then use the helper:

**Single server:**
```bash
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
```

**Multiple servers (e.g., backend + frontend):**
```bash
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py
```

To create an automation script, include only Playwright logic (servers are managed automatically):
```python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server already running and ready
    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
    # ... your automation logic
    browser.close()
```

## Reconnaissance-Then-Action Pattern

1. **Inspect rendered DOM**:
   ```python
   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   ```

2. **Identify selectors** from inspection results

3. **Execute actions** using discovered selectors

## Common Pitfall

❌ **Don't** inspect the DOM before waiting for `networkidle` on dynamic apps
✅ **Do** wait for `page.wait_for_load_state('networkidle')` before inspection

## Best Practices

- **Use bundled scripts as black boxes** - To accomplish a task, consider whether one of the scripts available in `scripts/` can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use `--help` to see usage, then invoke directly. 
- Use `sync_playwright()` for synchronous scripts
- Always close the browser when done
- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs
- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`

## Reference Files

- **examples/** - Examples showing common patterns:
  - `element_discovery.py` - Discovering buttons, links, and inputs on a page
  - `static_html_automation.py` - Using file:// URLs for local HTML
  - `console_logging.py` - Capturing console logs during automation

## Dónde encaja

- Categoría: [Testing y QA](https://skillsagentes.com/categorias/testing-qa.md) — Flujos de testing unitario, de integración y end-to-end.
- Creador: [every-app](https://skillsagentes.com/creators/every-app.md) — 19 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Seo Coach](https://skillsagentes.com/skills/every-app/open-seo/seo-coach.md): Entra en un modo de coach de OpenSEO cercano que explica los flujos, recomienda los siguientes pasos y ayuda a usar bien agentes, búsqueda web, scraping y datos MCP.
- [Seo Audit](https://skillsagentes.com/skills/every-app/open-seo/seo-audit.md): Audita un sitio y entrega un informe SEO de una página, en lenguaje llano, que cualquiera puede accionar, centrado en una única acción para esta semana.
- [Create Repo Skill](https://skillsagentes.com/skills/every-app/open-seo/create-repo-skill.md): Crea o actualiza una skill en este repositorio de la forma correcta: hogar canónico en `.agents/skills`, marca interna o pública, symlinks en `.claude/skills` y registro en las docs públicas para las skills de producto.
- [Seo Project Setup](https://skillsagentes.com/skills/every-app/open-seo/seo-project-setup.md): Rellena el contexto compartido de OpenSEO de un proyecto (alcance del sitio, objetivos, posicionamiento, competidores, páginas clave y preferencias), más comprobaciones de MCP y entrada de Search Console.
- [Keyword Research](https://skillsagentes.com/skills/every-app/open-seo/keyword-research.md): Descubre oportunidades de palabras clave, evalúa métricas y SERPs y guarda o etiqueta los términos prometedores usando los datos MCP de OpenSEO.

## Skills relacionadas

- [Verify Local Mcp](https://skillsagentes.com/skills/every-app/open-seo/verify-local-mcp.md): Verifica el servidor MCP de OpenSEO de punta a punta en un dev server local: corrección a nivel de protocolo contra DataForSEO real, y luego un probe con agente headless que prueba la ergonomía de las herramientas.
- [Papercuts](https://skillsagentes.com/skills/every-app/open-seo/papercuts.md): Registra en `.agents/PAPERCUTS.md` la fricción real y recurrente del repositorio (setup confuso, comandos inestables, errores engañosos, archivos generados obsoletos) y también revisa, deduplica y resuelve las entradas existentes.
- [Keyword Research](https://skillsagentes.com/skills/every-app/open-seo/keyword-research.md): Descubre oportunidades de palabras clave, evalúa métricas y SERPs y guarda o etiqueta los términos prometedores usando los datos MCP de OpenSEO.
- [Openseo Release Notes](https://skillsagentes.com/skills/every-app/open-seo/openseo-release-notes.md): Corta una release de OpenSEO: sube la versión, redacta notas de versión para el usuario desde los commits del último tag, pasa una revisión con verificación por subagentes y abre un PR `release: vX.X.X`.
- [Simple Issue Description](https://skillsagentes.com/skills/every-app/open-seo/simple-issue-description.md): Convierte un reporte de bug tosco, una petición de feature, una nota de soporte o un PR en un issue corto y en lenguaje llano, centrado en el problema y el comportamiento deseado.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)