Pruebas Entre Navegadores con Playwright: Chrome, Firefox, Safari

Correr todos los tests contra Chromium, Firefox y WebKit en cada PR triplica el tiempo de CI sin una cobertura proporcional de bugs, porque la mayoría de los fallos no son específicos del navegador. Las diferencias que realmente importan entre motores son concretas: renderizado de inputs de fecha, casos límite de CSS flexbox, permisos de la API del portapapeles y comportamiento de la subida de archivos. Este artículo cubre cuándo es suficiente testear solo en Chromium, cómo configurar proyectos de navegador por niveles en playwright.config.ts, y cómo manejar la lógica específica de cada navegador cuando la necesitas.

Los tres proyectos de navegador

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Ejecutar todos los navegadores:

npx playwright test

Ejecutar un solo navegador:

npx playwright test --project=webkit

Chromium, Firefox y WebKit: qué es diferente

Qué falla realmente en el testing cross-browser

La mayoría de las aplicaciones web funciona igual en los tres motores. Las diferencias que importan:

Estrategia cross-browser: testing por niveles

Correr todos los tests en todos los navegadores triplica el tiempo de CI. El enfoque práctico es por niveles:

Nivel 1: cada PR (solo Chromium)

Suite de regresión completa, tests de funcionalidades y tests de API.

Nivel 2: merge a main (Chromium + Firefox + WebKit)

Smoke tests en todos los navegadores y tests en áreas con riesgo cross-browser conocido (inputs de fecha, subida de archivos, interacciones que dependen de CSS).

Nivel 3: ejecución nocturna (todos los navegadores, suite completa)

Regresión cross-browser completa.

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

const isCIFullRun = process.env.CROSS_BROWSER === 'true';

export default defineConfig({
  projects: [
    // Siempre ejecutar Chromium
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    // Solo ejecutar Firefox y WebKit en modo cross-browser
    ...(isCIFullRun ? [
      {
        name: 'firefox',
        use: { ...devices['Desktop Firefox'] },
      },
      {
        name: 'webkit',
        use: { ...devices['Desktop Safari'] },
      },
    ] : []),
  ],
});

# .github/workflows/tests.yml
- name: Ejecutar tests cross-browser
  if: github.event_name == 'schedule'  # Solo en la ejecución nocturna
  run: CROSS_BROWSER=true npx playwright test

Instalar los navegadores

Playwright descarga los binarios del navegador por separado. Para instalar los tres:

npx playwright install

Para instalar navegadores específicos:

npx playwright install chromium firefox webkit

En CI, usa la imagen Docker que incluye todos los navegadores:

- run: npx playwright install --with-deps

Manejar el comportamiento específico de cada navegador en los tests

Cuando un test necesita comportarse diferente según el navegador:

import { test, expect } from '@playwright/test';

test('comportamiento del input de fecha', async ({ page, browserName }) => {
  await page.goto('/reservar-turno');

  if (browserName === 'webkit') {
    // El selector de fecha nativo de WebKit requiere una interacción diferente
    await page.getByLabel('Fecha').fill('2026-06-15');
  } else {
    await page.getByLabel('Fecha').type('06/15/2026');
  }

  await expect(page.getByLabel('Fecha')).toHaveValue('2026-06-15');
});

Para saltear un test en un navegador específico:

test('usa la API del portapapeles', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'La API del portapapeles requiere permisos en Firefox');
  // ...
});

Navegador real vs emulación

Playwright corre contra motores de navegador reales, no entornos simulados. Los tests de WebKit corren contra el motor WebKit real (el mismo que impulsa Safari), no un simulador de Safari que imita Chrome.

Esto importa: los bugs cross-browser que encuentras en el proyecto WebKit de Playwright se reproducen en Safari real. No es 100% idéntico (Playwright usa una versión de WebKit ligeramente más nueva que la Safari publicada), pero es lo suficientemente cercano para detectar problemas reales.