Videos

Introduction

With copilotbrowser you can record videos for your tests.

Record video

copilotbrowser Test can record videos for your tests, controlled by the video option in your copilotbrowser config. By default videos are off.

• 'off' - Do not record video.
• 'on' - Record video for each test.
• 'retain-on-failure' - Record video for each test, but remove all videos from successful test runs.
• 'on-first-retry' - Record video only when retrying a test for the first time.

Video files will appear in the test output directory, typically test-results. See TestOptions.video for advanced video configuration.

Videos are saved upon browser context closure at the end of a test. If you create a browser context manually, make sure to await BrowserContext.close().

copilotbrowser.config.ts

import { defineConfig } from '@copilotbrowser/copilotbrowser/test';
export default defineConfig({
  use: {
    video: 'on-first-retry',
  },
});

const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });
// Make sure to await close, so that videos are saved.
await context.close();

You can also specify video size. The video size defaults to the viewport size scaled down to fit 800x800. The video of the viewport is placed in the top-left corner of the output video, scaled down to fit if necessary. You may need to set the viewport size to match your desired video size.

copilotbrowser.config.ts

import { defineConfig } from '@copilotbrowser/copilotbrowser/test';
export default defineConfig({
  use: {
    video: {
      mode: 'on-first-retry',
      size: { width: 640, height: 480 }
    }
  },
});

const context = await browser.newContext({
  recordVideo: {
    dir: 'videos/',
    size: { width: 640, height: 480 },
  }
});

For multi-page scenarios, you can access the video file associated with the page via the Page.video().

const path = await page.video().path();

note

Note that the video is only available after the page or browser context is closed.

Record video

Videos are saved upon browser context closure at the end of a test. If you create a browser context manually, make sure to await BrowserContext.close().

const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });
// Make sure to await close, so that videos are saved.
await context.close();

context = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("videos/")));
// Make sure to close, so that videos are saved.
context.close();

context = await browser.new_context(record_video_dir="videos/")
# Make sure to await close, so that videos are saved.
await context.close()

context = browser.new_context(record_video_dir="videos/")
# Make sure to close, so that videos are saved.
context.close()

var context = await browser.NewContextAsync(new()
{
    RecordVideoDir = "videos/"
});
// Make sure to close, so that videos are saved.
await context.CloseAsync();

You can also specify video size. The video size defaults to the viewport size scaled down to fit 800x800. The video of the viewport is placed in the top-left corner of the output video, scaled down to fit if necessary. You may need to set the viewport size to match your desired video size.

const context = await browser.newContext({
  recordVideo: {
    dir: 'videos/',
    size: { width: 640, height: 480 },
  }
});

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setRecordVideoDir(Paths.get("videos/"))
  .setRecordVideoSize(640, 480));

context = await browser.new_context(
    record_video_dir="videos/",
    record_video_size={"width": 640, "height": 480}
)

context = browser.new_context(
    record_video_dir="videos/",
    record_video_size={"width": 640, "height": 480}
)

var context = await browser.NewContextAsync(new()
{
    RecordVideoDir = "videos/",
    RecordVideoSize = new RecordVideoSize() { Width = 640, Height = 480 }
});
// Make sure to close, so that videos are saved.
await context.CloseAsync();

Saved video files will appear in the specified folder. They all have generated unique names. For the multi-page scenarios, you can access the video file associated with the page via the Page.video().

const path = await page.video().path();

path = page.video().path();

path = await page.video.path()

path = page.video.path()

var path = await page.Video.PathAsync();

note

Note that the video is only available after the page or browser context is closed.