Por Que Capturar Evidencia Visual?

Cuando un test falla, la pregunta mas comun es “como se veia la pantalla cuando fallo?” Un stack trace te dice que asercion fallo, pero un screenshot muestra el estado real de la aplicacion en ese momento. La grabacion de video va mas alla — muestra toda la secuencia de eventos que llevaron a la falla.

Captura de Screenshots

Playwright 

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
  },
});

test('flujo de checkout', async ({ page }) => {
  await page.goto('/cart');
  await page.screenshot({ path: 'screenshots/cart.png' });
  await page.click('#checkout');
  await page.screenshot({ path: 'screenshots/checkout.png', fullPage: true });
});

Cypress 

module.exports = defineConfig({
  screenshotOnRunFailure: true,
  screenshotsFolder: 'cypress/screenshots',
});

cy.screenshot('pagina-carrito');
cy.get('.header').screenshot('componente-header');

Selenium 

File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshot, new File("screenshots/failure.png"));

Grabacion de Video

Playwright 

export default defineConfig({
  use: {
    video: 'retain-on-failure',
  },
});

Cypress 

module.exports = defineConfig({
  video: true,
  videoCompression: 32,
  videosFolder: 'cypress/videos',
});

Playwright Trace Viewer 

use: {
  trace: 'on-first-retry',
}
// npx playwright show-trace test-results/trace.zip

Integracion CI/CD

GitHub Actions Artifacts 

- name: Ejecutar tests de Playwright
  run: npx playwright test
  continue-on-error: true

- name: Subir artifacts de test
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: evidencia-test
    path: |
      test-results/
      playwright-report/
    retention-days: 30

Evidencia a Nivel de Paso 

test('flujo de compra completa', async ({ page }) => {
  await page.goto('/products');
  await page.screenshot({ path: 'evidence/01-pagina-productos.png' });

  await page.click('[data-testid="add-to-cart"]');
  await page.screenshot({ path: 'evidence/02-agregado-al-carrito.png' });

  await page.goto('/cart');
  await page.screenshot({ path: 'evidence/03-pagina-carrito.png' });

  await page.click('#checkout');
  await page.screenshot({ path: 'evidence/04-formulario-pago.png' });

  await page.click('#submit-payment');
  await expect(page.locator('.confirmation')).toBeVisible();
  await page.screenshot({ path: 'evidence/05-confirmacion.png' });
});

Mejores Practicas

  1. Siempre capturar en falla — requisito minimo
  2. Capturar pagina completa — screenshots parciales pierden contexto
  3. Nombres descriptivos — incluir nombre de test, paso y timestamp
  4. Politicas de retencion — 30 dias es tipico
  5. Comprimir videos — balance entre calidad y tamano
  6. Usar Playwright traces — proporcionan datos de depuracion mas ricos que solo video

Ejercicios

Ejercicio 1: Estrategia de Screenshots

Configura screenshots automaticos en falla y pasos clave. Ejecuta tests, revisa evidencia.

Ejercicio 2: Grabacion de Video

Habilita grabacion en Playwright o Cypress. Introduce falla deliberada y usa video para diagnosticar.

Ejercicio 3: Pipeline de Evidencia CI/CD

Configura pipeline CI para capturar screenshots, videos y traces. Sube como artifacts con retencion de 30 dias.