Cómo hacer cross-browser testing con Playwright: guía práctica

Por /

Una de las ventajas más importantes de Playwright sobre otros frameworks es su soporte nativo para cross-browser testing — ejecutar exactamente los mismos tests en Chrome, Firefox y Safari sin configuración adicional. En este artículo te explico cómo hacerlo.

Qué es el cross-browser testing

El cross-browser testing es la práctica de ejecutar los mismos tests en diferentes navegadores para verificar que la aplicación funciona correctamente en todos ellos.

Es importante porque aunque los navegadores modernos siguen los mismos estándares web, cada uno tiene su propio motor de renderizado y sus propias particularidades. Un test que pasa en Chrome puede fallar en Safari por diferencias en cómo cada navegador interpreta el JavaScript o el CSS.

Los navegadores soportados por Playwright

Playwright soporta tres motores de navegador de forma nativa:

Chromium — el motor de Chrome y Edge. Es el navegador con mayor cuota de mercado y el más usado en desarrollo web.

Firefox — el motor de Mozilla Firefox. Importante para garantizar compatibilidad con los usuarios de Firefox.

WebKit — el motor de Safari. Crítico para usuarios de Apple en Mac y iPhone.

La gran ventaja de Playwright es que los tres vienen incluidos y se instalan con un solo comando — no hay que descargar drivers ni gestionar versiones.

Instalar los navegadores

Al instalar Playwright, los tres navegadores se descargan automáticamente con:

bash

playwright install

Si solo quieres instalar un navegador específico:

bash

playwright install chromium
playwright install firefox
playwright install webkit

Ejecutar tests en un navegador específico

Por defecto Playwright ejecuta los tests en Chromium. Para cambiar el navegador usa el parámetro --browser:

bash

# Solo Firefox
pytest tests/ --browser firefox

# Solo WebKit (Safari)
pytest tests/ --browser webkit

# Solo Chromium (por defecto)
pytest tests/ --browser chromium

Ejecutar tests en todos los navegadores a la vez

Para ejecutar los tests en los tres navegadores en una sola ejecución:

bash

pytest tests/ --browser chromium --browser firefox --browser webkit

Con este comando cada test se ejecuta tres veces — una por cada navegador. Si tienes 20 tests, se ejecutarán 60 tests en total.

Configurar cross-browser testing en pytest.ini

Para que el cross-browser testing sea el comportamiento por defecto sin tener que escribir los parámetros cada vez, configúralo en pytest.ini:

ini

[pytest]
addopts = --browser chromium --browser firefox --browser webkit

Cross-browser testing en GitHub Actions

Para ejecutar los tests en múltiples navegadores en CI/CD añade esto a tu workflow:

yaml

name: Cross-Browser Tests

on:
  push:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Instalar Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.11'
      
      - name: Instalar dependencias
        run: |
          pip install -r requirements.txt
          playwright install --with-deps ${{ matrix.browser }}
      
      - name: Ejecutar tests en ${{ matrix.browser }}
        run: pytest tests/ --browser ${{ matrix.browser }} -v

Con la estrategia matrix, GitHub Actions ejecuta los tres navegadores en paralelo — cada uno en su propio job — reduciendo el tiempo total de ejecución.

Qué probar en cross-browser testing

No todos los tests necesitan ejecutarse en todos los navegadores. La estrategia más eficiente es ejecutar los tests críticos — los del smoke test y los flujos más importantes — en todos los navegadores, y el resto solo en Chromium.

Esto reduce el tiempo de ejecución sin sacrificar la cobertura donde más importa.

Las diferencias más comunes entre navegadores

Los problemas más frecuentes en cross-browser testing son las diferencias en el manejo de fechas y formularios, el comportamiento de ciertos eventos de teclado, las animaciones CSS y las APIs de JavaScript que no están soportadas en todos los navegadores de la misma forma.

WebKit en particular — el motor de Safari — suele ser el más estricto y el que más diferencias muestra respecto a Chromium.

Si quieres saber más sobre Playwright puedes leer cómo usar locators en Playwright o cómo eliminar tests flaky.

Y si necesitas implementar cross-browser testing en tu proyecto puedes ver mis servicios en fatimaqa.com.

Scroll al inicio