Skip to main content

偵錯測試

Playwright Inspector​

Playwright Inspector 是一個 GUI 工具，可以幫助您偵錯 Playwright 測試。它讓您可以逐步執行測試、即時編輯定位器、挑選定位器並查看可操作性記錄。

Playwright Inspector

在偵錯模式中執行​

設定 PWDEBUG 環境變數以在偵錯模式下執行您的 Playwright 測試。這會設定 Playwright 進行偵錯並開啟檢查器。當設定 PWDEBUG=1 時，會設定額外的實用預設值：

  • 瀏覽器以有頭模式啟動
  • 預設逾時設定為 0（= 無逾時）
PWDEBUG=1 dotnet test

逐步執行您的測試​

您可以使用檢查器頂部的工具列來播放、暫停或逐步執行測試的每個動作。您可以看到測試程式碼中突出顯示的目前動作，以及瀏覽器視窗中突出顯示的匹配元素。

Playwright Inspector and browser

從特定斷點執行測試​

為了加速偵錯過程，您可以在測試中加入 Page.PauseAsync() 方法。這樣您就不需要逐步執行測試的每個動作，直到達到您想要偵錯的位置。

await page.PauseAsync();

加入 page.pause() 呼叫後，在偵錯模式下執行您的測試。點選檢查器中的「Resume」按鈕將執行測試並只在 page.pause() 處停止。

test with page.pause

即時編輯定位器​

在偵錯模式下執行時，您可以即時編輯定位器。在「Pick Locator」按鈕旁邊有一個欄位顯示測試暫停所在的定位器。您可以直接在 Pick Locator 欄位中編輯此定位器，匹配的元素將在瀏覽器視窗中突出顯示。

live editing locators

挑選定位器​

在偵錯時，您可能需要選擇更有彈性的定位器。您可以透過點選 Pick Locator 按鈕並將滑鼠懸停在瀏覽器視窗中的任何元素上來做到這一點。當將滑鼠懸停在元素上時，您會看到定位此元素所需的程式碼在下方突出顯示。點選瀏覽器中的元素會將定位器加入到欄位中，然後您可以調整它或將其複製到您的程式碼中。

Picking locators

Playwright 會檢視您的頁面並找出最佳的定位器，優先使用角色、文字和測試 ID 定位器。如果 Playwright 找到多個符合該定位器的元素，它會改進定位器使其具有彈性並唯一識別目標元素，因此您不必擔心因定位器導致測試失敗。

可操作性記錄​

當 Playwright 在點選動作上暫停時，它已經執行了可在記錄中找到的可操作性檢查。這可以幫助您了解測試期間發生了什麼事，以及 Playwright 做了什麼或試圖做什麼。記錄會告訴您元素是否可見、啟用且穩定，定位器是否解析為元素、是否滾動到檢視中等等。如果無法達到可操作性，它會將動作顯示為擱置狀態。

Actionability Logs

Trace Viewer​

Playwright Trace Viewer 是一個 GUI 工具，讓您可以探索錄製的 Playwright 測試追蹤。您可以在左側前後瀏覽每個動作，並直觀地看到動作期間發生的事情。在螢幕中間，您可以看到該動作的 DOM 快照。在右側，您可以看到動作詳情，例如時間、參數、回傳值和記錄。您也可以探索主控台訊息、網路請求和原始碼。

要了解更多關於如何錄製追蹤和使用 Trace Viewer 的資訊，請查看 Trace Viewer 指南。

瀏覽器開發者工具​

使用 PWDEBUG=console 在偵錯模式下執行時，開發者工具主控台中會提供 playwright 物件。開發者工具可以幫助您：

  • 檢查 DOM 樹並尋找元素選擇器
  • 查看主控台記錄執行期間（或學習如何透過 API 讀取記錄）
  • 檢查網路活動和其他開發者工具功能

這也會將 Playwright 的預設逾時設定為 0（= 無逾時）。

Browser Developer Tools with Playwright object

要使用瀏覽器開發者工具偵錯您的測試，請先使用 Page.PauseAsync() 方法在測試中設定斷點以暫停執行。

await page.PauseAsync();

在測試中設定斷點後，您可以使用 PWDEBUG=console 執行測試。

PWDEBUG=console dotnet test

Playwright 啟動瀏覽器視窗後，您可以開啟開發者工具。playwright 物件將在主控台面板中可用。

playwright.$(selector)​

查詢 Playwright 選擇器，使用實際的 Playwright 查詢引擎，例如：

playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)​

與 playwright.$ 相同，但會回傳所有匹配的元素。

playwright.$$('li >> text=John')

[<li>, <li>, <li>, <li>]

playwright.inspect(selector)​

在元素面板中顯示元素。

playwright.inspect('text=Log in')

playwright.locator(selector)​

建立定位器並查詢匹配的元素，例如：

playwright.locator('.auth-form', { hasText: 'Log in' });

Locator ()
  - element: button
  - elements: [button]

playwright.selector(element)​

為給定的元素產生選擇器。例如，在元素面板中選擇一個元素並傳遞 $0：

playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

詳細 API 記錄​

Playwright 使用 DEBUG 環境變數支援詳細記錄。

DEBUG=pw:api dotnet run
note

對於 WebKit：在執行期間啟動 WebKit Inspector 會阻止 Playwright 指令碼進一步執行，並會重設預先設定的使用者代理和裝置模擬。

有頭模式​

Playwright 預設在無頭模式下執行瀏覽器。要改變此行為，請使用 headless: false 作為啟動選項。

您也可以使用 SlowMo 選項來減慢執行速度（每個操作 N 毫秒），並在偵錯時跟隨。

// Chromium, Firefox, or WebKit
await using var browser = await playwright.Chromium.LaunchAsync(new()
{
    Headless = false,
    SlowMo = 100
});