视频

介绍

🌐 Introduction

使用 Playwright，你可以录制视频以供测试。

🌐 With Playwright you can record videos for your tests.

录视频

🌐 Record video

Playwright Test 可以为你的测试录制视频，通过 Playwright 配置中的 video 选项控制。默认情况下视频是关闭的。

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

'off' - 不要录制视频。
'on' - 为每次测试录制视频。
'retain-on-failure' - 为每个测试录制视频，但从成功的测试运行中删除所有视频。
'on-first-retry' - 仅在第一次重试测试时录制视频。

视频文件将出现在测试输出目录中，通常是 test-results。有关高级视频配置，请参阅 testOptions.video。

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

在测试结束时，视频会在关闭浏览器上下文时保存。如果你手动创建了浏览器上下文，请确保等待 browserContext.close() 方法完成。

🌐 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().

Test
Library

playwright.config.ts
import { defineConfig } from '@playwright/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();

你也可以指定视频大小和注释。视频大小默认为视口大小，并按比例缩小以适应 800x800。视口的视频将放置在输出视频的左上角，如有必要会缩小以适应。你可能需要设置视口大小以匹配你想要的视频大小。

🌐 You can also specify video size and annotation. 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.

当指定 show: { actions } 时，每个操作将在视频中以元素轮廓和操作标题字幕的形式进行可视化高亮。可选的 duration 属性控制每个标注显示的时长（默认为 500 毫秒）。

🌐 When show: { actions } is specified, each action will be visually highlighted in the video with the element outline and action title subtitle. The optional duration property controls how long each annotation is displayed (defaults to 500ms).

当指定 show: { test } 时，视频将使用可配置的 level 标注当前测试信息。

🌐 When show: { test } is specified, video will be annotated with the current test information with configurable level.

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    video: {
      mode: 'on-first-retry',
      size: { width: 640, height: 480 },
      show: {
        actions: {
          duration: 500,
          position: 'top-right',
          fontSize: 14,
        },
        test: {
          level: 'step',
          position: 'top-left',
          fontSize: 12,
        }
      },
    },
  },
});

对于多页面场景，你可以通过 page.video() 访问与页面关联的视频文件。

🌐 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

请注意，视频仅在页面或浏览器上下文关闭后才可用。

介绍​

录视频​

介绍

录视频