跳到主要內容

偵錯測試

Playwright Inspector​

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

Playwright Inspector

在偵錯模式下執行​

設定 PWDEBUG 環境變數，以在偵錯模式下執行 Playwright 測試。這會將 Playwright 設定為偵錯模式，並開啟 Inspector。當設定 PWDEBUG=1 時，會設定其他有用的預設值

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

逐步執行測試​

您可以使用 Inspector 頂端的工具列，播放、暫停或逐步執行測試的每個動作。您可以在測試程式碼中看到目前醒目提示的動作，並在瀏覽器視窗中看到醒目提示的相符元素。

Playwright Inspector and browser

從特定中斷點執行測試​

若要加速偵錯程序，您可以將 Page.PauseAsync() 方法新增至您的測試。如此一來，您就不必逐步執行測試的每個動作，即可到達您要偵錯的點。

await page.PauseAsync();

一旦您新增 page.pause() 呼叫，請在偵錯模式下執行您的測試。按一下 Inspector 中的「繼續」按鈕，將會執行測試，且只會在 page.pause() 上停止。

test with page.pause

即時編輯定位器​

在偵錯模式下執行時，您可以即時編輯定位器。「選取定位器」按鈕旁邊有一個欄位，顯示測試暫停時的定位器。您可以直接在選取定位器欄位中編輯此定位器，且相符的元素將會在瀏覽器視窗中醒目提示。

live editing locators

選取定位器​

偵錯時，您可能需要選擇更具彈性的定位器。您可以按一下選取定位器按鈕，並將滑鼠游標停留在瀏覽器視窗中的任何元素上來執行此動作。當您將滑鼠游標停留在元素上方時，您會在下方看到醒目提示的程式碼，以找出此元素。按一下瀏覽器中的元素會將定位器新增至欄位中，然後您可以在其中調整或將其複製到您的程式碼中。

Picking locators

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

可操作性記錄​

當 Playwright 在按一下動作上暫停時，它已執行可操作性檢查，可在記錄中找到。這可以協助您了解測試期間發生的情況，以及 Playwright 已執行或嘗試執行的動作。記錄會告訴您元素是否可見、已啟用且穩定，定位器是否已解析為元素、捲動至檢視畫面等等。如果無法達成可操作性，它會將動作顯示為擱置中。

Actionability Logs

追蹤檢視器​

Playwright 追蹤檢視器是一個 GUI 工具，可讓您探索已錄製的測試 Playwright 追蹤。您可以向後和向前瀏覽左側的每個動作，並以視覺方式查看動作期間發生的情況。在螢幕中間，您可以看到動作的 DOM 快照。在右側，您可以看到動作詳細資料，例如時間、參數、傳回值和記錄。您也可以探索主控台訊息、網路要求和原始碼。

若要深入了解如何錄製追蹤和使用追蹤檢視器，請查看追蹤檢視器指南。

瀏覽器開發人員工具​

當在偵錯模式下使用 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
注意

對於 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
});