Playwright 截图与视频
本章介绍如何使用 Playwright 进行截图和视频录制，帮助你在测试失败时快速定位问题。
page.screenshot() 截图
全页面截图
实例
javascript
// 保存到文件
await page.screenshot({ path: 'screenshots/runoob-homepage.png' });
// 获取 Buffer 数据（直接使用，不写文件）
const buffer = await page.screenshot();截图选项
实例
javascript
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, // 是否隐藏默认背景
});元素截图
实例
javascript
// 截取特定元素的截图
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// 截取按钮
await page.getByRole('button', { name: '提交' }).screenshot({ path: 'btn.png' });自动截图配置
在配置文件中设置自动截图策略，无需在每个测试中手动调用：
实例
bash
// 文件路径：playwright.config.ts
export default defineConfig({
use: {
// 只在测试失败时自动截图
screenshot: 'only-on-failure',
// 可选值：
// 'off' —— 不截图
// 'on' —— 每个测试都截图
// 'only-on-failure' —— 只在失败时截图（推荐）
},
});失败截图会保存在 test-results/ 目录中，并在 HTML 报告中显示。
视频录制
配置视频录制
实例
bash
// 文件路径：playwright.config.ts
export default defineConfig({
use: {
// 只在失败时保留视频
video: 'retain-on-failure',
// 可选值：
// 'off' —— 不录制
// 'on' —— 每次都录制
// 'retain-on-failure' —— 失败时保留，通过时删除（推荐）
// 'on-first-retry' —— 只在第一次重试时录制
},
});手动控制视频
实例
javascript
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();
});视频录制选项
实例
bash
// 文件路径：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'，避免每次都生成媒体文件。
AI 思考中...