Skip to main content

偵錯測試

VS Code 偵錯器​

我們建議使用 VS Code Extension 進行偵錯，以獲得更好的開發者體驗。使用 VS Code 擴充功能，您可以在 VS Code 中直接偵錯測試、查看錯誤訊息、設定斷點並逐步執行測試。

running test in debug mode

錯誤訊息​

如果您的測試失敗，VS Code 會在編輯器中顯示錯誤訊息，包括預期值、實際值以及完整的呼叫記錄。

error messaging in vs code

即時偵錯​

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

live debugging in VS Code

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

live debugging in VS Code

挑選定位器​

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

Pick locators

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

在偵錯模式中執行​

要設定斷點，請點選您要設置斷點的行號旁邊，直到出現紅點。透過右鍵點選您想要執行的測試旁邊的行，在偵錯模式下執行測試。

setting debug test mode

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

running test in debug mode

使用 Chrome DevTools 偵錯測試​

在 VS Code 中選擇 Run Test 而不是使用 Debug Test。啟用 Show Browser 後，瀏覽器工作階段會被重複使用，讓您可以開啟 Chrome DevTools 持續偵錯測試和網頁應用程式。

在不同瀏覽器中偵錯​

預設情況下，偵錯使用 Chromium 設定檔進行。您可以透過右鍵點選測試側邊欄中的偵錯圖示，並從下拉選單中點選 'Select Default Profile' 選項，在不同瀏覽器上偵錯測試。

debugging on specific profile

然後選擇您想要用於偵錯測試的測試設定檔。每次在偵錯模式下執行測試時，都會使用您選擇的設定檔。您可以透過右鍵點選測試所在的行號並從選單中選擇 'Debug Test' 來在偵錯模式下執行測試。

choosing a profile for debugging

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

Playwright Inspector​

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

Playwright Inspector

在偵錯模式中執行​

使用 --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

逐步執行您的測試​

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

Playwright Inspector and browser

從特定斷點執行測試​

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

await page.pause();

一旦您新增了 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.pause() 方法在測試中設定斷點來暫停執行。

await page.pause();

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

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)​

在元素面板中顯示元素。

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