微軟出品自動化神器Playwright，不用寫一行程式碼（Playwright+Java）系列（二） 之指令碼的錄製及偵錯詳解

寫在前面

一週前，寫了關於Playwright環境搭建及指令碼錄製的簡單使用，反饋還是不錯的。

有不少粉絲給我留言說：

覺得沒看夠，能不能再講下指令碼的錄製使用？

答案是肯定的，有人願意看，我就可以寫，當然，如果您看完願意幫我再朋友圈轉發一波，那我真的是感激不盡了。

再談指令碼錄製

話不多說，下面我們將開始進行講解指令碼的錄製，請跟上腳步，相信我這一切並不難。

偵錯工具

Playwright Inspector 是框架中自帶的GUI工具，可以輔助我們偵錯Playwright指令碼。

三種方式啟動Playwright Inspector

1、設定環境變數PWDEBUG方式啟動

在debug模式下執行指令碼檔案。會進入Playwright的偵錯模式並開啟Playwright Inspector

範例引數如下：

# Bash
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test

# PowerShell
$env:PLAYWRIGHT_JAVA_SRC="<java source dirs>"
$env:PWDEBUG=1
mvn test

# Batch
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
set PWDEBUG=1
mvn test

2、通過命令列啟動

在 Playwright CLI中使用open或命令：codegen

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen your address"

3、新增page.pause()方法方式啟動

在你的指令碼中新增page.pause()方法，且是必須為有頭模式啟動瀏覽器，則會進入偵錯模式（也就是斷點。可以這麼理解的吧）

page.pause();

以上三種方式啟動後，會自動啟動Playwright Inspector，然後按照自己需求錄製指令碼，錄製完後，再次點選Record，點選Copy即可生成指令碼，不熟悉的同學請移步至《微軟出品自動化神器Playwright，不用寫一行程式碼（Playwright+Java）系列（一） 之 環境搭建及指令碼錄製》

4、部分引數詳解

設定時會設定其他有用的預設值PWDEBUG=1：

• 瀏覽器以 headed 模式啟動
• 預設超時設定為 0（= 無超時）

使用PWDEBUG=console將設定瀏覽器以在開發者工具控制檯中進行偵錯：

• 帶頭執行：瀏覽器始終以帶頭模式啟動
• 禁用超時：將預設超時設定為 0（= 無超時）
• 控制檯助手：在瀏覽器中設定一個playwright物件以生成和突出顯示Playwright 選擇器。這可用於驗證文字或複合選擇器。

指令碼的偵錯

同所有的IDE一樣，Playwright Inspector可以對Playwright指令碼進行偵錯

工具列從左到右依次為，直接回放指令碼、暫停（F8），F10逐語句執行

1、開啟開發者模式

在 headed 模式下執行 Playwright 指令碼，通過以下語句進入開發者模式，範例程式碼如下：

chromium.launch(new BrowserType.LaunchOptions().setDevtools(true));

2、減慢執行速度輔助偵錯

Playwright 預設以無頭模式執行瀏覽器。要更改此行為，請headless: false用作啟動選項。您還可以使用該slowMo選項來減慢執行速度並在偵錯時跟進。

chromium.launch(new BrowserType.LaunchOptions() // or firefox, webkit
  .setHeadless(false)
  .setSlowMo(100));

寫在最後

到此關於Playwright指令碼的錄製及偵錯已分享完畢，有興趣的同學可以自行嘗試，另想一起學習的Playwright同學可以加我好友一起學習交流哦。

當然，如果有其他想學習的技術，也可以文末留言或者後臺發給我，我也可以專門為您寫一篇文章並在公號發表。

有些同學會問了，真的嗎？

當然，可以寫，但是也需要您的轉發和分享，碼字不易，多謝轉發、分享！