跳至主要內容

執行與偵錯測試

簡介

透過 Playwright,您可以執行單個測試、一組測試或所有測試。可以使用 --project 標誌在一個或多個瀏覽器上執行測試。測試預設以平行方式執行,並且以無頭模式執行,這表示在執行測試時不會開啟瀏覽器視窗,結果將在終端機中看到。但是,您可以使用 --headed CLI 參數以有頭模式執行測試,或者您可以使用 --ui 標誌在 UI 模式下執行測試。查看測試的完整追蹤記錄,包括監看模式、時間旅行偵錯等等。

您將學到

執行測試

命令行

您可以使用 playwright test 命令執行測試。這將在 playwright.config 檔案中配置的所有瀏覽器上執行您的測試。測試預設以無頭模式執行,這表示在執行測試時不會開啟瀏覽器視窗,結果將在終端機中看到。

npx playwright test

tests running in command line

在 UI 模式下執行測試

我們強烈建議您使用 UI 模式執行測試,以獲得更好的開發者體驗,您可以輕鬆地逐步瀏覽測試的每個步驟,並視覺化地查看每個步驟之前、期間和之後發生的事情。UI 模式還具有許多其他功能,例如定位器選擇器、監看模式等等。

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 extension

偵錯測試

由於 Playwright 在 Node.js 中執行,您可以使用您選擇的偵錯工具對其進行偵錯,例如使用 console.log 或在您的 IDE 內部,或直接在 VS Code 中使用 VS Code 擴充功能。Playwright 附帶 UI 模式,您可以在其中輕鬆地逐步瀏覽測試的每個步驟,查看日誌、錯誤、網路請求、檢查 DOM 快照等等。您也可以使用 Playwright Inspector,它允許您逐步執行 Playwright API 呼叫,查看其偵錯日誌並探索 定位器

在 UI 模式下偵錯測試

我們強烈建議您使用 UI 模式偵錯測試,以獲得更好的開發者體驗,您可以輕鬆地逐步瀏覽測試的每個步驟,並視覺化地查看每個步驟之前、期間和之後發生的事情。UI 模式還具有許多其他功能,例如定位器選擇器、監看模式等等。

npx playwright test --ui

showing errors in ui mode

在偵錯時,您可以使用「選取定位器」按鈕來選擇頁面上的元素,並查看 Playwright 將用來尋找該元素的定位器。您也可以在定位器遊樂場中編輯定位器,並在瀏覽器視窗中即時看到它突出顯示。使用「複製定位器」按鈕將定位器複製到剪貼簿,然後將其貼到您的測試中。

pick locator in ui mode

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

使用 Playwright Inspector 偵錯測試

若要偵錯所有測試,請執行 Playwright test 命令,後跟 --debug 標誌。

npx playwright test --debug

Debugging Tests with the Playwright inspector

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

若要偵錯一個測試檔案,請執行 Playwright test 命令,後跟您要偵錯的測試檔案的名稱,以及 --debug 標誌。

npx playwright test example.spec.ts --debug

若要從定義 test(.. 的行號偵錯特定測試,請在測試檔案名稱的末尾添加冒號,後跟行號,以及 --debug 標誌。

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

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

Locator picker in the Playwright Inspector

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

測試報告

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

npx playwright show-report

HTML Report

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

HTML Reporter detail view

下一步