從零開發短視頻電商自動化測試WebUI端到端測試-Playwright

文章目錄

- Playwright是什么
- Playwright入門示例
- - 添加Maven依賴
  - 示例代碼
  - 啟動驗證
- 功能
- - 自動等待
  - 內置Web斷言
  - 可視化UI模式
  - 減慢操作
  - 截圖
  - 錄屏
  - 腳本錄制
- 高級
- - 識別驗證碼

Playwright是什么

https://playwright.dev/
https://playwright.dev/java/

Playwright為現代 Web 應用程序提供可靠的端到端測試。

Playwright 是專門為了滿足端到端測試的需求而創建的。Playwright 支持所有現代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上進行本地或 CI 測試，無頭測試或使用本機移動模擬進行測試。

和Selenium的對比

	Playwright	Selenium
是否需要驅動	否	需要,每一種瀏覽器匹配一種Driver
支持語言	JavaScript & TypeScript\Python\C#\Go\Java	Java\PythonRuby\C#\C++\JavaScript
覆蓋瀏覽器	Chromium/WebKit/Firefox	目前所有主流瀏覽器上
支持多標簽 + 表單	更符合直覺的 API	通過 `switch_to` 切換，但不好用
腳本錄制	基于 `playwright codegen` 命令錄制腳本	Selenium IDE可以錄制腳本
跨平臺	在 Windows、Linux 和 macOS 上進行本地測試或在 CI 上進行無頭或有頭測試	…
自動等待	Playwright 在執行動作之前等待元素可操作。它還具有一組豐富的內省事件。兩者的結合消除了人為超時的需要——這是不穩定測試的主要原因。	…
內置截屏/錄屏	捕獲執行跟蹤、視頻、屏幕截圖	…
登錄一次	保存上下文的身份驗證狀態并在所有測試中重用它。這繞過了每個測試中的重復登錄操作，但提供了獨立測試的完全隔離	…
執行效率	快	慢

Selenium: 需要額外安裝下 ChromeDriver 和 Chrome 瀏覽器。

Playwright: 會自動下載特定版本的瀏覽器，供其使用。

Playwright入門示例

在線編輯調試：Try Playwright

添加Maven依賴

<dependency><groupId>com.microsoft.playwright</groupId><artifactId>playwright</artifactId><version>1.37.0</version>
</dependency>

示例代碼

在Chrome瀏覽器將導航到https://blog.csdn.net/abu935009066并在其中截取屏幕截圖。

import com.microsoft.playwright.*;
import java.nio.file.Paths;public class App {public static void main(String[] args) {try (Playwright playwright = Playwright.create()) {Browser browser = playwright.webkit().launch();Page page = browser.newPage();page.navigate("https://blog.csdn.net/abu935009066");page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("example.png")));}}
}

默認情況下，Playwright 以無頭模式運行瀏覽器。要查看瀏覽器 UI，請在啟動瀏覽器時傳遞 headless=false 標志。您還可以使用 slowMo 來減慢執行速度（每個操作減慢 N 毫秒）。

// Chromium, Firefox, or WebKit
playwright.chromium.launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(100));

啟動驗證

首次啟動代碼，Playwright 將 Chromium、WebKit 和 Firefox 瀏覽器下載到操作系統特定的緩存文件夾中：

在 Windows 上 %USERPROFILE%\AppData\Local\ms-playwright
在 MacOS 上 ~/Library/Caches/ms-playwright
在Linux上 ~/.cache/ms-playwright

運行上面的示例后會自動下載，日志如下：

Downloading Chromium 116.0.5845.82 (playwright build v1076) from https://playwright.azureedge.net/builds/chromium/1076/chromium-win64.zip
|                                                                                |   0% of 116 Mb
|■■■■■■■■                                                                        |  10% of 116 Mb
|■■■■■■■■■■■■■■■■                                                                |  20% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  30% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 116 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 116 Mb
Chromium 116.0.5845.82 (playwright build v1076) downloaded to C:\Users\laker\AppData\Local\ms-playwright\chromium-1076
Downloading FFMPEG playwright build v1009 from https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-win64.zip
|                                                                                |   1% of 1.4 Mb
|■■■■■■■■                                                                        |  10% of 1.4 Mb
|■■■■■■■■■■■■■■■■                                                                |  20% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  30% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 1.4 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 1.4 Mb
FFMPEG playwright build v1009 downloaded to C:\Users\laker\AppData\Local\ms-playwright\ffmpeg-1009
Downloading Firefox 115.0 (playwright build v1422) from https://playwright.azureedge.net/builds/firefox/1422/firefox-win64.zip
|                                                                                |   0% of 79.5 Mb
|■■■■■■■■                                                                        |  10% of 79.5 Mb
|■■■■■■■■■■■■■■■■                                                                |  20% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  30% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 79.5 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 79.5 Mb
Firefox 115.0 (playwright build v1422) downloaded to C:\Users\laker\AppData\Local\ms-playwright\firefox-1422
Downloading Webkit 17.0 (playwright build v1883) from https://playwright.azureedge.net/builds/webkit/1883/webkit-win64.zip
|                                                                                |   0% of 45.7 Mb
|■■■■■■■■                                                                        |  10% of 45.7 Mb
|■■■■■■■■■■■■■■■■                                                                |  20% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  30% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 45.7 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 45.7 Mb
Webkit 17.0 (playwright build v1883) downloaded to C:\Users\laker\AppData\Local\ms-playwright\webkit-1883

執行完成后，看到生成的截圖如下：

功能

自動等待

Playwright 在執行操作之前對元素執行一系列可操作性檢查，以確保這些操作按預期運行。它會自動等待所有相關檢查通過，然后才執行請求的操作。如果在給定的 timeout 內未通過所需的檢查，則操作將失敗并顯示 TimeoutError 。

內置Web斷言

斷言	描述
assertThat(locator).isChecked()	復選框被選中
assertThat(locator).isDisabled()	元素被禁用
assertThat(locator).isEditable()	元素可編輯
assertThat(locator).isEmpty()	容器是空的
assertThat(locator).isEnabled()	元素已啟用
assertThat(locator).isFocused()	元素已聚焦
assertThat(locator).isHidden()	元素不可見
assertThat(locator).isVisible()	元素可見
assertThat(locator).containsText()	元素包含文本
assertThat(locator).hasAttribute()	元素具有 DOM 屬性
assertThat(locator).hasClass()	元素具有class屬性
assertThat(locator).hasCount()	列表有確切的孩子數量
assertThat(locator).hasCSS()	元素具有 CSS 屬性
assertThat(locator).hasId()	元素有一個 ID
assertThat(locator).hasJSProperty()	元素具有 JavaScript 屬性
assertThat(locator).hasText()	元素與文本匹配
assertThat(locator).hasValue()	輸入有一個值
assertThat(locator).hasValues()	選擇框有已選擇的選項
assertThat(page).hasTitle()	頁面有標題
assertThat(page).hasURL()	頁面有一個 URL
assertThat(response).isOK()	響應狀態為 OK

可視化UI模式

默認情況下，測試以無頭方式運行，這意味著運行測試時不會打開瀏覽器窗口，并且結果將在終端中看到。如果您愿意，可以使用該launch(new BrowserType.LaunchOptions().setHeadless(false))選項在 head 模式下運行測試。

減慢操作

將 Playwright 操作減慢指定的毫秒數。很有用，這樣您就可以看到發生了什么。

  Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(1000));

截圖

以下是捕獲屏幕截圖并將其保存到文件中的快速方法：

page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("screenshot.png")))

Screenshots 接受許多圖像格式、剪輯區域、質量等參數

全屏截圖

全頁屏幕截圖是完整可滾動頁面的屏幕截圖，就好像您有一個非常高的屏幕并且頁面可以完全容納它一樣。

page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("screenshot.png")).setFullPage(true));

截圖到緩沖區

您可以獲取包含圖像的緩沖區并對其進行后處理或將其傳遞給第三方像素差異工具，而不是寫入文件。

byte[] buffer = page.screenshot();
System.out.println(Base64.getEncoder().encode(buffer));

元素截圖

截取單個元素的屏幕截圖

page.locator(".header").screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("screenshot.png")));

錄屏

使用 Playwright，您可以錄制視頻以供測試。

測試結束時瀏覽器上下文關閉時保存視頻。如果您手動創建瀏覽器上下文，請確保等待 BrowserContext.close()。

context = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("videos/")));
// Make sure to close, so that videos are saved.
context.close();

您還可以指定視頻大小。視頻大小默認為縮小到適合 800x800 的視口大小。視口的視頻放置在輸出視頻的左上角，必要時縮小以適合。您可能需要設置視口大小以匹配您所需的視頻大小。

BrowserContext context = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("videos/")).setRecordVideoSize(640, 480));

保存的視頻文件將出現在指定的文件夾中。他們都產生了獨特的名字。對于多頁面場景，您可以通過Page.video()訪問與頁面關聯的視頻文件。

path = page.video().path();

腳本錄制

當您在瀏覽器中執行操作時，Playwright 能夠為您生成測試代碼，這是快速開始測試的好方法。

運行如下代碼進行錄制

import com.microsoft.playwright.*;public class Example {public static void main(String[] args) {try (Playwright playwright = Playwright.create()) {BrowserType chromium = playwright.chromium();// Make sure to run headed.Browser browser = chromium.launch(new BrowserType.LaunchOptions().setHeadless(false));// Setup context however you like.BrowserContext context = browser.newContext(/* pass any options */);context.route("**/*", route -> route.resume());// Pause the page, and start recording manually.Page page = context.newPage();page.pause();}}
}

高級

識別驗證碼

1.先獲取到驗證碼圖片，獲取驗證碼圖片的方式，可以直接定位到img元素，對元素截圖即可。

# 保存驗證碼  
page.locator('#imgCode').screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("screenshot.png")))

2.處理圖片

灰度，把猜測變為黑白
銳化，增強黑白對比
反轉，可選，要達到的目標是 白底黑字，如果已經是了就不需要反轉。

使用CV庫或者其他庫處理

3.OCR識別圖片

Tesseract是 HP 開發的開源 OCR 引擎，可識別 100 多種語言，并支持表意語言和從右到左的語言。此外，我們還可以訓練 Tesseract 識別其他語言。

它包含兩個用于圖像處理的 OCR 引擎——一個 LSTM（長短期記憶）OCR 引擎和一個通過識別字符模式工作的傳統 OCR 引擎。

Tess4J 是 Tesseract API 的 Java 包裝器，為各種圖像格式（如 JPEG、GIF、PNG 和 BMP）提供 OCR 支持。

首先，讓我們將最新的tess4j Maven 依賴項添加到pom.xml中：

<!-- Tess4J依賴 -->
<dependency><groupId>net.sourceforge.tess4j</groupId><artifactId>tess4j</artifactId><version>5.4.0</version>
</dependency>

然后，下載對應的語言資源，可以手動下載設置也可以使用jar包內置的資源。

手動下載

chi_sim.traineddata（中文簡體）、eng.traineddata（英文）、jpn.traineddata（日文）三個語言庫，存放在 resources 的 data 目錄下（如下圖所示，osd.traineddata 與頁面分割模式有關，這里也一并下載了）

其他語言庫可根據自己需求選擇下載，tessdata 語言庫下載地址：https://github.com/tesseract-ocr/tessdata

// 設置datapath,假設我們下載后放在c:/data路徑
Tesseract tesseract = new Tesseract();
tesseract.setDatapath("c:/data");

使用jar包內置的資源

ITesseract instance = new Tesseract();
// 使用 LoadLibs 加載默認的 tessdata 文件夾
instance.setDatapath(LoadLibs.extractTessResources("tessdata").getParent());

主要實現代碼

import java.io.File;
import net.sourceforge.tess4j.*;
public class TesseractExample {public static void main(String[] args) {File imageFile = new File("eurotext.tif");ITesseract instance = new Tesseract();instance.setDatapath(LoadLibs.extractTessResources("tessdata").getParent());// 自定義設置，也可以用默認值tesseract.setLanguage("eng");tesseract.setPageSegMode(1);tesseract.setOcrEngineMode(1);try {String result = instance.doOCR(imageFile);System.out.println(result);} catch (TesseractException e) {System.err.println(e.getMessage());}}
}