Skip to main content

執行和偵錯測試

簡介

使用 Playwright,您可以執行單一測試、一組測試或所有測試。可使用 --project 旗標在一個瀏覽器或多個瀏覽器上執行測試。測試預設以平行方式在無頭模式下執行,意即在執行測試時不會開啟瀏覽器視窗,結果顯示在終端機中。您可以使用 --headed CLI 參數在有頭模式下執行測試,或使用 --ui 旗標在 UI 模式下執行測試,以查看完整的測試追蹤。

您將學習

執行測試

命令列

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

npx playwright test

在 UI 模式下執行測試

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

npx playwright test --ui

查看我們的 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 在 Node.js 中執行,您可以使用您選擇的偵錯器進行偵錯,例如使用 console.log、在您的 IDE 中,或直接在 VS Code 中使用 VS Code 擴充功能。Playwright 提供 UI 模式,您可以輕鬆瀏覽測試的每個步驟,查看日誌、錯誤、網路請求、檢查 DOM 快照等等。您也可以使用 Playwright Inspector,它允許您逐步執行 Playwright API 呼叫,查看其偵錯日誌,並探索定位器

在 UI 模式下偵錯測試

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

npx playwright test --ui

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

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

使用 Playwright Inspector 偵錯測試

要偵錯所有測試,請執行 Playwright 測試指令,後面加上 --debug 旗標。

npx playwright test --debug

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

要偵錯一個測試檔案,請執行 Playwright 測試指令,加上您想要偵錯的測試檔案名稱,後面加上 --debug 旗標。

npx playwright test example.spec.ts --debug

要從定義 test(..) 的行號偵錯特定測試,請在測試檔案名稱後面加上冒號和行號,再加上 --debug 旗標。

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

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

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

測試報告

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

npx playwright show-report

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

接下來做什麼