1. 截屏api

Playwright提供了一個(gè)截屏的API：page.screenshot。使用該API，只需要指定截圖的圖片的保存路徑及文件名即可。如果僅指定文件名，默認(rèn)保存在當(dāng)前目錄。

參數(shù)解析：

• path：保存圖像的文件路徑。截屏類型將從文件擴(kuò)展名中推斷出來。
• timeout：設(shè)置最長(zhǎng)時(shí)間（以毫秒為單位）。默認(rèn)為30秒。
• animations：在設(shè)置為disabled時(shí)停止CSS動(dòng)畫、CSS和Web動(dòng)畫。默認(rèn)為allow。
• clip：指定結(jié)果圖像的剪輯的對(duì)象。
• quality：截屏分辨率的質(zhì)量，介于0-100之間。不適用于.png圖像。
• mask：當(dāng)截取截屏?xí)r，您可以指定應(yīng)該被遮蔽（覆蓋）的定位器。

例如

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 截圖操作

一步即可實(shí)現(xiàn)最簡(jiǎn)單的截圖操作：

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

1.2 全屏幕截圖

設(shè)置full_page=True參數(shù)，可以實(shí)現(xiàn)screenshot 完整的可滾動(dòng)頁面的屏幕截圖：

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

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

// 設(shè)置 fullPage 選項(xiàng)為 true
  await page.screenshot({ path:'fullpage.png', fullPage:true});

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

1.3 按元素截圖

也可以針對(duì)某個(gè)區(qū)域的界面元素截圖，方法是先定位到指定的頁面上元素，再完成screenshot操作：

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

1.4 截圖數(shù)據(jù)流

除了截圖存入文件，也可以把圖像放入緩沖區(qū)，并用于后續(xù)處理

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‘ });

注意默認(rèn)為.png格式

2. 錄屏

默認(rèn)情況下，視頻錄制處于關(guān)閉off狀態(tài) 如果需要錄制測(cè)試過程視頻，只需要打開設(shè)置即可

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

參數(shù)解釋如下：

• 'off'- 不要錄制視頻。
• 'on'- 為每個(gè)測(cè)試錄制視頻。
• 'retain-on-failure'- 為每個(gè)測(cè)試錄制視頻，但從成功的測(cè)試運(yùn)行中刪除所有視頻。
• 'on-first-retry'- 僅在首次重試測(cè)試時(shí)錄制視頻。

值得注意的是：視頻僅在頁面或?yàn)g覽器上下文關(guān)閉后可用。

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

# 確保調(diào)用 close,  videos視頻才會(huì)保存
context.close()

2.1 指定viweport大小

視頻大小默認(rèn)為縮小到適合 800x800 的視口大小。視口的視頻放置在輸出視頻的左上角，必要時(shí)會(huì)縮小以適應(yīng)?？筛鶕?jù)需要設(shè)置視口大小以匹配所需的視頻大小，例如：

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

2.2 指定視頻保存路徑path

保存的視頻文件將出現(xiàn)在指定的文件夾中。

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

2.3 典型應(yīng)用場(chǎng)景

每個(gè)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',
  },
};

打開錄制的視頻

錄制的視頻擴(kuò)展名為 .webm，可以使用任何瀏覽器打開它。視頻也附加在報(bào)告中，也可以使用瀏覽器選項(xiàng)保存它，方法是右鍵單擊視頻或其下方的鏈接。

小總結(jié)

無論是屏幕錄制，還是屏幕截圖，Playwright都提供了簡(jiǎn)潔的方法實(shí)現(xiàn)，對(duì)于截圖，簡(jiǎn)單調(diào)用page.screenshot()即可，對(duì)于錄屏，則是在配置文件playwright.config.js中打開設(shè)置mode: {video: on}即可。

提到web api自動(dòng)化測(cè)試，已經(jīng)有很多工具可以選擇：如基于命令行的curl，基于UI界面的postman，基于瀏覽器自帶的F12，以及在敏捷團(tuán)隊(duì)越來越流行的apifox，都可以很好地完成web api自動(dòng)化測(cè)試。對(duì)于playwright來說，提供的api testing能力可以很方便地和ui testing能力結(jié)合，從而實(shí)現(xiàn)更復(fù)雜的測(cè)試驗(yàn)證任務(wù)。

1.Web API介紹

Web API，即 Web Application Programming Interface，是一種用于提供 Web 服務(wù)的接口，通過 HTTP 協(xié)議進(jìn)行通信。它允許不同的應(yīng)用程序在網(wǎng)絡(luò)上進(jìn)行數(shù)據(jù)交換和通信，常見的 Web API 有下列4種： RESTful API、SOAP API、 GraphQL API、gRPC API

REST API

REST，即 Representational State Transfer，是一種基于 HTTP 協(xié)議的軟件架構(gòu)風(fēng)格，用于構(gòu)建分布式系統(tǒng)。REST API 是一種符合 REST 原則的 Web API，它使用 HTTP 方法（如 GET、POST、PUT、DELETE）來實(shí)現(xiàn)資源的增刪改查操作。

SOAP API

SOAP，即 Simple Object Access Protocol，是一種基于 XML 的通信協(xié)議，用于在分布式系統(tǒng)中進(jìn)行信息交換。SOAP API 使用 XML 格式來定義消息格式和消息協(xié)議，通常使用 HTTP 或 SMTP 協(xié)議來傳輸數(shù)據(jù)。

GraphQL API

GraphQL 是一種用于構(gòu)建 API 的查詢語言，它允許客戶端根據(jù)自身的需求來請(qǐng)求特定的數(shù)據(jù)。GraphQL API 提供了一個(gè)靈活的數(shù)據(jù)查詢和獲取方式，客戶端可以通過一個(gè)請(qǐng)求來獲取多個(gè)資源的數(shù)據(jù)，從而減少網(wǎng)絡(luò)傳輸量和提高數(shù)據(jù)獲取效率。

gRPC API

gRPC 是一種高性能、開源的遠(yuǎn)程過程調(diào)用（RPC）框架，它使用 Protocol Buffers（protobuf）作為接口定義語言（IDL），支持多種編程語言和平臺(tái)。gRPC API 提供了一種簡(jiǎn)單而強(qiáng)大的方法來定義服務(wù)接口和方法，并在客戶端和服務(wù)器之間進(jìn)行通信。

下列表格總結(jié)了他們的主要特點(diǎn)：

2.REST API介紹

RESTful API

是符合REST原則的API設(shè)計(jì)風(fēng)格，它通過使用HTTP協(xié)議中的各種方法來操作資源，包括GET、POST、PUT、DELETE等。

REST

Representational State Transfer，表述性狀態(tài)傳遞，服務(wù)器將資源狀態(tài)表述傳遞給客戶端。

RESTful API特點(diǎn)

• 資源導(dǎo)向： RESTful API的核心概念是資源，每個(gè)資源都有一個(gè)唯一的標(biāo)識(shí)符（URI）?？蛻舳送ㄟ^HTTP方法對(duì)資源進(jìn)行操作，如GET用于獲取資源、POST用于創(chuàng)建資源、PUT用于更新資源、DELETE用于刪除資源等。
• 無狀態(tài)性： RESTful API是無狀態(tài)的，每個(gè)請(qǐng)求都必須包含足夠的信息來處理該請(qǐng)求，而不依賴于服務(wù)器上的會(huì)話狀態(tài)。這樣可以使得API的設(shè)計(jì)更加簡(jiǎn)潔，并且易于擴(kuò)展和維護(hù)。
• 可緩存性： RESTful API通過利用HTTP協(xié)議中的緩存機(jī)制來提高性能和可擴(kuò)展性。服務(wù)器可以在響應(yīng)中包含緩存控制信息，客戶端可以根據(jù)這些信息來緩存資源，減少不必要的網(wǎng)絡(luò)請(qǐng)求。
• 統(tǒng)一接口： RESTful API使用統(tǒng)一的接口來訪問資源，即通過HTTP方法對(duì)資源進(jìn)行操作。這種統(tǒng)一接口的設(shè)計(jì)使得API更易于理解和使用。

下面，重點(diǎn)結(jié)合Playwright說明下REST api如何完成自動(dòng)化測(cè)試。

3. 常見api自動(dòng)化測(cè)試工具

瀏覽器調(diào)試工具

chorome瀏覽器自帶的devtools，對(duì)于測(cè)試人員和開發(fā)人員，可能都是最需要掌握的調(diào)試工具。典型的測(cè)試場(chǎng)景如：模擬慢速網(wǎng)絡(luò)連結(jié)

官網(wǎng)有詳細(xì)介紹:

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

curl

Curl 是一個(gè)基礎(chǔ)的開源命令行工具，用于在服務(wù)器之間傳輸數(shù)據(jù)，同時(shí)支持創(chuàng)建 HTTP 請(qǐng)求并將其發(fā)送到后端服務(wù)中，同時(shí)也支持使用 cURL 命令發(fā)送 HTTP 請(qǐng)求，例如 POST、PUT 和 DELETE。例如：

postman

Postman，有客戶端版本和 web 網(wǎng)頁版。Postman 支持多種協(xié)議和格式，包括 HTTP、HTTPS、GraphQL、REST 等。Postman 的優(yōu)點(diǎn)在于它易于使用，支持多種請(qǐng)求類型和參數(shù)設(shè)置，可以方便地創(chuàng)建和管理 API 測(cè)試套件；還支持將測(cè)試結(jié)果導(dǎo)出為多種格式，如 JSON、CSV 等；還提供了一些有用的工具，如 Mock Server，可以幫助用戶模擬 API 響應(yīng)以及運(yùn)行單元測(cè)試。

JMeter

JMeter主要用來做性能測(cè)試。優(yōu)點(diǎn)是Java編寫，免費(fèi)開源，無需安裝，做web api測(cè)試也是可以的。

soupUI

SoapUI 是專門為 API 測(cè)試而開發(fā)的開源工具，可以輕松測(cè)試 REST 和 SOAP API。

apifox

Apifox 是一款集 API 文檔、API 調(diào)試、API mock、API 自動(dòng)化測(cè)試為一體的接口一站式協(xié)作平臺(tái)，類似于 Postman、Swagger、mock 和 Jmeter 的綜合體。它提供了直觀、易于使用的界面，支持多種 HTTP 請(qǐng)求方法、參數(shù)類型和數(shù)據(jù)格式，還提供了豐富的測(cè)試和調(diào)試功能，例如斷言、測(cè)試集合、環(huán)境變量等。

下列表格總結(jié)了他們的主要特點(diǎn)：

3.Playwright發(fā)送請(qǐng)求

以上工具在不同維度和層面提供了不同的能力，幫助完成web api測(cè)試。就自動(dòng)化來說，無論是python環(huán)境下的requests庫(kù)，還是Java環(huán)境下的REST-assured，選擇Playwright有一個(gè)額外的好處，那就是可以和web UI自動(dòng)化測(cè)試無縫連接，包括但不限于如下場(chǎng)景：

• 通過調(diào)用api獲取token，在后續(xù)自動(dòng)化測(cè)試中復(fù)用，避免從UI層反復(fù)login的痛點(diǎn)
• 利用api提前創(chuàng)建測(cè)試數(shù)據(jù)，比通過UI層的交互來創(chuàng)建數(shù)據(jù)更加高效
• 利用api來清理測(cè)試過程中產(chǎn)生的垃圾數(shù)據(jù)，為下次自動(dòng)化測(cè)試做好準(zhǔn)備
• 調(diào)用第三方api準(zhǔn)備測(cè)試環(huán)境，包括測(cè)試數(shù)據(jù)、服務(wù)、緩存、中間件...

Playwright主要通過APIRequestContext 方法來實(shí)現(xiàn)。

簡(jiǎn)單來說，掌握api test發(fā)送request請(qǐng)求，包含了4個(gè)要素和4方法：

4要素

• url
• method
• headers
• parameter/Payload

request

• get
• post
• delete
• put

CRUD

以下是API測(cè)試中基本的CRUD（創(chuàng)建、讀取、更新、刪除）操作：

這些操作構(gòu)成了API測(cè)試的基礎(chǔ)，使測(cè)試人員能夠有效地與應(yīng)用程序的資源進(jìn)行交互。

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實(shí)例
• apiContext.get()方法
• response.status()斷言返回值為200
• request方法類似
• post、get調(diào)用方法類似

4.Playwright處理響應(yīng)

接口斷言寫法，通常3個(gè)方面考慮，分別是：返回值、返回?cái)?shù)據(jù)、數(shù)據(jù)類型：

status code

expect(code).toBe(200);

JSON data

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

JSON Schema

expect(typeof phoneNumber).toBe('string');

結(jié)論

• Web API廣泛用于互聯(lián)網(wǎng)基于前后端分離的項(xiàng)目中，通訊協(xié)議http/https時(shí)，一般也稱為REST API
• CRUD操作，對(duì)應(yīng)于數(shù)據(jù)的創(chuàng)建、讀取、更新、刪除操作，操作結(jié)果可以用status code狀態(tài)碼獲取，也可以用json data結(jié)構(gòu)，而json schema往往對(duì)應(yīng)數(shù)據(jù)類型的校驗(yàn)，在實(shí)際項(xiàng)目中，斷言的內(nèi)容，可以以上3個(gè)維度考慮
• 靈活運(yùn)用UI testing與api testing能力，可以實(shí)現(xiàn)更復(fù)雜的自動(dòng)化驗(yàn)證需求

到此這篇關(guān)于python中playwright截屏API的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)playwright截屏API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論