[Question]Why is there a long gap in front of my recorded video?

Answer

Sure, you can start recording when your tests begin in Playwright. You just need to set the video recording mode to "on-first-retry" in your playwright.config.ts file. Here's how you do it:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    video: {
      mode: 'on-first-retry',
    },
  },
});

This way, Playwright will only start recording when a test is retried for the first time, skipping any uneventful seconds at the start.

Want to customize the size of your video? No problem. Just set the size property inside the video option. By default, it fits within 800x800 viewport dimensions. But you can change it like this:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    video: {
      mode: 'on-first-retry',
      size: { width: 640, height: 480 },
    },
  },
});

Remember, videos are saved when the browser context closes at the end of a test. So, don't forget to await browserContext.close() if you're creating a browser context manually.

For multi-page scenarios, you can access the video file associated with a page using page.video().path(). But keep in mind, the video is only available after the page or browser context is closed.

So, by tweaking your Playwright config, you can start recording when your tests actually begin and avoid any dead seconds at the start of your videos. Happy testing!