Skip to main content

執行和偵錯測試

簡介

使用 Playwright,你可以執行單一測試、一組測試或所有測試。測試可以使用 --project 旗標在一個瀏覽器或多個瀏覽器上執行。測試預設是平行執行的,並且以無頭模式執行,這意味著在執行測試時不會開啟瀏覽器視窗,結果將在終端機中顯示。然而,你可以使用 --headed CLI 參數在有頭模式下執行測試,或者你可以使用 --ui 旗標在 UI 模式 下執行測試。查看完整的測試追蹤,包括監看模式、時間旅行除錯等。

你將學到

執行測試

命令列

你可以使用 playwright test 指令來執行你的測試。這將會根據 playwright.config 檔案中的設定在所有瀏覽器上執行你的測試。測試預設在無頭模式下執行,這意味著在執行測試時不會開啟瀏覽器視窗,結果將會顯示在終端機。

npx playwright test

測試執行於命令列

在 UI 模式中執行測試

我們強烈建議使用 UI Mode 來執行你的測試,以獲得更好的開發者體驗,你可以輕鬆地逐步查看測試的每一步,並在每一步之前、期間和之後直觀地看到發生了什麼。UI mode 還附帶許多其他功能,如定位器選擇器、監看模式等。

npx playwright test --ui

UI Mode

查看或關於 UI 模式的詳細指南以了解更多其功能。

在有頭模式下執行測試

要在有頭模式下執行你的測試,使用 --headed 旗標。這將使你能夠直觀地看到 Playwright 如何與網站互動。

npx playwright test --headed

在不同瀏覽器上執行測試

要指定您希望在哪個瀏覽器上執行測試,請使用 --project 旗標,後接瀏覽器的名稱。

npx playwright test --project webkit

要指定多個瀏覽器來執行你的測試,請多次使用 --project 旗標,並在其後加上每個瀏覽器的名稱。

npx playwright test --project webkit --project firefox

執行特定測試

要 執行 單個 測試 文件, 請 傳入 您 想要 執行 的 測試 文件 名稱。

npx playwright test landing-page.spec.ts

要執行來自不同目錄的一組測試文件,請傳入您想要執行測試的目錄名稱。

npx playwright test tests/todo-page/ tests/landing-page/

要執行檔案名稱中包含 landinglogin 的檔案,只需將這些關鍵字傳遞給 CLI。

npx playwright test landing login

要執行具有特定標題的測試,請使用 -g 旗標,後接測試的標題。

npx playwright test -g "add a todo item"

執行最後失敗的測試

要僅執行上次測試中失敗的測試,首先執行你的測試,然後使用 --last-failed 旗標再次執行它們。

npx playwright test --last-failed

在 VS Code 中執行測試

測試可以直接從 VS Code 執行,使用 VS Code 擴充套件。安裝後,你可以簡單地點擊你想要執行的測試旁邊的綠色三角形,或從測試側邊欄執行所有測試。查看我們的 VS Code 快速入門 指南以獲取更多詳細資訊。

Playwright VS Code 擴充功能

除錯測試

由於 Playwright 在 Node.js 中執行,你可以使用你選擇的除錯工具來除錯,例如使用 console.log 或在你的 IDE 中,或直接在 VS Code 中使用 VS Code 擴充套件。Playwright 附帶 UI Mode,在這裡你可以輕鬆地逐步執行每一步測試,查看日誌、錯誤、網路請求、檢查 DOM 快照等。你也可以使用 Playwright Inspector,它允許你逐步執行 Playwright API 呼叫,查看其除錯日誌並探索定位器

在 UI 模式中偵錯測試

我們強烈建議使用UI Mode來偵錯您的測試,以獲得更好的開發者體驗,您可以輕鬆地逐步查看測試的每一步,並直觀地看到每一步之前、期間和之後發生的事情。UI mode 還附帶許多其他功能,例如定位器選擇器、監視模式等。

npx playwright test --ui

顯示錯誤在 ui 模式

在除錯時,你可以使用 Pick Locator 按鈕來選擇頁面上的元素,並查看 Playwright 將用於查找該元素的定位器。你還可以在定位器 playground 中編輯定位器,並在瀏覽器視窗中即時查看其高亮顯示。使用 Copy Locator 按鈕將定位器複製到剪貼簿,然後將其粘貼到你的測試中。

pick locator in ui mode

查看我們的詳細 UI 模式指南以了解更多關於其功能的資訊。

使用 Playwright Inspector 偵錯測試

要偵錯所有測試,執行 Playwright 測試命令並加上 --debug 旗標。

npx playwright test --debug

除錯測試使用 Playwright 檢查器

此指令將開啟一個瀏覽器視窗以及 Playwright Inspector。你可以使用 Inspector 頂部的步過按鈕逐步執行你的測試。或者,按下播放按鈕從頭到尾執行你的測試。一旦測試完成,瀏覽器視窗將會關閉。

要偵錯一個測試文件,請執行 Playwright 測試命令,並在要偵錯的測試文件名稱後加上 --debug 旗標。

npx playwright test example.spec.ts --debug

要從定義 test(.. 的行號偵錯特定測試,請在測試檔案名稱末尾添加一個冒號,後跟行號,然後是 --debug 旗標。

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

在偵錯時,你可以使用 Pick Locator 按鈕來選擇頁面上的元素,並查看 Playwright 將用來找到該元素的定位器。你也可以編輯定位器,並在瀏覽器視窗上即時看到它的高亮顯示。使用 Copy Locator 按鈕將定位器複製到剪貼簿,然後將其貼到你的測試中。

Locator picker in the Playwright Inspector

請查看我們的除錯指南以了解更多關於使用 VS Code 偵錯工具、UI 模式和 Playwright Inspector 進行除錯,以及使用瀏覽器開發者工具進行除錯的資訊。

測試報告

HTML 報告器 顯示你的測試完整報告,允許你根據瀏覽器、通過的測試、失敗的測試、跳過的測試和不穩定的測試來篩選報告。預設情況下,如果某些測試失敗,HTML 報告會自動打開,否則你可以使用以下命令打開它。

npx playwright show-report

HTML 報告

您可以篩選和搜尋測試,並且點擊每個測試來查看測試錯誤和探索測試的每一步。

HTML 報告器 詳細視圖

接下來是什麼