Testing Headless

Que Es el Testing Headless? #

Un navegador headless es un navegador web que opera sin interfaz grafica. Tiene el motor de navegador completo pero no renderiza pixeles en pantalla. Cuando ejecutas tests en modo headless, el navegador realiza todas las mismas operaciones que un navegador visible, pero sin el overhead de pintar en un display.

El testing headless se volvio mainstream cuando Chrome introdujo el modo headless en 2017. Hoy, todos los navegadores principales soportan operacion headless.

Por Que Usar Modo Headless? #

Velocidad #

Sin renderizar pixeles, los navegadores headless se ejecutan mas rapido. Mejoras tipicas de 20-40%.

Entornos CI/CD #

La mayoria de servidores CI/CD no tienen display grafico. El modo headless permite ejecutar tests sin instalar un servidor de display virtual.

Eficiencia de Recursos #

Los navegadores headless usan menos memoria y CPU.

Configuracion del Modo Headless #

Playwright #

const browser = await chromium.launch(); // Headless por defecto
const browser = await chromium.launch({ headless: false }); // Headed para depuracion

Cypress #

npx cypress run          # Headless por defecto
npx cypress run --headed # Forzar headed
npx cypress open         # Interactivo/headed

Selenium #

ChromeOptions options = new ChromeOptions();
options.addArguments("--headless=new");
options.addArguments("--window-size=1920,1080");
WebDriver driver = new ChromeDriver(options);

Cuando Usar Headed vs Headless #

Limitaciones y Trampas #

Diferencias de Renderizado #

Los modos headless y headed pueden producir output visual diferente en casos extremos: renderizado de fuentes, animaciones CSS, manejo de viewport.

Extensiones del Navegador #

El modo headless tipicamente no carga extensiones del navegador.

Dialogos de Sistema #

Dialogos de descarga e impresion se comportan diferente en modo headless.

// Playwright — manejar descargas en headless
const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.click('#download-button')
]);

Dificultad de Depuracion #

Mitigaciones: screenshots en falla, grabacion de video, trace viewer de Playwright, cambiar a modo headed para reproducir.

use: {
  trace: 'on-first-retry',
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
}

Docker y Testing Headless #

FROM mcr.microsoft.com/playwright:v1.40.0-focal
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
CMD ["npx", "playwright", "test"]

Ejercicios #

Ejercicio 1: Configuracion Headless #

Configura suite para ambos modos, mide diferencia de tiempo, compara screenshots.

Ejercicio 2: Pipeline CI/CD #

Crea workflow de GitHub Actions headless con captura de screenshots y video en falla.

Ejercicio 3: Depuracion de Fallas Headless #

Crea test que pasa headed pero falla headless, diagnostica con trace viewer, corrige.