Playwright 截图与视频

本章介绍如何使用 Playwright 进行截图和视频录制，帮助你在测试失败时快速定位问题。

page.screenshot() 截图

全页面截图

实例

// 保存到文件
await page.screenshot({ path: 'screenshots/runoob-homepage.png' });

// 获取 Buffer 数据（直接使用，不写文件）
const buffer = await page.screenshot();

截图选项

实例

await page.screenshot({
path: 'screenshots/full-page.png',
fullPage: true, // 截取整个页面（不只是视口）
type: 'png', // 格式：'png'（默认）或 'jpeg'
quality: 90, // JPEG 质量（0-100，仅 JPEG）
clip: { // 裁剪区域
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // 禁用 CSS 动画（截图更稳定）
omitBackground: false, // 是否隐藏默认背景
});

元素截图

实例

// 截取特定元素的截图
await page.getByRole('navigation').screenshot({ path: 'nav.png' });

// 截取按钮
await page.getByRole('button', { name: '提交' }).screenshot({ path: 'btn.png' });

自动截图配置

在配置文件中设置自动截图策略，无需在每个测试中手动调用：

实例

// 文件路径：playwright.config.ts
export default defineConfig({
use: {
// 只在测试失败时自动截图
screenshot: 'only-on-failure',

// 可选值：
// 'off' —— 不截图
// 'on' —— 每个测试都截图
// 'only-on-failure' —— 只在失败时截图（推荐）
},
});

失败截图会保存在 test-results/ 目录中，并在 HTML 报告中显示。

视频录制

配置视频录制

实例

// 文件路径：playwright.config.ts
export default defineConfig({
use: {
// 只在失败时保留视频
video: 'retain-on-failure',

// 可选值：
// 'off' —— 不录制
// 'on' —— 每次都录制
// 'retain-on-failure' —— 失败时保留，通过时删除（推荐）
// 'on-first-retry' —— 只在第一次重试时录制
},
});

手动控制视频

实例

test('手动保存视频', async ({ page }) => {
await page.goto('https://www.runoob.com/');

// 执行操作
await page.getByText('RUNOOB 教程').click();

// 获取视频对象
const video = page.video();
// 保存视频到指定路径
await video.saveAs('videos/runoob-test.mp4');
// 或者删除视频
// await video.delete();
});

视频录制选项

实例

// 文件路径：playwright.config.ts
export default defineConfig({
use: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // 视频尺寸
},
},
});

截图与视频的使用场景

场景	推荐方案
CI 测试失败时快速了解页面状态	`screenshot: 'only-on-failure'`
查看完整的测试执行过程	`video: 'retain-on-failure'`
视觉回归测试	`expect(page).toHaveScreenshot()`
调试特定步骤	手动调用 `page.screenshot()`

截图和视频会增加测试执行时间和磁盘占用。推荐仅在生产环境中使用 'only-on-failure' 或 'retain-on-failure'，避免每次都生成媒体文件。

返回顶部

菜鸟教程