偵錯測試

VS Code 偵錯工具

我們建議使用 VS Code 擴充套件 來進行偵錯，以獲得更好的開發者體驗。有了 VS Code 擴充套件，你可以直接在 VS Code 中偵錯你的測試，查看錯誤訊息，設置斷點並逐步執行你的測試。

錯誤訊息

如果你的測試失敗，VS Code 會在編輯器中直接顯示錯誤訊息，顯示預期的結果、實際接收到的結果以及完整的呼叫日誌。

即時除錯

您可以在 VS Code 中即時偵錯您的測試。在勾選 Show Browser 選項後執行測試，點擊 VS Code 中的任意定位器，它將在瀏覽器視窗中被高亮顯示。Playwright 也會顯示是否有多個匹配。

您也可以在 VS Code 中編輯定位器，Playwright 會在瀏覽器視窗中即時顯示變更。

選擇定位器

選擇一個 locator 並通過點擊測試側邊欄中的 Pick locator 按鈕將其複製到你的測試檔案中。然後在瀏覽器中點擊你需要的元素，它現在會顯示在 VS Code 的 Pick locator 框中。按下鍵盤上的 'enter' 鍵將定位器複製到剪貼簿，然後將其粘貼到程式碼中的任何位置。或者如果你想取消，請按 'escape'。

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

執行在除錯模式下

要設定中斷點，請點擊您希望中斷點所在行號旁邊，直到出現一個紅點。通過右鍵點擊您希望執行的測試旁邊的行，在偵錯模式下執行測試。

打開瀏覽器視窗，測試將會執行並在設定斷點的地方暫停。你可以在 VS Code 的選單中逐步執行測試、暫停測試並重新執行測試。

在不同瀏覽器中除錯

預設情況下，偵錯是使用 Chromium 配置檔進行的。您可以通過右鍵單擊測試側邊欄中的偵錯圖標，然後從下拉選單中單擊 'Select Default Profile' 選項，在不同的瀏覽器上偵錯您的測試。

然後選擇您想要用來偵錯測試的測試配置檔。每次在偵錯模式下執行測試時，它將使用您選擇的配置檔。您可以通過右鍵點擊測試所在的行號，並從菜單中選擇 'Debug Test' 來在偵錯模式下執行測試。

要了解更多關於除錯的資訊，請參見 Debugging in Visual Studio Code。

Playwright Inspector

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

在除錯模式下執行

執行你的測試並使用 --debug 旗標來開啟檢查器。這會配置 Playwright 進行偵錯並開啟檢查器。當使用 --debug 時，會配置其他有用的預設值:

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

偵錯所有瀏覽器上的所有測試

要偵錯所有測試，請使用 --debug 旗標執行測試命令。這將逐一執行測試，並為每個測試打開檢查器和瀏覽器窗口。

npx playwright test --debug

在所有瀏覽器上偵錯一個測試

要在特定行上偵錯一個測試，請執行測試命令，後跟測試檔案的名稱和您要偵錯的測試行號，然後是 --debug 旗標。這將在每個配置在您的 playwright.config 中的瀏覽器中執行單個測試並打開檢查器。

npx playwright test example.spec.ts:10 --debug

在特定瀏覽器上除錯

在 Playwright 中，你可以在你的playwright.config中配置專案。一旦配置完成，你可以使用 --project 旗標，後接在你的 playwright.config 中配置的專案名稱，來在特定的瀏覽器或行動裝置視窗中偵錯你的測試。

npx playwright test --project=chromium --debug
npx playwright test --project="Mobile Safari" --debug
npx playwright test --project="Microsoft Edge" --debug

偵錯一個特定瀏覽器上的測試

要在特定瀏覽器上執行一個測試，請添加測試檔案的名稱和您要偵錯的測試行號，以及 --project 旗標，後面跟著專案的名稱。

npx playwright test example.spec.ts:10 --project=webkit --debug

逐步執行你的測試

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

從特定的斷點執行測試

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

await page.pause();

一旦你添加了 page.pause() 呼叫，請在除錯模式下執行你的測試。點擊 Inspector 中的 "Resume" 按鈕將會執行測試並只在 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（= 無超時）。

要使用瀏覽器開發者工具來除錯你的測試，首先在你的測試中設置一個斷點以使用 page.pause() 方法來暫停執行。

await page.pause();

一旦你在測試中設置了一個斷點，你可以使用 PWDEBUG=console 來執行你的測試。

Bash

PWDEBUG=console npx playwright test

PowerShell

$env:PWDEBUG="console"
npx playwright test

Batch

set PWDEBUG=console
npx playwright 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 環境變數進行詳細日誌記錄。

Bash

DEBUG=pw:api npx playwright test

PowerShell

$env:DEBUG="pw:api"
npx playwright test

Batch

set DEBUG=pw:api
npx playwright test

note

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

Headed mode

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

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

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });