Navegador headless de Playwright: herramienta de pruebas rápida y fiable

Playwright es un framework de automatización de pruebas que simplifica las pruebas de navegadores con una única API para Chromium, Firefox y WebKit. Es rápido, fiable y ampliamente adoptado, con más de 1,2 millones de descargas semanales.

Principales ventajas:

• Velocidad: El modo headless ejecuta pruebas de 2 a 15 veces más rápido que las pruebas tradicionales.
• Eficiencia: Reduce el uso de CPU y memoria.
• Compatibilidad multidispositivo: Funciona sin problemas con Chromium, Firefox y WebKit.
• Integración con CI/CD: Se integra fácilmente en pipelines de automatización.

Configuración rápida:

1. Instale Playwright: npm init playwright@latest
2. Configure las pruebas headless (modo predeterminado).
3. Ejecute pruebas en varios navegadores con comandos sencillos.

Con Playwright, puede probar contenido dinámico de forma eficiente, gestionar varios navegadores e incluso simular dispositivos y condiciones de red. ¿Listo para empezar? Veamos cómo puede configurarlo y crear su primera prueba.

Curso completo de Playwright 2024

Primeros pasos con Playwright

Siga estos pasos para configurar Playwright en modo headless y comenzar a realizar pruebas.

Pasos de instalación

Antes de empezar, asegúrese de que su sistema cumpla estos requisitos:

• Node.js: v18, v20 o v22
• Windows: 10/Server 2016 o versiones posteriores
• macOS: 13 Ventura o versiones posteriores
• Linux: Debian 12, Ubuntu 22.04 o Ubuntu 24.04 (x86-64/arm64)

Para configurar Playwright rápidamente, ejecute:

npm init playwright@latest

Este comando inicializa Playwright y genera:

• Un archivo de configuración
• Scripts de prueba de ejemplo
• Un flujo de GitHub Action
• Una plantilla básica de prueba

¿Prefiere una instalación manual? Utilice los siguientes comandos:

npm i -D @playwright/test
npx playwright install

Configuración del modo headless

Playwright ejecuta las pruebas en modo headless de forma predeterminada y muestra los resultados directamente en la terminal. Para mantener todo actualizado, utilice:

npm install -D @playwright/test@latest
npx playwright install --with-deps

Configuración de pruebas en varios navegadores

Probar en varios navegadores es sencillo con Playwright. Actualice su archivo playwright.config.ts de la siguiente manera:

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'] } },
  ],
});

Así puede ejecutar las pruebas:

• Todos los navegadores: npx playwright test
• Un solo navegador: npx playwright test --project webkit
• Varios navegadores: npx playwright test --project webkit --project firefox

Compatibilidad de navegadores con Playwright:

Al instalar Playwright, este descarga automáticamente las versiones de navegador necesarias y las almacena de forma local. Esto garantiza entornos de prueba coherentes entre distintas plataformas y equipos.

Ahora que Playwright está configurado, está listo para crear su primera prueba.

Creación de su primera prueba

Una vez que haya configurado Playwright, así puede crear y ejecutar su primera prueba.

Ejemplo de script de prueba básico

Comience creando un archivo llamado first-test.spec.ts y agregue el siguiente código. A continuación, ejecute la prueba con el comando npx playwright test first-test.spec.ts:

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

test('basic navigation test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const title = await page.title();
  await expect(title).toBe('Playwright');
});

Guía de interacción con elementos

Así puede interactuar con elementos en Playwright:

test('element interactions', async ({ page }) => {
  // Fill out a text field
  await page.getByRole('textbox').fill('[email protected]');

  // Click a button
  await page.getByRole('button', { name: 'Submit' }).click();

  // Check a checkbox
  await page.getByLabel('Remember me').check();

  // Select an option from a dropdown
  await page.getByLabel('Country').selectOption('United States');
});

Estos son algunos métodos de localización habituales que puede utilizar:

Métodos de verificación de pruebas

Para garantizar que sus pruebas sean fiables, utilice aserciones para comprobar los resultados:

test('verification examples', async ({ page }) => {
  // Check if an element is visible
  await expect(page.getByRole('heading')).toBeVisible();

  // Verify the text content of an element
  await expect(page.getByTestId('status')).toHaveText('Success');

  // Confirm the URL after navigation
  await expect(page).toHaveURL(/.*dashboard/);

  // Ensure a button is enabled
  await expect(page.getByRole('button')).toBeEnabled();
});

Para depurar, puede ejecutar Playwright en modo UI con este comando:

npx playwright test --ui

Playwright ejecuta cada prueba en un contexto de navegador independiente, lo que garantiza un entorno limpio en cada ocasión. Este aislamiento evita interferencias entre pruebas y, junto con el modo headless, mantiene una ejecución rápida y eficiente.

sbb-itb-23997f1

Funciones avanzadas de prueba

Playwright amplía las capacidades básicas de prueba al ofrecer herramientas que mejoran la fiabilidad y amplían los casos de prueba.

Pruebas de contenido dinámico

Playwright simplifica las pruebas de contenido web dinámico mediante sus mecanismos de espera integrados y aserciones centradas en la web. Garantiza que los elementos estén listos para la interacción, eliminando la necesidad de tiempos de espera manuales, que suelen generar pruebas poco fiables [2].

Así puede probar contenido dinámico de forma eficaz:

// Wait for API response before proceeding
await page.waitForResponse(response => 
  response.url().includes('/api/data') && 
  response.status() === 200
);

// Wait for dynamic content updates
await page.waitForFunction(() => {
  const element = document.querySelector('.dynamic-content');
  return element && element.textContent.includes('Updated');
});

Para situaciones con problemas de red intermitentes, puede añadir mecanismos de reintento:

// Retry mechanism for flaky elements
const retryOptions = {
  timeout: 30000,
  intervals: [1000, 2000, 5000]
};

await page.waitForSelector('.loading-content', retryOptions);

A continuación, veamos cómo Playwright permite emular dispositivos y simular condiciones de red.

Pruebas de dispositivos y red

Playwright incluye un registro de dispositivos integrado para emular distintos dispositivos. Esta función ayuda a probar diferentes tamaños de pantalla y configuraciones de user-agent [5][6].

Este es un ejemplo de emulación de dispositivos:

const iPhone = playwright.devices['iPhone 13'];
const context = await browser.newContext({
  ...iPhone,
  locale: 'en-US',
  geolocation: { longitude: -122.084, latitude: 37.422 },
  permissions: ['geolocation']
});

Para probar condiciones de red, puede utilizar controladores de rutas:

// Simulate slow network conditions
await page.route('**/*.{jpg,png,jpeg}', route => {
  return new Promise(resolve => {
    setTimeout(() => {
      route.continue();
    }, 5000); // 5-second delay
  });
});

// Mock API responses
await page.route('/api/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ status: 'success' })
  });
});

Opciones de grabación de pruebas

Playwright permite grabar artefactos como capturas de pantalla, vídeos y trazas para facilitar la depuración. Puede configurar estas opciones en su archivo playwright.config.js:

Así puede habilitar estas funciones:

// playwright.config.js
module.exports = {
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry'
  }
};

"Playwright espera a que los elementos sean accionables antes de realizar acciones... elimina la necesidad de tiempos de espera artificiales, la principal causa de las pruebas inestables." - Documentación de Playwright [2]

Todos los artefactos grabados se almacenan en el directorio test-results y proporcionan información valiosa para solucionar problemas. Los vídeos se guardan automáticamente cuando se cierra el contexto del navegador [7].

Optimización del rendimiento de las pruebas

Mejorar el rendimiento de las pruebas en Playwright implica usar de forma inteligente la ejecución en paralelo, gestionar eficazmente los contextos de navegador y aplicar estrategias de reintento bien diseñadas. Estos métodos ayudan a que las pruebas se ejecuten eficientemente sin comprometer la fiabilidad.

Ejecución de pruebas en paralelo

Playwright le permite ejecutar pruebas en varios procesos de trabajo, lo que puede reducir significativamente el tiempo necesario para completar un conjunto de pruebas. Puede configurar la ejecución en paralelo en playwright.config.ts:

export default {
  fullyParallel: true,
  workers: 4,
  maxFailures: 5
};

Dentro de un archivo de prueba, puede habilitar la ejecución en paralelo de este modo:

test.describe.configure({ mode: 'parallel' });

test.describe('User Authentication', () => {
  test('login flow', async ({ page }) => {
    // Test implementation
  });

  test('registration flow', async ({ page }) => {
    // Test implementation
  });
});

Para evitar conflictos de datos entre trabajadores, utilice identificadores únicos:

const testId = `user_${process.env.TEST_WORKER_INDEX}_${Date.now()}`;
const userEmail = `test_${testId}@example.com`;

Una vez configurada la paralelización, el siguiente paso es gestionar los contextos de navegador de forma eficiente.

Gestión de contextos de navegador

El uso de contextos de navegador independientes garantiza entornos de prueba aislados, similares a usar perfiles de incógnito. Esto mantiene las pruebas independientes y evita conflictos de estado.

Este es un ejemplo de creación y uso de un contexto de navegador:

const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  userAgent: 'Playwright/1.32.0',
  storageState: './auth.json'
});

await test.step('Verify dashboard', async () => {
  const page = await context.newPage();
  await page.goto('https://app.example.com/dashboard');
  // Test implementation
});

await context.close();

Algunas estrategias habituales de contexto de navegador incluyen:

• Nuevo contexto por prueba: Garantiza que cada prueba tenga su propio entorno aislado.
• Contexto de autenticación compartido: Reduce los pasos de inicio de sesión repetidos al reutilizar datos de autenticación.
• Pruebas multiusuario: Simula interacciones de varios usuarios al mismo tiempo.

Después de garantizar entornos limpios y aislados, el siguiente objetivo es gestionar los fallos transitorios con estrategias de reintento.

Estrategias de reintento de pruebas

Los reintentos pueden ayudar a gestionar pruebas inestables causadas por problemas de sincronización o inestabilidad del entorno. Puede configurar los reintentos en el archivo de configuración de Playwright:

export default {
  retries: process.env.CI ? 2 : 0,
  expect: {
    timeout: 10000,
    toPass: { intervals: [1000, 2000, 5000] }
  }
};

Para aserciones que podrían requerir varios intentos, utilice sondeo:

await expect
  .poll(async () => {
    const element = page.locator('.dynamic-content');
    return await element.textContent();
  }, {
    intervals: [1000, 2000, 10000],
    timeout: 60000
  })
  .toBe('Expected Value');

"Aunque los reintentos mejoran la fiabilidad de las pruebas, su uso excesivo puede ocultar problemas como tiempos de espera y condiciones de carrera. Es fundamental resolver las causas raíz para lograr pruebas estables, aplicando reintentos con prudencia, restricciones y datos de registro para los patrones inestables." – Cerosh Jacob [8]

Para asegurarse de que la página esté completamente cargada antes de ejecutar sus pruebas:

await page.waitForLoadState('networkidle', { timeout: 5000 });
await page.waitForSelector('.content-ready');

Integración de Playwright y Latenode

La integración de Playwright con la plataforma low-code de Latenode simplifica las pruebas web y la automatización de flujos. Esta combinación permite a los equipos crear pruebas avanzadas sin necesidad de amplios conocimientos de programación.

Latenode complementa la funcionalidad de Playwright al extender la automatización a requisitos de flujo más amplios.

Descripción general de Latenode

Latenode es una plataforma low-code diseñada para la integración y automatización de flujos, que aprovecha la tecnología de navegador headless. Su creador visual de flujos facilita crear y gestionar configuraciones de pruebas automatizadas sin escribir código complejo.

Este es un ejemplo de cómo puede configurarse la automatización de navegador de Latenode:

// Example of a Latenode workflow configuration
const workflowConfig = {
  browserAutomation: {
    viewport: { width: 1920, height: 1080 },
    headless: true,
    scenarios: ['login', 'data-extraction', 'form-submission']
  }
};

Ventajas de la integración

Combinar Playwright con Latenode aporta varias ventajas técnicas:

Esta integración mejora los flujos de prueba y optimiza los procesos de automatización.

Casos de uso de automatización

Esta combinación admite una variedad de casos prácticos de automatización. Por ejemplo:

// Example of a multi-browser test workflow
async function crossPlatformTest() {
  const workflow = await latenode.createWorkflow({
    name: 'E2E Testing Suite',
    browser: playwright.chromium,
    integrations: ['slack', 'jira']
  });

  await workflow.addStep({
    type: 'ui-test',
    script: async ({ page }) => {
      await page.goto('https://app.example.com');
      await page.fill('#username', process.env.TEST_USER);
      await page.click('#submit');
    }
  });
}

Para pruebas a gran escala, el plan Prime de Latenode ($297/mes) admite hasta 1,5 millones de ejecuciones de flujos. Este plan es ideal para equipos que necesitan herramientas avanzadas de colaboración e informes detallados.

Además, las funciones de base de datos integradas de Latenode ayudan a los equipos a gestionar datos y resultados de prueba sin infraestructura adicional. Los informes y análisis automatizados facilitan la identificación de tendencias y el perfeccionamiento eficaz de las estrategias de prueba.

Conclusión

Playwright ofrece una variedad de funciones avanzadas y mejoras de rendimiento que lo convierten en una opción destacada para las pruebas automatizadas. A continuación se presenta un resumen de sus principales ventajas.

Ventajas principales

Las pruebas de navegador headless de Playwright mejoran significativamente el rendimiento al omitir tareas de renderizado innecesarias. Las pruebas demuestran que el modo headless puede ejecutarse de 2 a 15 veces más rápido que las pruebas tradicionales de navegador [3].

Algunos de los principales beneficios de rendimiento incluyen:

• Ejecución de pruebas más rápida
• Menor consumo de recursos
• Mayor eficiencia en pipelines de CI/CD

Estas ventajas, combinadas con las estrategias de configuración y pruebas analizadas anteriormente, convierten a Playwright en una herramienta potente para una automatización escalable y eficiente.

Cómo empezar

El rendimiento y la escalabilidad de Playwright lo convierten en una excelente opción para los flujos de prueba modernos. Como explica Arjun Attam, Senior Product Manager de Microsoft:

"Las pruebas automatizadas de extremo a extremo se han vuelto más importantes que nunca. Los equipos lanzan productos más rápido y desarrollan aplicaciones que se ejecutan en un conjunto creciente de dispositivos. Este aumento de la velocidad y de los objetivos web ejerce una enorme presión sobre el proceso de pruebas, y la automatización es fundamental." [10]

Para comenzar a utilizar Playwright en pruebas headless:

1. Instale Node.js y Playwright ejecutando npm init playwright@latest [9].
2. Cree su primer archivo de prueba, por ejemplo, example.spec.js.
3. Ejecute las pruebas con npx playwright test [4].

Para una integración fluida, conecte Playwright a su pipeline de CI/CD con herramientas como Jenkins o GitHub Actions [9]. Su API unificada permite realizar pruebas coherentes en Chrome, Firefox y WebKit sin necesidad de cambios de código específicos para cada navegador [12].

El modo headless de Playwright destaca en entornos de alto rendimiento y pipelines de CI/CD, donde una respuesta rápida es crucial [11]. Su capacidad para gestionar eficientemente varias instancias de navegador lo convierte en una de las mejores opciones para operaciones de prueba a gran escala.