Navegador sin interfaz gráfica Playwright: herramienta de prueba rápida y confiable

Tabla de contenidos.

Navegador sin interfaz gráfica Playwright: herramienta de prueba rápida y confiable

Dramaturgo es un marco de automatización de pruebas que simplifica las pruebas del navegador con una única API para Cromo, Firefox y WebKitEs rápido, confiable y ampliamente adoptado, con más de 1.2 millones de descargas semanales.

Beneficios claves:

Velocidad:El modo sin cabeza ejecuta pruebas 2x–15x más rápido que las pruebas tradicionales.
Eficiencia::Reduce el uso de CPU y memoria.
Soporte para múltiples navegadores: Funciona perfectamente con Cromo, Firefox y WebKit.
Integración CI/CD:Se integra fácilmente en los procesos de automatización.

Configuración rápida:

Instalar Playwright: npm init playwright@latest
Configurar para pruebas sin cabeza (modo predeterminado).
Ejecute pruebas en múltiples navegadores con comandos simples.

Feature	Pruebas tradicionales	Pruebas sin cabeza
Velocidad	Más lento	Hasta 15 veces más rápido
El uso de recursos	Alta	Más Bajo
Soporte del navegador	Limitada	Cromo, Firefox, WebKit

Con Playwright, puedes probar contenido dinámico de manera eficiente, manejar múltiples navegadores e incluso simular dispositivos y condiciones de red. ¿Listo para comenzar? Veamos cómo puedes configurarlo y crear tu primera prueba.

Dramaturgo Tutorial Curso Completo 2024

Dramaturgo

Comenzando con el dramaturgo

Siga estos pasos para configurar Playwright en modo sin cabeza y comenzar con las pruebas.

Pasos de la instalación

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

Node.js:v18, v20 o v22
Ventanas:10/Servidor 2016 o más reciente
macOS:13 Ventura o posterior
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
Ejemplos de scripts de prueba
Un flujo de trabajo de GitHub Action
Una plantilla de prueba básica

¿Prefieres la instalación manual? Utiliza los siguientes comandos:

npm i -D @playwright/test
npx playwright install

Configurar el modo sin cabeza

Playwright ejecuta las pruebas en modo sin interfaz gráfica 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 prueba en varios navegadores

Realizar pruebas en varios navegadores es sencillo con Playwright. Actualice su playwright.config.ts archivo como este:

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

Aquí se explica cómo ejecutar pruebas:

Todos los navegadores: npx playwright test
Navegador único: npx playwright test --project webkit
Múltiples navegadores: npx playwright test --project webkit --project firefox

Compatibilidad del navegador con Playwright:

Navegador	Ventanas	macOS	Linux
Cromo	✓	✓	✓
Firefox	✓	✓	✓
WebKit	✓	✓	✓

Cuando instala Playwright, este descarga automáticamente las versiones necesarias del navegador y las almacena localmente. Esto garantiza entornos de prueba consistentes en diferentes plataformas y máquinas.

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

Construyendo tu primera prueba

Una vez que hayas configurado Playwright, aquí te mostramos cómo crear y ejecutar tu primera prueba.

Ejemplo de script de prueba básico

Comience creando un archivo llamado first-test.spec.ts y agrega el siguiente código. Luego, ejecuta la prueba usando 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 de elementos

A continuación te indicamos cómo puedes interactuar con los 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');
});

A continuación se muestran algunos métodos de localización comunes que puede utilizar:

Tipo de localizador	Ejemplo	Caso de uso
Rol	getByRole('botón')	Para elementos accesibles
Etiqueta	getByLabel('Contraseña')	Para campos de formulario
Texto	getByText('Regístrate')	Para texto visible
Identificación de prueba	getByTestId('botón de envío')	Para atributos personalizados

Métodos de verificación de pruebas

Para garantizar que sus pruebas sean confiables, utilice afirmaciones 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, puedes 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 que todo comience desde cero en cada ocasión. Este aislamiento evita interferencias entre pruebas y, con el modo sin interfaz gráfica, permite que la ejecución sea rápida y eficiente.

sbb-itb-23997f1

Funciones de prueba avanzadas

Playwright se basa en las capacidades de prueba básicas al ofrecer herramientas que mejoran la confiabilidad y amplían los escenarios de prueba.

Prueba de contenido dinámico

Playwright simplifica las pruebas de contenido web dinámico con sus mecanismos de espera integrados y aserciones web-first. Garantiza que los elementos estén listos para la interacción, eliminando la necesidad de tiempos de espera manuales, que a menudo resultan en pruebas poco fiables. ^{[ 2 ]}.

A continuación te mostramos cómo puedes probar contenido dinámico de manera efectiva:

// 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 agregar 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 admite la emulación de dispositivos y la simulación del estado de la red.

Pruebas de dispositivos y redes

Playwright incluye un registro de dispositivos integrado para emular varios dispositivos. Esta función permite probar diferentes tamaños de pantalla y configuraciones de agente de usuario. ^{[ 5 ]}^{[ 6 ]}.

He aquí un ejemplo de emulación de dispositivo:

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 las condiciones de la red, puede utilizar controladores de ruta:

// 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 prueba

Playwright admite la grabación de artefactos como capturas de pantalla, videos y rastros para ayudar con la depuración. Estas opciones se pueden configurar en su playwright.config.js archivo:

Tipo de grabación	Configuration	Mejor caso de uso
Imágenes	`screenshot: 'only-on-failure'`	Capturar el estado visual durante las fallas de prueba
Vídeo	`video: 'retain-on-failure'`	Registrar la ejecución de pruebas para escenarios fallidos
Trace	`trace: 'on-first-retry'`	Generar registros detallados para depuración

A continuación te indicamos cómo habilitar estas funciones:

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

"El dramaturgo espera a que los elementos sean procesables antes de realizar acciones... elimina la necesidad de tiempos de espera artificiales, la causa principal de las pruebas inestables". - Documentación del dramaturgo ^{[ 2 ]}

Todos los artefactos grabados se almacenan en el test-results Directorio que ofrece información valiosa para la resolución de problemas. Los vídeos se guardan automáticamente al cerrar el navegador. ^{[ 7 ]}.

Optimización del rendimiento de las pruebas

Para mejorar el rendimiento de las pruebas en Playwright es necesario utilizar de forma inteligente la ejecución en paralelo, gestionar eficazmente el contexto del navegador y aplicar estrategias de reintento bien pensadas. Estos métodos ayudan a garantizar que las pruebas se ejecuten de forma eficiente 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 que lleva completar un conjunto de pruebas. Puede configurar la ejecución paralela en playwright.config.ts:

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

Dentro de un archivo de prueba, puedes habilitar la ejecución paralela de esta manera:

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 administrar los contextos del navegador de manera eficiente.

Gestión del contexto del navegador

El uso de contextos de navegador independientes garantiza entornos de prueba aislados, de forma similar al uso de perfiles de incógnito. Esto mantiene las pruebas independientes y evita conflictos de estados.

A continuación se muestra 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 de contexto de navegador comunes incluyen:

Nuevo contexto por prueba:Garantiza que cada prueba tenga su propio entorno aislado.
Contexto de autenticación compartida:Reduce los pasos de inicio de sesión repetidos al reutilizar los datos de autenticación.
Pruebas multiusuario:Simula interacciones de múltiples usuarios simultáneamente.

Después de garantizar entornos limpios y aislados, el siguiente objetivo es gestionar fallas transitorias con estrategias de reintento.

Estrategias de reintento de pruebas

Los reintentos pueden ayudar a solucionar problemas de pruebas inestables causados 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 las afirmaciones que pueden necesitar múltiples intentos, utilice el sondeo:

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

"Si bien los reintentos mejoran la confiabilidad de las pruebas, su uso excesivo puede ocultar problemas como tiempos de espera y condiciones de carrera. Es fundamental resolver las causas fundamentales de las pruebas estables, aplicando los reintentos de manera inteligente con restricciones y registrando datos para detectar 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');

Dramaturgo y Nodo tardío Integración:

Nodo tardío

La integración de Playwright con la plataforma de código reducido de Latenode simplifica las pruebas web y la automatización del flujo de trabajo. Esta combinación permite a los equipos crear pruebas avanzadas sin necesidad de conocimientos profundos de codificación.

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

Descripción general de Latenode

Latenode es una plataforma de código reducido diseñada para la integración y la automatización del flujo de trabajo, que aprovecha la tecnología de navegador sin interfaz gráfica. Su generador de flujo de trabajo visual facilita la creación y la gestión de configuraciones de pruebas automatizadas sin necesidad de escribir código complejo.

A continuación se muestra un ejemplo de cómo se puede configurar la automatización del 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

La combinación de Playwright con Latenode aporta varias ventajas técnicas:

Feature	Beneficio
Visual Workflow Builder	Simplifica la configuración en comparación con los métodos de codificación tradicionales.
Generación de código asistida por IA	Genera automáticamente guiones de prueba de Playwright
Integración de base de datos incorporada	Gestiona de forma eficiente los datos y resultados de las pruebas
Soporte para múltiples navegadores	Ejecuta pruebas en Chromium, Firefox y WebKit

Esta integración mejora los flujos de trabajo de pruebas y mejora los procesos de automatización.

Casos de uso de la automatización

Esta combinación admite una variedad de escenarios 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 dólares al mes) admite hasta 1.5 millones de ejecuciones de escenarios. Este plan es ideal para equipos que necesitan herramientas de colaboración avanzadas e informes detallados.

Además, las funciones de base de datos integradas de Latenode ayudan a los equipos a gestionar los datos y resultados de las pruebas 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 incluye un breve resumen de sus principales ventajas.

Ventajas clave

Las pruebas del navegador sin interfaz gráfica de Playwright mejoran significativamente el rendimiento al omitir tareas de renderización innecesarias. Las pruebas muestran que el modo sin interfaz gráfica puede ejecutarse 2x a 15x más rápido que las pruebas de navegador tradicionales ^{[ 3 ]}.

Algunos de los beneficios clave en términos de rendimiento incluyen:

Ejecución de pruebas más rápida
Consumo reducido de recursos
Eficiencia mejorada en los procesos de CI/CD

Aspecto de prueba	Comparación de rendimiento
Velocidad de raspado web	56.21 segundos (sin cabeza) frente a 73.77 segundos (con cabeza) ^{[ 1 ]}
El uso de recursos	Menor uso de CPU y memoria ^{[ 1 ]}
Soporte del navegador	Chrome (64.16 %), Safari (19.62 %), Edge (4.87 %) ^{[ 12 ]}

Estos beneficios, combinados con las estrategias de configuración y prueba analizadas anteriormente, hacen de Playwright una herramienta poderosa para una automatización escalable y eficiente.

Cómo Iniciar

El rendimiento y la escalabilidad de Playwright lo convierten en una excelente opción para los flujos de trabajo de pruebas modernos. Como explica el gerente de productos sénior de Microsoft, Arjun Attam:

"Las pruebas automatizadas de extremo a extremo se han vuelto más importantes que nunca. Los equipos están realizando entregas más rápidas y creando aplicaciones que se ejecutan en un conjunto cada vez mayor de dispositivos. Este aumento en la velocidad y los objetivos web ejerce una enorme presión sobre el proceso de prueba, y la automatización es fundamental". ^{[ 10 ]}

Para comenzar a utilizar Playwright para pruebas sin interfaz gráfica:

Instale Node.js y Playwright ejecutando npm init playwright@latest ^{[ 9 ]}.
Crea tu primer archivo de prueba (por ejemplo, example.spec.js).
Ejecutar las pruebas con npx playwright test ^{[ 4 ]}.

Para una integración perfecta, conecte Playwright a su canalización de CI/CD utilizando herramientas como Jenkins or Acciones de GitHub ^{[ 9 ]}Su API unificada permite realizar pruebas consistentes en Chrome, Firefox y WebKit sin necesidad de realizar cambios en el código específico del navegador. ^{[ 12 ]}.

El modo sin cabeza de Playwright brilla en entornos de alto rendimiento y canales de CI/CD, donde la respuesta rápida es crucial. ^{[ 11 ]}Su capacidad para gestionar múltiples instancias de navegador de manera eficiente lo convierte en la mejor opción para operaciones de pruebas a gran escala.