Primeros Pasos con Pruebas de UI en Playwright

Las pruebas de UI son una parte crítica del desarrollo frontend, asegurando que tus aplicaciones web funcionen correctamente desde la perspectiva del usuario. Playwright, el framework de automatización de código abierto de Microsoft, ha emergido como una herramienta poderosa para pruebas de UI que es tanto amigable para desarrolladores como robusta. Si has escuchado sobre Playwright pero aún no lo has probado, esta guía te mostrará cómo funciona y si encaja en tu flujo de trabajo actual.
Puntos Clave
- Playwright proporciona pruebas cross-browser con una sola API para Chrome, Firefox y Safari
- La espera automática y los entornos de prueba aislados reducen las pruebas inestables
- Herramientas de depuración integradas como Inspector y Trace Viewer simplifican la resolución de problemas
- Soporta pruebas de diseño responsivo, comparaciones visuales y pruebas de componentes
- Se integra fácilmente con pipelines de CI/CD para pruebas automatizadas
¿Qué es Playwright y Por Qué Usarlo para Pruebas de UI?
Playwright es un framework de pruebas end-to-end que te permite escribir pruebas que se ejecutan en todos los navegadores modernos (Chrome, Firefox, Safari) usando una sola API. A diferencia de otras herramientas de pruebas, Playwright fue específicamente diseñado para aplicaciones web modernas con características que hacen las pruebas de UI más confiables y menos inestables.
Las ventajas clave para pruebas de UI incluyen:
- Espera automática: Playwright automáticamente espera a que los elementos sean accionables antes de realizar operaciones
- Aislamiento: Cada prueba se ejecuta en un contexto de navegador fresco, previniendo interferencias entre pruebas
- Soporte cross-browser: Escribe una vez, prueba en todas partes con el mismo código
- Capacidades web modernas: Maneja Shadow DOM, iframes y componentes web modernos
- Herramientas poderosas: Herramientas de depuración integradas como Playwright Inspector y Trace Viewer
Configurando Playwright para Pruebas de UI
Comenzar con Playwright es sencillo. Necesitarás Node.js instalado, luego puedes configurar un nuevo proyecto:
# Create a new directory for your project
mkdir playwright-ui-testing
cd playwright-ui-testing
# Initialize a new Playwright project
npm init playwright@latest
Durante la configuración, se te harán algunas preguntas. Para pruebas de UI, puedes seleccionar TypeScript, agregar el flujo de trabajo de GitHub Actions e instalar navegadores cuando se te solicite.
La instalación crea una estructura básica de proyecto con:
playwright.config.ts
: Archivo de configuración para tus pruebas- Directorio
tests
: Donde vivirán tus archivos de prueba - Directorio
.github
: Configuración de CI si seleccionaste GitHub Actions
Escribiendo Tu Primera Prueba de UI
Escribamos una prueba de UI simple que verifique que una tarjeta de producto aparece correctamente en un sitio de e-commerce. Crea un nuevo archivo llamado product-ui.spec.ts
en el directorio tests
:
import { test, expect } from '@playwright/test';
test('product card displays correctly', async ({ page }) => {
// Navigate to the page
await page.goto('https://demo-store.playwright.dev');
// Find a product card
const productCard = page.locator('.product-card').first();
// Verify the product card is visible
await expect(productCard).toBeVisible();
// Verify it contains expected elements
await expect(productCard.locator('.product-title')).toBeVisible();
await expect(productCard.locator('.product-price')).toBeVisible();
await expect(productCard.locator('button.add-to-cart')).toBeEnabled();
// Extract and verify product information
const title = await productCard.locator('.product-title').textContent();
console.log(`Found product: ${title}`);
});
Esta prueba:
- Abre un sitio web de tienda demo
- Localiza una tarjeta de producto
- Verifica que los elementos clave sean visibles y estén habilitados
- Extrae el título del producto (mostrando cómo puedes extraer información)
Ejecutando Pruebas de UI
Para ejecutar tu prueba, usa la CLI de Playwright:
npx playwright test product-ui.spec.ts
Por defecto, Playwright ejecuta pruebas en modo headless. Para ver el navegador en acción:
npx playwright test product-ui.spec.ts --headed
Para ejecutar pruebas en un navegador específico:
npx playwright test product-ui.spec.ts --project=chromium
Pruebas de UI Avanzadas con Playwright
Probando Diseños Responsivos
Playwright facilita probar tu UI en diferentes tamaños de pantalla:
test('product card is responsive', async ({ page }) => {
// Test on mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('https://demo-store.playwright.dev');
// Verify mobile layout
await expect(page.locator('.mobile-menu-button')).toBeVisible();
// Test on desktop viewport
await page.setViewportSize({ width: 1280, height: 800 });
// Verify desktop layout
await expect(page.locator('.desktop-navigation')).toBeVisible();
});
Pruebas Visuales
Playwright soporta comparaciones visuales para detectar cambios inesperados en la UI:
test('product page visual test', async ({ page }) => {
await page.goto('https://demo-store.playwright.dev/product/1');
// Compare screenshot with baseline
await expect(page).toHaveScreenshot('product-page.png');
});
La primera vez que ejecutes esta prueba, crea una captura de pantalla base. En ejecuciones posteriores, compara el estado actual con la línea base.
Probando Elementos de UI Dinámicos
Las aplicaciones web modernas a menudo tienen elementos de UI dinámicos. Playwright los maneja bien:
test('add product to cart updates counter', async ({ page }) => {
await page.goto('https://demo-store.playwright.dev');
// Get initial cart count
const cartCount = page.locator('.cart-count');
await expect(cartCount).toHaveText('0');
// Add product to cart
await page.locator('.product-card button.add-to-cart').first().click();
// Verify cart count updates
await expect(cartCount).toHaveText('1');
});
Depurando Pruebas de UI
Cuando las pruebas fallan, Playwright ofrece herramientas de depuración poderosas:
Playwright Inspector
Lanza el inspector visual para depurar tus pruebas:
PWDEBUG=1 npx playwright test product-ui.spec.ts
El inspector te permite:
- Avanzar paso a paso en la ejecución de la prueba
- Inspeccionar el DOM
- Ver logs de consola
- Explorar solicitudes de red
Trace Viewer
Los traces registran información detallada sobre la ejecución de pruebas:
// In your playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry', // Record traces on first retry of failed tests
},
});
Después de que una prueba falle, visualiza el trace:
npx playwright show-trace test-results/product-ui-test-chromium/trace.zip
El visor de traces muestra:
- Capturas de pantalla en cada paso
- Snapshots del DOM
- Actividad de red
- Logs de consola
Integrando Pruebas de UI de Playwright en Tu Flujo de Trabajo
Ejecutando Pruebas en CI
Playwright funciona bien con sistemas de CI. Para GitHub Actions, el asistente de configuración crea un archivo de flujo de trabajo que ejecuta tus pruebas en push y pull requests.
Para otros sistemas de CI, puedes usar la imagen Docker de Playwright:
# Example for GitLab CI
test:
image: mcr.microsoft.com/playwright:v1.40.0-focal
script:
- npm ci
- npx playwright test
artifacts:
when: always
paths:
- playwright-report/
expire_in: 1 week
Pruebas de Componentes
Más allá de las pruebas a nivel de página, Playwright también soporta pruebas de componentes para frameworks como React, Vue y Svelte:
// Example for React component testing
import { test, expect } from '@playwright/experimental-ct-react';
import ProductCard from '../components/ProductCard';
test('ProductCard renders correctly', async ({ mount }) => {
const component = await mount(
<ProductCard
title="Test Product"
price="$19.99"
image="/test-image.jpg"
/>
);
await expect(component).toContainText('Test Product');
await expect(component).toContainText('$19.99');
await expect(component.locator('button')).toBeEnabled();
});
Preguntas Frecuentes
Playwright ofrece soporte cross-browser desde el inicio y maneja múltiples pestañas y ventanas, con lo que Cypress tiene dificultades. Playwright también tiende a tener menos limitaciones al probar entre dominios. Sin embargo, Cypress tiene un ecosistema más maduro y una interfaz de ejecutor de pruebas más amigable para el usuario.
No. Playwright está diseñado para pruebas end-to-end y de integración. Las pruebas unitarias con frameworks como Jest siguen siendo valiosas para probar funciones individuales y componentes de forma aislada.
Playwright te permite almacenar el estado de autenticación y reutilizarlo en todas las pruebas. Primero, lanza un navegador, navega a la página de login y realiza los pasos de inicio de sesión llenando los campos de usuario y contraseña y enviando el formulario. Una vez autenticado, guarda el estado de almacenamiento del navegador en un archivo, que contiene los datos de autenticación. En tus pruebas reales, puedes configurar Playwright para usar este estado de autenticación almacenado para que no necesites iniciar sesión antes de cada prueba. Este enfoque acelera la ejecución de tus pruebas y asegura consistencia entre sesiones.
Sí, Playwright tiene capacidades integradas de comparación de capturas de pantalla. Para pruebas visuales más avanzadas, puedes integrarlo con herramientas especializadas como Percy o Applitools.
Puedes acelerar tus pruebas de UI de Playwright ejecutándolas en paralelo, lo cual está habilitado por defecto. Durante el desarrollo, usa la bandera --project para ejecutar pruebas solo en navegadores específicos. Reutilizar el estado de autenticación en lugar de iniciar sesión durante cada prueba también reduce el tiempo de ejecución. Adicionalmente, usar pruebas de componentes proporciona retroalimentación más rápida para componentes individuales de UI.
Conclusión
Al incorporar Playwright en tu estrategia de pruebas, puedes construir aplicaciones frontend más confiables con la confianza de que tu UI funciona correctamente en navegadores y dispositivos. Sus mecanismos de espera automática, características de aislamiento y herramientas de depuración poderosas abordan muchos puntos problemáticos comunes en las pruebas de UI. Ya sea que estés probando diseños responsivos, apariencia visual o interacciones dinámicas, Playwright proporciona una solución integral que se integra perfectamente con flujos de trabajo de desarrollo modernos.