Playwright capturas de pantalla y video
Este capítulo explica cómo usar Playwright para tomar capturas de pantalla y grabar videos, ayudándote a localizar rápidamente el problema cuando una prueba falla.
page.screenshot() Captura de pantalla
Captura de página completa
Ejemplo
// Guardar en archivo
await page.screenshot({ path: 'screenshots/ejemplo-homepage.png' });
// Obtener datos Buffer (usar directamente, sin escribir en archivo)
const buffer = await page.screenshot();
await page.screenshot({ path: 'screenshots/ejemplo-homepage.png' });
// Obtener datos Buffer (usar directamente, sin escribir en archivo)
const buffer = await page.screenshot();
Opciones de captura de pantalla
Ejemplo
await page.screenshot({
path: 'screenshots/full-page.png',
fullPage: true, // Capturar toda la página (no solo el viewport)
type: 'png', // Formato: 'png' (predeterminado) o 'jpeg'
quality: 90, // Calidad JPEG (0-100, solo JPEG)
clip: { // Área de recorte
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // Deshabilitar animaciones CSS (captura más estable)
omitBackground: false, // Si ocultar el fondo predeterminado
});
path: 'screenshots/full-page.png',
fullPage: true, // Capturar toda la página (no solo el viewport)
type: 'png', // Formato: 'png' (predeterminado) o 'jpeg'
quality: 90, // Calidad JPEG (0-100, solo JPEG)
clip: { // Área de recorte
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // Deshabilitar animaciones CSS (captura más estable)
omitBackground: false, // Si ocultar el fondo predeterminado
});
Captura de elemento
Ejemplo
// Tomar captura de un elemento específico
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Capturar el botón
await page.getByRole('button', { name: 'Enviar' }).screenshot({ path: 'btn.png' });
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Capturar el botón
await page.getByRole('button', { name: 'Enviar' }).screenshot({ path: 'btn.png' });
Configuración de captura automática
Configura la política de captura automática en el archivo de configuración, sin necesidad de invocarla manualmente en cada prueba:
Ejemplo
// Ruta del archivo: playwright.config.ts
export default defineConfig({
use: {
// Tomar captura automáticamente solo cuando la prueba falla
screenshot: 'only-on-failure',
// Valores opcionales:
// 'off' —— sin captura
// 'on' —— captura en cada prueba
// 'only-on-failure' —— solo capturar al fallar (recomendado)
},
});
export default defineConfig({
use: {
// Tomar captura automáticamente solo cuando la prueba falla
screenshot: 'only-on-failure',
// Valores opcionales:
// 'off' —— sin captura
// 'on' —— captura en cada prueba
// 'only-on-failure' —— solo capturar al fallar (recomendado)
},
});
Las capturas de fallos se guardan entest-results/el directorio, y se muestran en el informe HTML.
Grabación de video
Configurar la grabación de video
Ejemplo
// Ruta del archivo: playwright.config.ts
export default defineConfig({
use: {
// Conservar el video solo en caso de fallo
video: 'retain-on-failure',
// Valores opcionales:
// 'off' —— no grabar
// 'on' —— grabar siempre
// 'retain-on-failure' —— conservar al fallar, eliminar al pasar (recomendado)
// 'on-first-retry' —— grabar solo en el primer reintento
},
});
export default defineConfig({
use: {
// Conservar el video solo en caso de fallo
video: 'retain-on-failure',
// Valores opcionales:
// 'off' —— no grabar
// 'on' —— grabar siempre
// 'retain-on-failure' —— conservar al fallar, eliminar al pasar (recomendado)
// 'on-first-retry' —— grabar solo en el primer reintento
},
});
Control manual del video
Ejemplo
test('Guardar video manualmente', async ({ page }) => {
await page.goto('https://www.example.com/');
// Realizar acciones
await page.getByText('Tutorial EJEMPLO').click();
// Obtener el objeto de video
const video = page.video();
// Guardar el video en la ruta especificada
await video.saveAs('videos/ejemplo-test.mp4');
// O eliminar el video
// await video.delete();
});
await page.goto('https://www.example.com/');
// Realizar acciones
await page.getByText('Tutorial EJEMPLO').click();
// Obtener el objeto de video
const video = page.video();
// Guardar el video en la ruta especificada
await video.saveAs('videos/ejemplo-test.mp4');
// O eliminar el video
// await video.delete();
});
Opciones de grabación de video
Ejemplo
// Ruta del archivo: playwright.config.ts
export default defineConfig({
use: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Dimensiones del video
},
},
});
export default defineConfig({
use: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Dimensiones del video
},
},
});
Casos de uso de capturas de pantalla y videos
| Escenario | Solución recomendada |
|---|---|
| Conocer rápidamente el estado de la página cuando fallan las pruebas de CI | screenshot: 'only-on-failure' |
| Ver el proceso completo de ejecución de las pruebas | video: 'retain-on-failure' |
| Pruebas de regresión visual | expect(page).toHaveScreenshot() |
| Depurar pasos específicos | Llamada manualpage.screenshot() |
Otras extensionesLas capturas de pantalla y los videos aumentan el tiempo de ejecución de las pruebas y el uso de disco. Se recomienda usarlos únicamente en el entorno de producción
'only-on-failure'o'retain-on-failure', para evitar generar archivos multimedia en cada ejecución.