python中playwright截屏API的实现_Python

1. 截屏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
});
});

1.1 截图操作

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

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

1.2 全屏幕截图

设置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();
})();

1.3 按元素截图

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

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

1.4 截图数据流

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

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

1.5 指定quality

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

1.6 指定viewportsize

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

1.7 指定devicescalefactor

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

1.8 指定图片格式为jpg

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

注意默认为.png格式

2. 录屏

默认情况下，视频录制处于关闭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()

2.1 指定viweport大小

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

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

2.2 指定视频保存路径path

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

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

2.3 典型应用场景

每个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}即可。

提到web api自动化测试，已经有很多工具可以选择：如基于命令行的curl，基于ui界面的postman，基于浏览器自带的f12，以及在敏捷团队越来越流行的apifox，都可以很好地完成web api自动化测试。对于playwright来说，提供的api testing能力可以很方便地和ui testing能力结合，从而实现更复杂的测试验证任务。

1.web api介绍

web api，即 web application programming interface，是一种用于提供 web 服务的接口，通过 http 协议进行通信。它允许不同的应用程序在网络上进行数据交换和通信，常见的 web api 有下列4种： restful api、soap api、 graphql api、grpc api

rest api

rest，即 representational state transfer，是一种基于 http 协议的软件架构风格，用于构建分布式系统。rest api 是一种符合 rest 原则的 web api，它使用 http 方法（如 get、post、put、delete）来实现资源的增删改查操作。

soap api

soap，即 simple object access protocol，是一种基于 xml 的通信协议，用于在分布式系统中进行信息交换。soap api 使用 xml 格式来定义消息格式和消息协议，通常使用 http 或 smtp 协议来传输数据。

graphql api

graphql 是一种用于构建 api 的查询语言，它允许客户端根据自身的需求来请求特定的数据。graphql api 提供了一个灵活的数据查询和获取方式，客户端可以通过一个请求来获取多个资源的数据，从而减少网络传输量和提高数据获取效率。

grpc api

grpc 是一种高性能、开源的远程过程调用（rpc）框架，它使用 protocol buffers（protobuf）作为接口定义语言（idl），支持多种编程语言和平台。grpc api 提供了一种简单而强大的方法来定义服务接口和方法，并在客户端和服务器之间进行通信。

下列表格总结了他们的主要特点：

web api类型	主要贡献者	主要特点
restful api	roy fielding	资源、路径、请求方法。在互联网应用广泛
soap api	微软	基于xml，较复杂。支持事务处理
graphql api	facebook	一次请求获得多个资源。减少数据传输
grpc api	google	基于http/2，速度更快，性能更高，也更复杂

2.rest api介绍

restful api

是符合rest原则的api设计风格，它通过使用http协议中的各种方法来操作资源，包括get、post、put、delete等。

rest

representational state transfer，表述性状态传递，服务器将资源状态表述传递给客户端。

restful api特点

资源导向： restful api的核心概念是资源，每个资源都有一个唯一的标识符（uri）。客户端通过http方法对资源进行操作，如get用于获取资源、post用于创建资源、put用于更新资源、delete用于删除资源等。
无状态性： restful api是无状态的，每个请求都必须包含足够的信息来处理该请求，而不依赖于服务器上的会话状态。这样可以使得api的设计更加简洁，并且易于扩展和维护。
可缓存性： restful api通过利用http协议中的缓存机制来提高性能和可扩展性。服务器可以在响应中包含缓存控制信息，客户端可以根据这些信息来缓存资源，减少不必要的网络请求。
统一接口： restful api使用统一的接口来访问资源，即通过http方法对资源进行操作。这种统一接口的设计使得api更易于理解和使用。

下面，重点结合playwright说明下rest api如何完成自动化测试。

3. 常见api自动化测试工具

浏览器调试工具

chorome浏览器自带的devtools，对于测试人员和开发人员，可能都是最需要掌握的调试工具。典型的测试场景如：模拟慢速网络连结

官网有详细介绍:

https://developer.chrome.com/docs/devtools?hl=zh-cn

curl

curl 是一个基础的开源命令行工具，用于在服务器之间传输数据，同时支持创建 http 请求并将其发送到后端服务中，同时也支持使用 curl 命令发送 http 请求，例如 post、put 和 delete。例如：

postman

postman，有客户端版本和 web 网页版。postman 支持多种协议和格式，包括 http、https、graphql、rest 等。postman 的优点在于它易于使用，支持多种请求类型和参数设置，可以方便地创建和管理 api 测试套件；还支持将测试结果导出为多种格式，如 json、csv 等；还提供了一些有用的工具，如 mock server，可以帮助用户模拟 api 响应以及运行单元测试。

jmeter

jmeter主要用来做性能测试。优点是java编写，免费开源，无需安装，做web api测试也是可以的。

soupui

soapui 是专门为 api 测试而开发的开源工具，可以轻松测试 rest 和 soap api。

apifox

apifox 是一款集 api 文档、api 调试、api mock、api 自动化测试为一体的接口一站式协作平台，类似于 postman、swagger、mock 和 jmeter 的综合体。它提供了直观、易于使用的界面，支持多种 http 请求方法、参数类型和数据格式，还提供了丰富的测试和调试功能，例如断言、测试集合、环境变量等。

下列表格总结了他们的主要特点：

工具	描述	主要优点
浏览器调试工具	浏览器自带的开发者工具，可用于发送和调试http请求。	无需额外安装软件，直接在浏览器中调试，方便快捷。提供了丰富的调试功能，包括请求和响应的查看、编辑和分析等。
curl	命令行工具，用于发送和接收http请求。	跨平台，支持linux、macos和windows等操作系统。灵活，可通过命令行参数设置各种请求参数和选项。
postman	图形界面工具，提供了丰富的功能和可视化操作界面。	用户友好，无需编写代码，通过可视化界面快速构建和发送请求。支持多种请求类型和测试脚本编写，功能强大。
jmeter	java编写的压力测试工具，也可用于接口测试。	功能强大，支持多种协议和高并发压力测试。可以通过插件扩展功能，满足不同测试需求。
soupui	支持soap协议和restful风格的接口测试。	提供了丰富的接口测试功能，支持多种协议和数据格式。用户界面友好，易于使用和学习。
apifox	api 接口文档管理工具	适合团队协作，从api定义，开放，测试，文档，全生命周期管理

3.playwright发送请求

以上工具在不同维度和层面提供了不同的能力，帮助完成web api测试。就自动化来说，无论是python环境下的requests库，还是java环境下的rest-assured，选择playwright有一个额外的好处，那就是可以和web ui自动化测试无缝连接，包括但不限于如下场景：

通过调用api获取token，在后续自动化测试中复用，避免从ui层反复login的痛点
利用api提前创建测试数据，比通过ui层的交互来创建数据更加高效
利用api来清理测试过程中产生的垃圾数据，为下次自动化测试做好准备
调用第三方api准备测试环境，包括测试数据、服务、缓存、中间件...

playwright主要通过apirequestcontext 方法来实现。

简单来说，掌握api test发送request请求，包含了4个要素和4方法：

4要素

url
method
headers
parameter/payload

request

get
post
delete
put

crud

以下是api测试中基本的crud（创建、读取、更新、删除）操作：

操作	http方法	描述
创建	post	创建一个新的资源。客户端发送一个带有新资源数据的post请求。
读取	get	检索现有资源或资源列表。客户端发送一个get请求到api端点。
更新	put 或 patch	修改现有资源。客户端发送一个带有更新数据的put或patch请求。put请求用新数据替换整个资源，而patch只更新指定的字段。
删除	delete	删除现有资源。客户端发送一个带有要删除资源的唯一标识符的delete请求。

这些操作构成了api测试的基础，使测试人员能够有效地与应用程序的资源进行交互。

apirequestcontext使用

import { test, expect } from '@playwright/test';
import { request, apirequestcontext } from '@playwright/test';
 
test('get api get', async () => {
  const apicontext: apirequestcontext = await request.newcontext();
  const response = await apicontext.get('https://reqres.in/api/users?page=2');
  const responsecode = await response.status();
  console.log(responsecode);
  expect(responsecode).tobe(200);
});
 
test('get api get2', async ({request}) => {
  const response = await request.get('https://reqres.in/api/users?page=2');
  const responsecode = await response.status();
  console.log(responsecode);
  expect(responsecode).tobe(200);
});
 
test('get api post', async () => {
  const apicontext: apirequestcontext = await request.newcontext();
  const response = await apicontext.post('https://reqres.in/api/users?page=2', {
  data: {
    title: 'book title',
    author: 'john doe',
   },
  headers: {
    authorization: `bearer eyjhbgcioijiuzcci6ikpxvcj9.eyjzd`
   }
  });
  const resbody = await response.body();
  const responsecode = await response.status();
  console.log(responsecode);
  expect(responsecode).tobe(201);
});

说明如下：

apirequestcontext生成apicontext实例
apicontext.get()方法
response.status()断言返回值为200
request方法类似
post、get调用方法类似

4.playwright处理响应

接口断言写法，通常3个方面考虑，分别是：返回值、返回数据、数据类型：

status code

expect(code).tobe(200);

json data

expect(res.message).tocontain('操作成功');

json schema

expect(typeof phonenumber).tobe('string');

结论

web api广泛用于互联网基于前后端分离的项目中，通讯协议http/https时，一般也称为rest api
crud操作，对应于数据的创建、读取、更新、删除操作，操作结果可以用status code状态码获取，也可以用json data结构，而json schema往往对应数据类型的校验，在实际项目中，断言的内容，可以以上3个维度考虑
灵活运用ui testing与api testing能力，可以实现更复杂的自动化验证需求

到此这篇关于python中playwright截屏api的实现的文章就介绍到这了,更多相关playwright截屏api内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！


验证码：

python中playwright截屏API的实现

2026年01月23日 • Python •我要评论