Playwright实战-截屏与录屏

简介：自动化测试中，截屏和录屏是非常重要的工具，可以帮助捕获和记录测试过程中的问题和异常。本文介绍了如何利用Playwright提供的相关api来完成截屏和录屏。

截屏api

Playwright提供了一个截屏的API：page.screenshot。使用该API，只需要指定截图的图片的保存路径及文件名即可。如果仅指定文件名，默认保存在当前目录。

参数解析：

• path：保存图像的文件路径。截屏类型将从文件扩展名中推断出来。

• timeout：设置最长时间（以毫秒为单位）。默认为30秒。

• animations：在设置为disabled时停止CSS动画、CSS和Web动画。默认为allow。

• clip：指定结果图像的剪辑的对象。

• quality：截屏分辨率的质量，介于0-100之间。不适用于.png图像。

• mask：当截取截屏时，您可以指定应该被遮蔽（覆盖）的定位器。

例如

await page.screenshot({ path:`test-results/${date.toISOString()}.jpeg`, 
      clip: {
          x: 0,
          y: 0,
          width: 100,
          height: 100
      },
      quality: 20,
      type: 'jpeg',
      mask: [page.getByTestId("introduction")],
      timeout: 1000
  });
});

更多参数查看官方api

截图操作

一步即可实现最简单的截图操作：

page.screenshot(path="screenshot.png")

全屏幕截图

设置full_page=True参数，可以实现screenshot 完整的可滚动页面的屏幕截图：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // 设置 fullPage 选项为 true
  await page.screenshot({ path: 'fullpage.png', fullPage: true });

  await browser.close();
})();

按元素截图

也可以针对某个区域的界面元素截图，方法是先定位到指定的页面上元素，再完成screenshot操作：

page.locator(".header").screenshot(path="screenshot.png")

截图数据流

除了截图存入文件，也可以把图像放入缓冲区，并用于后续处理

screenshot_bytes = page.screenshot()
print(base64.b64encode(screenshot_bytes).decode())

指定quality

await page.screenshot({ path: ‘screenshot.jpg‘, quality: 50 });

指定viewportSize

await page.setViewportSize({ width: 1280, height: 720 });
await page.screenshot({ path: ‘screenshot.png‘ });

指定deviceScaleFactor

await page.screenshot({ path: ‘screenshot@2x.png‘, deviceScaleFactor: 2 });

指定图片格式为jpg

await page.screenshot({ path: ‘screenshot.jpg‘, type: ‘jpeg‘ });

注意默认为.png格式

录屏

默认情况下，视频录制处于关闭off状态 如果需要录制测试过程视频，只需要打开设置即可

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

参数解释如下：

• 'off'– 不要录制视频。

• 'on'– 为每个测试录制视频。

• 'retain-on-failure'– 为每个测试录制视频，但从成功的测试运行中删除所有视频。

• 'on-first-retry'– 仅在首次重试测试时录制视频。

值得注意的是：视频仅在页面或浏览器上下文关闭后可用。

context = browser.newContext(record_video_dir="videos/")

# 确保调用 close,  videos视频才会保存
context.close()

指定viweport大小

视频大小默认为缩小到适合 800x800 的视口大小。视口的视频放置在输出视频的左上角，必要时会缩小以适应。可根据需要设置视口大小以匹配所需的视频大小，例如：

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

指定视频保存路径path

保存的视频文件将出现在指定的文件夹中。

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

典型应用场景

每个test都保留record video

const config = {
  use: {
    video: 'on',
  },
};

停止录制

const config = {
  use: {
    video: {
      mode: 'off',
  },
};

仅录制failed test

const config = {
  use: {
    video: 'retain-on-failure',
  },
};

仅首次失败录制

const config = {
  use: {
    video: 'on-first-retry',
  },
};

打开录制的视频

录制的视频扩展名为 .webm，可以使用任何浏览器打开它。视频也附加在报告中，也可以使用浏览器选项保存它，方法是右键单击视频或其下方的链接。

总结

无论是屏幕录制，还是屏幕截图，Playwright都提供了简洁的方法实现，对于截图，简单调用page.screenshot()即可，对于录屏，则是在配置文件playwright.config.js中打开设置mode: {video: on}即可。