.png)
.svg){kind=icon}
Marzo 3, 2025
•
10
min leer
Navegador sin interfaz gráfica Playwright: herramienta de prueba rápida y confiable
George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
Dramaturgo es un marco de automatización de pruebas que simplifica las pruebas del navegador con una única API para Chromium, Firefoxy WebKitEs rápido, confiable y ampliamente adoptado, con más de 1.2 millones de descargas semanales.
npm init playwright@latest| 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.
Siga estos pasos para configurar Playwright en modo sin cabeza y comenzar con las pruebas.
Antes de comenzar, asegúrese de que su sistema cumpla con estos requisitos:
Para configurar Playwright rápidamente, ejecute:
npm init playwright@latest
Este comando inicializa Playwright y genera:
¿Prefieres la instalación manual? Utiliza los siguientes comandos:
npm i -D @playwright/test
npx playwright install
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
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:
npx playwright testnpx playwright test --project webkitnpx playwright test --project webkit --project firefoxCompatibilidad del navegador con Playwright:
| Navegador | Windows | macOS | Linux |
|---|---|---|---|
| Chromium | ✓ | ✓ | ✓ |
| 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.
Una vez que hayas configurado Playwright, aquí te mostramos cómo crear y ejecutar tu primera prueba.
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');
});
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 |
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.
Playwright se basa en las capacidades de prueba básicas al ofrecer herramientas que mejoran la confiabilidad y amplían los escenarios de prueba.
Playwright simplifica la prueba de contenido web dinámico con sus mecanismos de espera integrados y afirmaciones web-first. Garantiza que los elementos estén listos para la interacción, eliminando la necesidad de tiempos de espera manuales, que a menudo conducen a pruebas poco confiables.
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.
Playwright incluye un registro de dispositivos integrado para emular varios dispositivos. Esta función ayuda a probar distintos tamaños de pantalla y configuraciones de agente de usuario.
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' })
});
});
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 |
| Video | 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
Todos los artefactos grabados se almacenan en el test-results Directorio que ofrece información valiosa para la resolución de problemas. Los videos se guardan automáticamente cuando se cierra el contexto del navegador.
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.
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.
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:
Después de garantizar entornos limpios y aislados, el siguiente objetivo es gestionar fallas transitorias con estrategias de reintento.
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
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');
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.
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']
}
};
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.
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.
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.
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.
Algunos de los beneficios clave en términos de rendimiento incluyen:
| Aspecto de prueba | Comparación de rendimiento |
|---|---|
| Velocidad de raspado web | 56.21 segundos (sin cabeza) frente a 73.77 segundos (con cabeza) |
| El uso de recursos | Menor uso de CPU y memoria |
| Soporte del navegador | Chrome (64.16 %), Safari (19.62 %), Edge (4.87 %) |
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.
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".
Para comenzar a utilizar Playwright para pruebas sin interfaz gráfica:
npm init playwright@latest .example.spec.js).npx playwright test .Para una integración perfecta, conecte Playwright a su canalización de CI/CD utilizando herramientas como Jenkins or Acciones de GitHub 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.
El modo sin interfaz gráfica de Playwright destaca en entornos de alto rendimiento y en procesos de CI/CD, donde la respuesta rápida es crucial. Su capacidad para gestionar varias instancias del navegador de manera eficiente lo convierte en la mejor opción para operaciones de prueba a gran escala.
