Qué es un test
Un test es un programa que usa tu web como si fuera una persona: entra, hace clic, completa formularios y comprueba que aparezca lo que tiene que aparecer. Si algo dejó de andar, te avisa con el paso exacto que falló. Escribirlos a mano lleva tiempo; con Playwright los grabás mientras usás la web.
Lo que necesitás
- Un proyecto web con Node.js (versión 22, 24 o 26).
- Windows 11 o posterior (o WSL), macOS 14 o posterior, o Linux (Debian 12/13, Ubuntu 22.04/24.04/26.04).
- Tu web corriendo, en tu compu (
localhost) o publicada.
1 · Instalar Playwright
En la carpeta de tu proyecto, corré uno de estos comandos:
| Si usás | Comando |
|---|---|
| npm | npm init playwright@latest |
| pnpm | pnpm create playwright |
| yarn | yarn create playwright |
Te hace cuatro preguntas; con Enter aceptás lo recomendado:
- TypeScript o JavaScript. Por defecto, TypeScript.
- Carpeta de los tests. Por defecto,
tests. - GitHub Actions. Si querés que los tests corran solos cada vez que subís cambios.
- Instalar los navegadores. Sí: baja Chromium, Firefox y WebKit.
2 · Grabar un test con codegen
- Abrí el grabador. Corré
npx playwright codegenseguido de la dirección de tu web, por ejemplonpx playwright codegen localhost:3000(con pnpm:pnpm exec playwright codegen localhost:3000). Se abren dos ventanas: un navegador y el Playwright Inspector. - Usá tu web como siempre. Cada clic y cada cosa que escribís aparece como una línea de código en el Inspector. Playwright elige cómo encontrar cada elemento priorizando su rol, su texto o su test id.
- Decile qué comprobar. En la barra de herramientas elegí una verificación y hacé clic en el elemento: assert visibility (que se vea), assert text (que tenga un texto) o assert value (que un campo tenga un valor).
- Copiá el test. Tocá Record para parar la grabación y el botón de copiar para llevarte el código. Pegalo en un archivo nuevo dentro de
tests, por ejemplotests/guia.spec.ts.
3 · Correr tus tests
| Comando | Para qué |
|---|---|
npx playwright test |
Corre todos los tests y te dice cuáles pasaron y cuáles fallaron. |
npx playwright test tests/guia.spec.ts |
Corre un solo archivo. |
npx playwright test --ui |
Abre una ventana para verlos paso a paso. |
npx playwright show-report |
Abre el reporte de la última corrida. |
Cuando un test falla, te muestra qué esperaba, qué encontró y en qué línea del test pasó. Correlos cada vez que cambies algo en tu web.
Extras de codegen
| Opción | Para qué |
|---|---|
--viewport-size="800,600" |
Grabar con la página de ese tamaño. |
--device="iPhone 13" |
Grabar como si fuera ese celular. |
--save-storage=auth.json y después --load-storage=auth.json |
Grabar con la sesión iniciada sin repetir el login. |
| Extensión de VS Code, botón Record new | Grabar desde el editor, sin la terminal. |
Si algo falla
- El test falla aunque la web anda. Abrí el test y fijate la línea marcada: a veces un clic de más quedó grabado. Podés borrar esa línea a mano.
- Una página tarda en cargar. Cada verificación espera sola hasta 5 segundos; si tu web es más lenta, subí el tiempo en
playwright.config.tsconexpect: { timeout: 10000 }. - Tu web usa el portapapeles. Dale permiso en
playwright.config.ts, dentro deuse:permissions: ['clipboard-read', 'clipboard-write'].