PlayWright新手全攻略:從入門到精通
整理版優先睇
Playwright新手全攻略:從入門到精通,掌握跨瀏覽器自動化測試核心技能
呢篇文章係由51Testing論壇嘅用戶Foraemon投稿,佢本身係一位軟件測試從業員,寫呢篇文係想幫初學者快速上手Playwright呢款開源自動化測試工具。文章嘅背景係市面上雖然有Selenium呢類工具,但Playwright支援跨瀏覽器、跨平台、跨語言,而且內置錄製同調試功能,對新手嚟講更方便。
作者用實戰角度介紹咗點樣喺Java同Python環境安裝Playwright、如何用codegen錄製腳本、用inspectior調試,最後仲列出咗常用嘅頁面操作方法,例如輸入、點擊、下拉選擇、鼠標事件、鍵盤操作、上傳文件、拖拽同懸浮等等。整體結論係:Playwright係一套功能齊全而且容易上手嘅自動化測試工具,尤其適合做Web同移動端測試。
- Playwright支援Chromium、WebKit同Firefox三大瀏覽器引擎,並提供同步同異步API,適合跨平台、跨語言嘅自動化測試。
- 安裝好簡單:Java用Maven加dependency,Python用pip安裝後再執行 playwright install 就搞掂瀏覽器驅動。
- 用 npx playwright codegen 可以錄製操作並自動生成腳本,支援Java、Python等多種語言輸出,新手可以慳返手寫時間。
- Playwright Inspectior係內置GUI調試工具,通過 page.pause() 啓動,可以逐步播放、檢查元素定位,解決腳本錯誤好方便。
- 常用操作包括fill、click、selectOption、dragTo、hover等,而且每個元素都有對應嘅locator方法,仲支援強制點擊同調度事件,靈活性高。
Playwright係乜嘢?點解值得學?
Playwright係微軟開源嘅自動化測試工具,支援Chrome、Firefox、Safari三大瀏覽器,仲可以喺Windows、Linux、macOS上面運行。佢提供同步同異步API,可以結合主流測試框架使用,仲有內置嘅腳本錄製同調試功能。
呢篇文嘅作者Foraemon係一位測試工程師,佢寫呢篇文係想幫初學者快速掌握Playwright嘅安裝、錄製同常用操作。文章嘅整體結論係:Playwright比起傳統工具好似Selenium,優勢在於跨瀏覽器、跨語言同內置工具鏈,好適合做Web自動化測試。
安裝Playwright:Java同Python兩種環境
如果你用Java,只要喺pom.xml加入Playwright嘅依賴,之後執行一個簡單嘅main方法就會自動下載瀏覽器二進制文件。作者提醒Maven中央倉庫係外網,下載可能會慢,建議改鏡像站。
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.25.0</version>
</dependency>
Python環境就簡單啲:先用pip install playwright裝庫,再執行python -m playwright install安裝瀏覽器驅動。呢兩個步驟搞掂之後就可以開始寫腳本。
腳本錄製同調試:新手最快上手方法
Playwright嘅codegen指令可以錄製操作並自動生成腳本。你需要先裝Node.js環境,然後執行 <code>npx playwright codegen https://example.com</code> 就會開一個瀏覽器視窗,你喺上面做嘅每一步操作都會即時轉成代碼。
錄製完成之後,你可以喺PLAYWRIGHT INSPECTIOR界面揀語言(例如Java),然後複製生成嘅腳本。作者話錄製+微調係最快嘅入門方式。
- 工具欄可以播放、停止、逐步執行腳本。
- 元素欄可以點擊「檢測器」再點擊頁面元素,即時顯示該元素嘅locator。
- 配合瀏覽器開發者工具(F12)可以進一步驗證定位是否正確。
常用方法:由創建瀏覽器到頁面操作
Playwright嘅核心概念包括瀏覽器對象(Browser)、瀏覽器上下文(BrowserContext)同頁面(Page)。上下文就好似一個獨立會話,每個測試用例都可以用獨立上下文,唔會互相干擾。
創建瀏覽器時可以指定 <code>setHeadless(false)</code> 顯示瀏覽器視窗,方便調試;或者用 <code>setHeadless(true)</code> 背景執行。以下係常見嘅頁面操作:
- 1 輸入操作:使用 <code>locator.fill(value)</code> 填入文字,適用於textbox、日期輸入等。
- 2 點擊操作:<code>locator.click()</code> 支援單擊、雙擊、右鍵、Shift+點擊等變體。
- 3 下拉選擇:<code>locator.selectOption()</code> 可以根據value或可見文本選擇。
- 4 鼠標事件:hover、拖拽(dragTo)、強制點擊(setForce(true))等。
- 5 鍵盤操作:用 <code>locator.press()</code> 模擬單鍵或組合鍵,例如 Ctrl+A。
- 6 上傳文件:<code>locator.setInputFiles()</code> 支援單一或多個檔案。
作者特別提到,大多數情況下用 <code>fill()</code> 就可以搞定輸入,如果唔得先考慮用 <code>type()</code> 模擬鍵盤按鍵。另外,拖拽同懸浮呢啲操作都已經封裝好,唔使額外寫JS執行。
總結:學識Playwright,提升測試效率
呢篇文章由安裝到進階操作都覆蓋咗,作者用自己嘅經驗示範咗點樣用Playwright做自動化測試。整體嚟講,Playwright嘅學習曲線比較平緩,而且內置工具齊全,好適合新手入門。
如果你係做Web測試或者接口測試,Playwright絕對值得花時間學。佢嘅跨瀏覽器同跨語言特性,可以幫你慳返好多重複工作。


軟開源自動化測試工具Playwright,支援主流瀏覽器,包括:Chrome、Firefox、Safari等,同時支援以無頭模式、有頭模式執行,並提供同步、異步嘅API,可以結合主流測試框架使用,並且支援瀏覽器端嘅自動化腳本錄製等功能。
特點:
🎯 1.Java 開發環境搭建
首先要明確嘅係Java環境係用maven管理項目嘅,所以我哋只需要喺項目入面揾到對應嘅pom文件,喺入面加以下內容:
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.25.0</version>
</dependency>就可以自動導入playwright。
P.S.:因為maven嘅中央倉庫係外網地址,下載好慢,要耐心等,或者改鏡像站,改做國內鏡像。
加demo.java內容如下:
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嘅瀏覽器二進制文件,如下咁樣:
🎯 2.Python開發環境搭建(網上教學好多,呢度唔多講)
1. 安裝Playwright依賴庫(Playwright支援Async/Await語法,所以要Python 3.7+)
pip install playwright
2. 安裝Chromium、Firefox、WebKit等瀏覽器嘅驅動文件(內置瀏覽器)
python -m playwright install
呢一章主要係介紹點樣錄製腳本,提供俾需要用錄製屏幕嘅人,如果唔鍾意覺得自己手寫更方便嘅同學可以 skip 呢章。
🎯 1.錄製環境安裝
同常見嘅自動化測試工具一樣,playwright都支援屏幕錄製同生成腳本。因為錄屏嘅時候需要node環境,所以要預先安裝。唔識嘅同學請自己百度,呢篇文唔詳細講。
確認node環境同版本:
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
P.S.:上面嘅url係我哋需要錄製嘅網站地址,請根據實際使用情況自行配置。

同樣playwright係支援多語言嘅,我哋可以喺錄製界面隨意切換自己需要嘅語言,呢篇文以Java為例,其餘唔演示。

接落嚟我哋只需要喺瀏覽器入面執行相關操作,playwright就會將我哋所有嘅操作記錄低。
下圖係喺首頁嘅輸入框入面輸入playwright並查詢。

當操作完成之後,我哋撳playwright嘅停止同複製就可以得到錄製好嘅腳本

我哋將複製好嘅腳本貼到編輯器入面,撳執行該腳本,通過執行之後就證明我哋錄製嘅腳本冇問題,可以保存。如果有問題,就透過調整代碼或者重新錄製嚟解決。
到呢度錄製環境安裝同腳本錄製完成。
🎯3.調試
如圖係playwright inspectior,我哋已經同佢見過一次面啦,大家應該都唔陌生。接落嚟詳細為大家介紹下佢,佢叫playwright inspectior,係playwright框架自帶嘅GUI工具,可以幫我哋調試腳本
3.1 點樣啟動playwright inspectior
喺腳本入面加page.pause()方法就可以啟動。
P.S.:其他方法呢篇文唔推薦,之後請自行研究。
3.2. 界面介紹
(1)工具欄介紹
(2)元素欄介紹
如圖所示,當我哋唔肯定頁面某個元素位置點樣獲取嘅時候,可以撳檢測器,然後喺頁面上撳該元素,就會喺輸入框入面顯示該元素。
亦都可以配合開發者小工具(F12)檢測你嘅元素是否正確。
3.3. 點樣調試
當腳本出現問題之後,我哋就可以用playwright inspectior做調試
第一步:喺你嘅腳本代碼入面加page.pause()方法,執行腳本。
第二步:等playwright inspectior成功啟動之後,我哋就可以用工具欄嘅播放、停止、逐步播放嚟確定問題所在
第三步:當確定係元素位置錯誤,我哋就可以用元素檢查器嚟確定正確嘅元素位置。
🎯 1.創建瀏覽器對象

.chromium().launch()方法就係指創建一個Google瀏覽器,同樣創建Firefox就係.firefox().launch()
.setHeadless(false)方法係指喺創建瀏覽器嘅時候,揀無頭瀏覽器(true)定係有頭瀏覽器(false)。
無頭瀏覽器:後台執行,唔喺顯示器顯示腳本操作
有頭瀏覽器:喺顯示器上面展示腳本所有操作
🎯 2.創建瀏覽器上下文
瀏覽器上下文對象係瀏覽器實例入面一個類似隱身模式嘅會話,簡單講就係呢個上下文資源係完全獨立嘅,同其他上下文互不幹擾,所以喺自動化測試入面,可以對每一個測試用例都單獨開一個瀏覽器上下文。呢個對多用戶、多場景嘅測試好有用。

🎯 3.創建頁面
page就係瀏覽器入面嘅標籤頁,一個page對象就可以同當前頁面內容交互

🎯 4.常見頁面操作事件
呢部分主要演示常見嘅頁面操作,例如:文字輸入、撳、鍵盤輸入、上傳檔案、聚焦等等
1、輸入操作
語法:Locator.fill(value)
使用場景:文本框、日期/時間、日曆控件等輸入框
page.locator("#kw").fill("playwright");2、撳操作
語法:Locator.click()
適用場景:單選框、複選框、按鈕控件、常見可撳控件等等!
page.locator("#kw").click();//單選款 (選中,已選中狀態下無效)
page.locator(".Volvo").setChecked(true);
page.locator(".Volvo").check();
System.out.println(page.locator(".Volvo").isChecked());
//複選框(選中,已選中狀態下無效)
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、鼠標事件5、鼠標事件
語法:詳見案例
適用場景:常見鼠標撳事件
//常規單擊
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));
//強制點擊
page.locator("#mouse2").click(new Locator.ClickOptions().setForce(true));
//調度點擊事件來觸發點擊
page.locator("#mouse2").dispatchEvent("click");6、模擬鍵盤輸入字符操作
語法:Locator.type(value)
使用場景:模擬鍵盤輸入字符
p.s.:大多數時候,Page.fill()可以滿足要求。如果輸入唔到,可以考慮鍵入字符操作。
page.locator("#user").type("playwright");7、單元素鍵盤事件操作
語法:Locator.press(鍵盤事件)
使用場景:定位元素並產生單個鍵盤事件
//模擬Ctrl+A 全選操作
page.locator("#user").press("Control+A");
//模擬回車操作 == > 跳轉到百度頁面
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();



軟開源自動化測試工具Playwright,支持主流瀏覽器,包括:Chrome、Firefox、Safari 等,同時支持以無頭模式、有頭模式運行,並提供了同步、異步的 API,可以結合主流測試框架使用,並且支持瀏覽器端的自動化腳本錄製等功能。
特點:
🎯 1.Java 開發環境搭建
首先需要明確的是Java環境是使用maven管理項目的,所以我們只需用在項目中找到對應的pom文件在其中添加如下內容:
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.25.0</version>
</dependency>就可以自動導入playwright。
Ps:因為maven的中央倉庫是外網地址,下載很慢需耐心等待,或者在修改鏡像站,改為國內鏡像。
添加demo.java內容如下:
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 的瀏覽器二進制文件,如下所示:
🎯 2.Python開發環境搭建(網上教程很多此處不做過多說明)
1. 安裝Playwright依賴庫(Playwright支持Async\Await語法,故需要Python3.7+)
pip install playwright
2. 安裝Chromium、Firefox、WebKit等瀏覽器的驅動文件(內置瀏覽器)
python -m playwright install
此章主要是介紹如何錄製腳本,提供給需要使用錄製屏幕的人,若是不喜歡覺得自己手寫更方便的同學可以跳過此章。
🎯 1.錄製環境安裝
如同常見的自動化測試工具一樣,playwright同樣支持屏幕錄製並生成腳本。因為錄屏時需要node環境,所以請提前安裝。不會的同學請自行度娘,本文不做詳述。
確認node環境及版本:
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 是我們需要錄製的網站地址,請根據實際使用情況自行配置。

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

接下來我們只需要在瀏覽器中執行相關操作,playwright就會把我們所有的操作記錄下來。
下圖中為在首頁的輸入框中輸入playwright並查詢。

當操作完成之後,我們點擊playwright的停止和複製就可以得到錄製好的腳本

我們把複製好的腳本粘貼到編輯器中,點擊運行該腳本,通過運行後就證明我們錄製的腳本沒有問題,可以保存。如果有,則通過調整代碼或者推倒重新錄製即可解決。
至此錄製環境安裝和腳本錄製完成。
🎯3.調試
如圖是playwright inspectior,我們已經和它見過一次面了,大家應該也不陌生。接下來詳細的為大家介紹一下它,它叫playwright inspectior是playwright框架自帶的GUI工具,可以幫助我們調試腳本
3.1 如何啓動playwright inspectior
在腳本中添加page.pause()方法即可啓動.
Ps: 其他方法本文不做推薦,後期請自行研究。
3.2. 界面介紹
(1)工具欄介紹
(2)元素欄介紹
如圖所示,當我們不確定頁面某個元素位置怎麼獲取時,可點擊檢測器,然後在頁面上點擊該元素,即可在輸入框中展示該元素。
也可以配合開發者小工具(F12)檢測你的元素否正確。
3.3. 如何調試
當腳本出現問題之後,我們就可以使用playwright inspectior做調試
第一步:在你的腳本代碼中添加page.pause()方法,運行腳本。
第二步:等待playwright inspectior成功啓動之後,我們就能使用工具欄 播放、停止、逐步播放來確定問題所在
第三步:當確定時元素位置錯誤,我們就能使用元素檢查器來確定正確的元素位置。
🎯 1.創建瀏覽器對象

.chromium().launch()方法就是指創建一個谷歌瀏覽器,同樣創建火狐就是.firefox().launch()
.setHeadless(false)方法是指在創建瀏覽器的時候,選擇無頭瀏覽器(true)還是帶頭瀏覽器(false)。
無頭瀏覽器:後台運行,不在顯示器顯示腳本操作
有頭瀏覽器:在顯示器上展示腳本所有操作
🎯 2.創建瀏覽器上下文
瀏覽器上下文對象是瀏覽器實例中一個類似於隱身模式的會話,簡單說就是該上下文資源是完全獨立的,與其他的上下文互不干擾,所以在自動化測試中,可以對每一個測試用例都單獨開一個瀏覽器上下文。這對於多用戶,多場景的測試非常有用。

🎯 3.創建頁面
page就是瀏覽器中的標籤頁,一個page對象就可以當前頁面內容交互

🎯 4.常見頁面操作事件
這部分主要演示的常見頁面操作,例如:文本輸入、點擊、鍵盤鍵入、上傳文件、聚焦等等
1、輸入操作
語法:Locator.fill(value)
使用場景:文本框、日期/時間、日曆控件等輸入框
page.locator("#kw").fill("playwright");2、點擊操作
語法:Locator.click()
適用場景:單選框、複選框、按鈕控件、常見可點擊控件等等!
page.locator("#kw").click();//單選款 (選中,已選中狀態下無效)
page.locator(".Volvo").setChecked(true);
page.locator(".Volvo").check();
System.out.println(page.locator(".Volvo").isChecked());
//複選框(選中,已選中狀態下無效)
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、鼠標事件5、鼠標事件
語法:詳見案例
適用場景:常見鼠標點擊事件
//常規單擊
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));
//強制點擊
page.locator("#mouse2").click(new Locator.ClickOptions().setForce(true));
//調度點擊事件來觸發點擊
page.locator("#mouse2").dispatchEvent("click");6、模擬鍵盤輸入字符操作
語法:Locator.type(value)
使用場景:模擬鍵盤輸入字符
ps:大多數時候,Page.fill()可以滿足要求。如不能輸入時,可以考慮鍵入字符操作。
page.locator("#user").type("playwright");7、單元素鍵盤事件操作
語法:Locator.press(鍵盤事件)
使用場景:定位元素併產生單個鍵盤事件
//模擬Ctrl+A 全選操作
page.locator("#user").press("Control+A");
//模擬回車操作 == > 跳轉到百度頁面
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();
