PlayWright新手全攻略：從入門到精通

01、簡介

軟開源自動化測試工具Playwright，支持主流瀏覽器，包括：Chrome、Firefox、Safari 等，同時支持以無頭模式、有頭模式運行，并提供了同步、異步的 API，可以結(jié)合主流測試框架使用，并且支持瀏覽器端的自動化腳本錄制等功能。

特點：

· 跨瀏覽器：Playwright 支持所有現(xiàn)代渲染引擎，包括Chromium、WebKit 和 Firefox；

· 跨平臺：在 Windows、Linux 和 MacOS 上進(jìn)行本地或 CI、無頭或有頭測試;

· 跨語言：在 TypeScript、JavaScript、Python、.NET、Java 中使用Playwright API;

· 測試移動網(wǎng)絡(luò)：適用于 Android 和 Mobile Safari 的 Google Chrome 原生移動仿真。相同的渲染引擎適用于您的桌面和云端。

通俗的講： 就是一款主流的自動化測試工具，可以跨平臺、跨語言、開源、支持分布式、擁有成熟的社區(qū)及學(xué)習(xí)文檔，主要用于接口和web自動化測試。

02、安裝

1.Java 開發(fā)環(huán)境搭建

首先需要明確的是Java環(huán)境是使用maven管理項目的，所以我們只需用在項目中找到對應(yīng)的pom文件在其中添加如下內(nèi)容：

com.microsoft.playwright

playwright

1.25.0

就可以自動導(dǎo)入playwright。

Ps：因為maven的中央倉庫是外網(wǎng)地址，下載很慢需耐心等待，或者在修改鏡像站，改為國內(nèi)鏡像。

添加demo.java內(nèi)容如下：

package org.example;import com.microsoft.playwright.*;publicclassExample{publicstaticvoidmain(String[] args){try (Playwright playwright = Playwright.create()) {Browser browser = playwright.chromium().launch();Page page = browser.newPage(); page.navigate("https://www.cnblogs.com/longronglang"); System.out.println(page.title());}}}

運行這個類之后會下載下載 Playwright 包并安裝適用于 Chromium、Firefox 和 WebKit 的瀏覽器二進(jìn)制文件，如下所示：

2.Python開發(fā)環(huán)境搭建（網(wǎng)上教程很多此處不做過多說明）

1. 安裝Playwright依賴庫（Playwright支持Async\Await語法，故需要Python3.7+）

pip install playwright

2. 安裝Chromium、Firefox、WebKit等瀏覽器的驅(qū)動文件（內(nèi)置瀏覽器）

python -m playwright install

03、腳本錄制

此章主要是介紹如何錄制腳本，提供給需要使用錄制屏幕的人，若是不喜歡覺得自己手寫更方便的同學(xué)可以跳過此章。

1.錄制環(huán)境安裝

如同常見的自動化測試工具一樣，playwright同樣支持屏幕錄制并生成腳本。因為錄屏?xí)r需要node環(huán)境，所以請?zhí)崆鞍惭b。不會的同學(xué)請自行度娘，本文不做詳述。

確認(rèn)node環(huán)境及版本：

node -v

安裝：

npm init -y

npm i -D @playwright/test

2.錄制

錄制是不需要寫代碼的，只需要啟動瀏覽器，playwright就會幫我們生成腳本代碼。

輸入如下命令即可啟動，開啟錄制模式：

npx playwright codegen https://www.baidu.com（開啟錄屏模式）

Npx playwright open --viewport-size 1920，1080 https://www.baidu.com

Ps: 上文中的url 是我們需要錄制的網(wǎng)站地址，請根據(jù)實際使用情況自行配置。

同樣playwright是支持多語言的，我們可以在錄制界面隨意切換自己需要的語言，本文以Java為例，其余不做演示。

接下來我們只需要在瀏覽器中執(zhí)行相關(guān)操作，playwright就會把我們所有的操作記錄下來。

下圖中為在首頁的輸入框中輸入playwright并查詢。

當(dāng)操作完成之后，我們點擊playwright的停止和復(fù)制就可以得到錄制好的腳本

我們把復(fù)制好的腳本粘貼到編輯器中，點擊運行該腳本，通過運行后就證明我們錄制的腳本沒有問題，可以保存。如果有，則通過調(diào)整代碼或者推倒重新錄制即可解決。

至此錄制環(huán)境安裝和腳本錄制完成。

3.調(diào)試

如圖是playwright inspectior，我們已經(jīng)和它見過一次面了，大家應(yīng)該也不陌生。接下來詳細(xì)的為大家介紹一下它，它叫playwright inspectior是playwright框架自帶的GUI工具，可以幫助我們調(diào)試腳本

3.1 如何啟動playwright inspectior

在腳本中添加page.pause()方法即可啟動.

Ps: 其他方法本文不做推薦，后期請自行研究。

3.2. 界面介紹

（1）工具欄介紹

（2）元素欄介紹

如圖所示，當(dāng)我們不確定頁面某個元素位置怎么獲取時，可點擊檢測器，然后在頁面上點擊該元素，即可在輸入框中展示該元素。

也可以配合開發(fā)者小工具（F12）檢測你的元素否正確。

3.3. 如何調(diào)試

當(dāng)腳本出現(xiàn)問題之后，我們就可以使用playwright inspectior做調(diào)試

第一步：在你的腳本代碼中添加page.pause()方法，運行腳本。

第二步：等待playwright inspectior成功啟動之后，我們就能使用工具欄 播放、停止、逐步播放來確定問題所在

第三步：當(dāng)確定時元素位置錯誤，我們就能使用元素檢查器來確定正確的元素位置。

04、常用方法介紹

1.創(chuàng)建瀏覽器對象

.chromium().launch()方法就是指創(chuàng)建一個谷歌瀏覽器，同樣創(chuàng)建火狐就是.firefox().launch()

.setHeadless(false)方法是指在創(chuàng)建瀏覽器的時候，選擇無頭瀏覽器（true）還是帶頭瀏覽器（false）。

無頭瀏覽器：后臺運行，不在顯示器顯示腳本操作

有頭瀏覽器：在顯示器上展示腳本所有操作

2.創(chuàng)建瀏覽器上下文

瀏覽器上下文對象是瀏覽器實例中一個類似于隱身模式的會話，簡單說就是該上下文資源是完全獨立的，與其他的上下文互不干擾，所以在自動化測試中，可以對每一個測試用例都單獨開一個瀏覽器上下文。這對于多用戶，多場景的測試非常有用。

3.創(chuàng)建頁面

page就是瀏覽器中的標(biāo)簽頁，一個page對象就可以當(dāng)前頁面內(nèi)容交互

??轉(zhuǎn)崗軟件測試/野路子技能提升

??想了解更多漲薪技能提升方法

??可以到我的個人號：atstudy-js

即可加入領(lǐng)取 ??????

轉(zhuǎn)行、入門、提升、需要的各種干貨資料

內(nèi)含AI測試、 車載測試、AI大模型開發(fā)、BI數(shù)據(jù)分析、銀行測試、游戲測試、AIGC

4.常見頁面操作事件

這部分主要演示的常見頁面操作，例如：文本輸入、點擊、鍵盤鍵入、上傳文件、聚焦等等

1、輸入操作

語法：Locator.fill(value)

使用場景：文本框、日期/時間、日歷控件等輸入框

page.locator("#kw").fill("playwright");

2、點擊操作

語法：Locator.click()

適用場景：單選框、復(fù)選框、按鈕控件、常見可點擊控件等等！

page.locator("#kw").click();

3、單選框及復(fù)選框操作

語法： Locator.setChecked(checked)

適用場景： 單選框、復(fù)選框

//單選款 (選中，已選中狀態(tài)下無效) page.locator(".Volvo").setChecked(true);page.locator(".Volvo").check();System.out.println(page.locator(".Volvo").isChecked());//復(fù)選框（選中，已選中狀態(tài)下無效） page.locator("#checkbox [type='checkbox']:nth-child(7)").check();page.locator("#checkbox [type='checkbox']:nth-child(7)").setChecked(true);

4、下拉控件操作

語法：Locator.selectOption(values[, options])

適用場景：下拉框操作

//通過value值選擇page.locator("[name='select']").selectOption("opel");//通過可見文本選擇page.locator("[name='select']").selectOption(new SelectOption().setLabel("Audi"));5、鼠標(biāo)事件

5、鼠標(biāo)事件

語法：詳見案例

適用場景：常見鼠標(biāo)點擊事件

//常規(guī)單擊page.locator("#mouse2").click();//雙擊page.locator("#mouse3").dblclick();//右鍵單擊page.locator("#mouse5").click(new Locator.ClickOptions().setButton(MouseButton.RIGHT));//按住Shift鍵并單擊page.locator("#mouse2").click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.SHIFT)));//懸停在元素上page.locator("#mouse1").hover();//單擊左上角page.locator("#mouse1").click(new Locator.ClickOptions().setPosition(0, 0));//強(qiáng)制點擊page.locator("#mouse2").click(new Locator.ClickOptions().setForce(true));//調(diào)度點擊事件來觸發(fā)點擊page.locator("#mouse2").dispatchEvent("click");

6、模擬鍵盤輸入字符操作

語法：Locator.type(value)

使用場景：模擬鍵盤輸入字符

ｐｓ：大多數(shù)時候，Page.fill()可以滿足要求。如不能輸入時，可以考慮鍵入字符操作。

page.locator("#user").type("playwright");

7、單元素鍵盤事件操作

語法：Locator.press(鍵盤事件)

使用場景：定位元素并產(chǎn)生單個鍵盤事件

//模擬Ctrl+A 全選操作page.locator("#user").press("Control+A");//模擬回車操作 == > 跳轉(zhuǎn)到百度頁面page.locator(".baidu").press("Enter");

8、上傳文件

語法：Locator.setInputFiles()

使用場景：上傳一個或多個文件

//上傳一個文件page.locator("#load").setInputFiles(Paths.get("demo.md"));// 上傳多個文件page.locator("#load").setInputFiles(new Path[]{Paths.get("pom.xml"), Paths.get("demo.md")});

9、拖拽操作

語法：Locator.dragTo()

使用場景：常見元素拖動操作

// 拖拽元素page.locator("#A").dragTo(page.locator(".container ul:nth-of-type(2)"));

10、懸浮操作

語法：Locator.hover()

使用場景：常見元素懸浮操作

//懸浮page.locator("#action").hover();