playwright/docs/src/videos.md

id	title
videos	Videos

Playwright can record videos for all pages in a browser context. Videos are saved upon context closure, so make sure to await [method: 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 [method: 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. :::

API reference

• [BrowserContext]
• [method: Browser.newContext]
• [method: Browser.newPage]
• [method: BrowserContext.close]