Skip to main content

偵錯測試

Playwright Inspector​

Playwright Inspector 是一個 GUI 工具，可以幫助你偵錯 Playwright 測試。它允許你逐步執行測試、即時編輯定位器、選擇定位器並查看可操作性日誌。

Playwright Inspector

在除錯模式下執行​

將 PWDEBUG 環境變數設置為在偵錯模式下執行你的 Playwright 測試。這會配置 Playwright 進行偵錯並打開檢查器。當設置 PWDEBUG=1 時，會配置其他有用的預設值:

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

逐步執行你的測試​

您可以使用 Inspector 頂部的工具欄來播放、暫停或逐步執行測試的每個動作。您可以在測試程式碼中看到當前動作被突出顯示，並且在瀏覽器視窗中匹配的元素也會被突出顯示。

Playwright Inspector 和瀏覽器

從特定的斷點執行測試​

為了加速除錯過程，你可以在測試中加入 Page.PauseAsync() 方法。這樣你就不必逐步執行測試的每個動作來到達你想要除錯的點。

await page.PauseAsync();

一旦你添加了 page.pause() 呼叫，請在除錯模式下執行你的測試。點擊 Inspector 中的 "Resume" 按鈕將會執行測試並只在 page.pause() 停止。

測試與 page.pause

即時編輯定位器​

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

選擇定位器​

在除錯時，你可能需要選擇一個更具彈性的定位器。你可以通過點擊 Pick Locator 按鈕並將滑鼠懸停在瀏覽器視窗中的任何元素上來完成此操作。當滑鼠懸停在某個元素上時，你會在下方看到定位此元素所需的程式碼被高亮顯示。點擊瀏覽器中的元素會將定位器添加到欄位中，然後你可以調整它或將其複製到你的程式碼中。

Playwright 會查看你的頁面並找出最佳定位器，優先考慮角色、文本和測試 ID 定位器。如果 Playwright 找到多個匹配定位器的元素，它會改進定位器，使其具有彈性並唯一識別目標元素，因此你不必擔心因定位器而導致測試失敗。

可操作性日誌​

在 Playwright 暫停點擊動作時，它已經執行了可以在日誌中找到的actionability checks。這可以幫助你了解測試期間發生了什麼以及 Playwright 做了什麼或試圖做什麼。日誌會告訴你元素是否可見、啟用和穩定，定位器是否解析為元素、滾動到視圖中，還有更多。如果無法達到行動性，它會顯示該行動為待處理。

Trace Viewer​

Playwright Trace Viewer 是一個 GUI 工具，讓你探索測試中記錄的 Playwright Traces。你可以在左側來回瀏覽每個動作，並直觀地看到動作期間發生的事情。在螢幕中間，你可以看到該動作的 DOM 快照。在右側，你可以看到動作的詳細資訊，如時間、參數、返回值和日誌。你還可以探索主控台訊息、網路請求和原始程式碼。

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

瀏覽器開發者工具​

當以 Debug 模式並使用 PWDEBUG=console 執行時，開發者工具的控制台中會有一個 playwright 物件可用。開發者工具可以幫助你：

  • 檢查 DOM 樹並找到元素選擇器
  • 查看執行期間的控制台日誌（或學習如何通過 API 閱讀日誌）
  • 檢查網路活動和其他開發者工具功能

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

瀏覽器開發者工具與 Playwright 物件

要使用瀏覽器開發者工具偵錯測試，首先在測試中設置一個斷點以使用 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)​

在 Elements 面板中顯示元素。

playwright.inspect('text=Log in')

playwright.locator(selector)​

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

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

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

playwright.selector(element)​

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

playwright.selector($0)

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

冗長的 API 日誌​

Playwright 支援使用 DEBUG 環境變數進行詳細日誌記錄。

DEBUG=pw:api dotnet run
note

對於 WebKit: 在執行期間啟動 WebKit Inspector 將會阻止 Playwright 腳本繼續執行，並且會重置預先配置的使用者代理和裝置模擬。

Headed mode​

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

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

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