All topics·Advanced·22 / 24

Videos

Videos record everything that happened in the browser during a test — every click, navigation, and visual state change. I use retain-on-failure so videos only keep around when a test actually breaks. Combined with traces, they make debugging CI failures possible without reproducing locally.

Video recording modes

Four modes, each for a different need. Configure in use.video in playwright.config.ts.

ts

export default defineConfig({
  use: {
    // 'off'               — не записувати відео (за замовчуванням)
    // 'on'                — записувати для кожного тесту
    // 'retain-on-failure' — записувати, але видаляти відео успішних тестів
    // 'on-first-retry'    — записувати тільки при першому повторі падаючого тесту
    video: 'retain-on-failure',
  },
})

Where videos end up

After the test run, videos are in test-results/. Each failed test gets its own subfolder with the video alongside the trace and screenshots. In the HTML report (npx playwright show-report) you can play the video directly in the browser.

Video is saved when the browser context closes at the end of a test. If you create a context manually, you must await context.close() to flush the video file.

ts

// Якщо контекст створений вручну — закрити явно
const context = await browser.newContext()
const page = await context.newPage()

await page.goto('/orders')
// ... тест ...

// БЕЗ await context.close() — відео може не зберегтися
await context.close()

Video size and annotations

By default video resolution matches the viewport, scaled to fit 800×800. You can specify size explicitly. Playwright also supports annotating the video — highlighting actions with outlines and titles, useful for sharing recordings with non-technical stakeholders.

ts

export default defineConfig({
  use: {
    video: {
      mode: 'retain-on-failure',
      size: { width: 1280, height: 720 },

      // Показувати анотації дій у відео
      show: {
        actions: {
          duration: 500,        // мс, як довго підсвічувати кожну дію
          position: 'top-right',
          fontSize: 14,
        },
        // Показати назву тесту і крок у відео
        test: {
          level: 'step',
          position: 'top-left',
          fontSize: 12,
        },
      },
    },
  },
})

Access the video path in a test

If you need to attach the video to a report or send it somewhere, you can get the file path via page.video().path(). Note: this resolves only after the page closes.

ts

test('capture video path', async ({ page }) => {
  await page.goto('/orders')
  // ... тест ...

  // Отримати шлях після тесту (але до закриття context)
  const videoPath = await page.video()?.path()
  console.log('Video saved at:', videoPath)
})

Take the quiz