跳到主要內容

偵錯測試

VS Code 偵錯器​

我們建議使用 VS Code 擴充套件進行偵錯，以獲得更好的開發者體驗。透過 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

在不同的瀏覽器中偵錯​

預設情況下，偵錯是使用 Chromium 設定檔完成的。您可以透過在測試側邊欄中的偵錯圖示上點擊滑鼠右鍵，然後從下拉選單中點擊 'Select Default Profile' (選擇預設設定檔) 選項，在不同的瀏覽器上偵錯測試。

debugging on specific profile

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

choosing a profile for debugging

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

Playwright Inspector​

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

Playwright Inspector

以偵錯模式執行​

使用 --debug 標誌執行測試以開啟 Inspector。這會將 Playwright 配置為偵錯模式並開啟 Inspector。當使用 --debug 時，會配置其他有用的預設值。

  • 瀏覽器以 Headed 模式啟動
  • 預設超時設定為 0 (= 無超時)

在所有瀏覽器上偵錯所有測試​

若要偵錯所有測試，請使用 --debug 標誌執行測試命令。這將逐一執行測試，並為每個測試開啟 Inspector 和瀏覽器視窗。

npx playwright test --debug

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

若要在特定行上偵錯單一測試，請執行測試命令，後接測試檔案名稱和您要偵錯的測試行號，然後加上 --debug 標誌。這將在您的 playwright.config 中配置的每個瀏覽器中執行單一測試，並開啟 Inspector。

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 頂部的工具列來播放、暫停或逐步執行測試的每個動作。您可以在測試程式碼中看到目前動作的反白顯示，以及在瀏覽器視窗中看到匹配元素的反白顯示。

Playwright Inspector and browser

從特定中斷點執行測試​

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

await page.pause();

一旦您加入 page.pause() 呼叫，請以偵錯模式執行測試。點擊 Inspector 中的 "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)​

在 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 npx playwright test
注意

對於 WebKit：在執行期間啟動 WebKit Inspector 將阻止 Playwright 腳本進一步執行，並將重置預先配置的使用者代理程式和裝置模擬。

Headed 模式​

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

您也可以使用 slowMo 選項來減慢執行速度 (每個操作 N 毫秒)，並在偵錯時跟蹤。

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