Frames and Files

Videos in Playwright

Videos in Playwright: definition, recording setup, CI debugging usage, mistakes, interview notes, and practice.

Definition and Brief Explanation

Definition: Videos in Playwright record browser execution for a test when video capture is enabled in configuration or context options.

Explanation: Videos help explain how a failed test reached its final state. They are especially useful for CI failures where you cannot watch the browser live.

Why It Matters

  • It shows the full sequence that led to a failure.
  • It helps debug CI failures that cannot be watched live.
  • It is useful for timing, animation, navigation, and unexpected overlay issues.
  • It provides evidence that screenshots alone may miss.

How It Works

  1. Enable video in Playwright config or browser context options.
  2. Run the test normally.
  3. Review the video from test artifacts after failure or completion.
  4. Use the video with trace and report details to identify the root cause.

Syntax and Examples

Example 1: Video on failure

use: { video: 'retain-on-failure' }

Explanation: Keeps video only for failed tests to reduce storage size.

Common Mistakes

  • Recording every test forever and creating huge artifacts.
  • Using video instead of reading the error and trace.
  • Forgetting to upload videos in CI.
  • Assuming video alone explains network or console failures.

Interview Notes

  1. How do you enable video recording?
  2. When is video more useful than a screenshot?
  3. Why can video artifacts become expensive?
  4. How do you use video with trace viewer?

Practice Task

Enable video for a small failing test, run it, and explain what the video shows that the final screenshot does not.

☰