快速入門：使用 Microsoft Playwright Testing 預覽版來大規模地執行端對端測試

文章
10/23/2024

在本快速入門中，您會了解如何使用高度平行的雲端瀏覽器執行 Playwright 測試，並使用Microsoft Playwright Testing 預覽版輕鬆地針對失敗的測試進行疑難排解。使用雲端基礎結構，以便跨多個瀏覽器、裝置和作業系統來驗證您的應用程式。將 Playwright 產生的結果和成品發佈至服務，並在服務入口網站中檢視。

完成本快速入門之後，您會有 Microsoft Playwright Testing 工作區，用於大規模執行 Playwright 測試，並在服務入口網站中檢視測試結果和成品。

重要

Microsoft Playwright Testing 目前為預覽版。如需適合測試版、處於預覽狀態或其他尚未發行正式推出之 Azure 功能的法律條款，請參閱 Microsoft Azure 預覽版補充使用條款。

必要條件

具有有效訂用帳戶的 Azure 帳戶。如尚未擁有 Azure 訂用帳戶，請在開始之前先建立免費帳戶。
您的 Azure 帳戶需要擁有者 (部分機器翻譯)、參與者 (部分機器翻譯) 或其中一個傳統管理員角色 (部分機器翻譯)。
Playwright 專案。如果您沒有專案，請使用 Playwright 使用者入門文件 (英文) 建立專案，或使用我們的 Microsoft Playwright Testing 範例專案 (英文)。
Azure CLI。如果您沒有 Azure CLI，請參閱安裝 Azure CLI (部分機器翻譯)。

建立工作區

若要開始在雲端瀏覽器上大規模執行 Playwright 測試，請先在 Playwright 入口網站中建立 Microsoft Playwright Testing 工作區。

使用您的 Azure 帳戶登入 Playwright 入口網站 (英文)。
如果您已經有工作區，請選取現有的工作區，然後移至下一個步驟。

提示

如果您有多個工作區，則可以藉由選取頁面頂端的工作區名稱來切換至另一個工作區，然後選取 [管理所有工作區]。

如果您還沒有工作區，請選取 [+ 新增工作區]，然後提供下列資訊：

欄位	描述
工作區名稱	輸入唯一的名稱來識別您的工作區。名稱中只能包含英數字元，且長度在 3 到 64 個字元之間。
Azure 訂用帳戶	選取您要用於此 Microsoft Playwright Testing 工作區的 Azure 訂用帳戶。
區域	選取用來裝載工作區的地理位置。這是用來為工作區儲存測試回合資料的位置。

選取 [建立工作區] 以在訂用帳戶中建立工作區。

在工作區建立期間，系統會在 Azure 訂用帳戶中建立新的資源群組和 Microsoft Playwright Testing Azure 資源。

當工作區建立完成時，系統會將您重新導向至設定指南。

安裝 Microsoft Playwright Testing 套件

若要使用服務，請安裝 Microsoft Playwright Testing 套件。

npm init @azure/microsoft-playwright-testing

這會產生 playwright.service.config.ts 檔案，其用途包括：

將 Playwright 導向 Microsoft Playwright Testing 服務，並加以驗證。
新增報告程式以發佈測試結果和成品。

如果您已經有此檔案，套件會要求您覆寫它。

設定服務區域端點

在設定中，您必須提供區域特定的服務端點。此端點取決於您在建立工作區時選取的 Azure 區域。

若要取得服務端點 URL，請執行下列步驟：

在 [在設定中新增區域端點] 中，複製工作區的區域端點。

此端點 URL 會符合您在建立工作區時選取的 Azure 區域。

設定您的環境

若要設定您的環境，必須使用您在先前步驟中取得的值來設定 PLAYWRIGHT_SERVICE_URL 環境變數。

建議您使用 dotenv 模組來管理環境。使用 dotenv 可在 .env 檔案中定義環境變數。

將 dotenv 模組新增至您的專案：
```
npm i --save-dev dotenv
```
在 Playwright 專案中，連同 playwright.config.ts 檔案一起建立 .env 檔案：
```
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
請務必將 {MY-REGION-ENDPOINT} 文字預留位置取代為您稍早複製的值。

設定驗證

若要在 Microsoft Playwright Testing 工作區中執行 Playwright 測試，您需要對使用此服務執行測試的 Playwright 用戶端進行驗證。這可能是您的本機開發電腦或 CI 機器。

此服務提供兩種驗證方法：Microsoft Entra ID 和存取權杖。

Microsoft Entra ID 會使用您的 Azure 認證，這需要登入您的 Azure 帳戶進行安全存取。或者，您可以從 Playwright 工作區產生存取權杖，並在您的設定中使用該權杖。

使用 Microsoft Entra ID 設定驗證

Microsoft Entra ID 是此服務的預設和建議驗證方法。從本機開發電腦，您可以使用 Azure CLI 登入

az login

注意

如果您屬於多個 Microsoft Entra 租用戶，請務必登入工作區所屬的租用戶。您可以從 Azure 入口網站取得租用戶識別碼。請參閱尋找您的 Microsoft Entra 租用戶。取得識別碼之後，請使用命令 az login --tenant <TenantID> 登入

使用存取權杖設定驗證

您可以從 Playwright Testing 工作區產生存取權杖，並在您的設定中使用該權杖。不過，我們強烈建議使用 Microsoft Entra ID 進行驗證，因為其安全性更高。存取權杖雖然方便，但功能類似長期密碼，而且更容易遭到入侵。

根據預設，使用存取權杖進行驗證會停用。若要使用，請啟用存取權杖型驗證
使用存取權杖設定驗證

警告

我們強烈建議使用 Microsoft Entra ID 對服務進行驗證。如果您使用存取權杖，請參閱如何管理存取權杖 (部分機器翻譯)

在 Playwright 設定中啟用成品

在項目的檔案中 playwright.config.ts ，請確定您正在收集所有必要的成品。

  use: {
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
  }

使用 Microsoft Playwright Testing 來大規模地執行測試

您現在已經準備好可在雲端中使用 Microsoft Playwright Testing 來執行 Playwright 測試的組態。您可以使用 Playwright CLI 來執行測試，也可以使用 Playwright Test Visual Studio Code 延伸模組 (英文)。

大規模地執行單一測試

使用 Microsoft Playwright Testing 時，您必須根據發佈的總測試分鐘數和測試結果數目來付費。如果您是第一次使用者，或透過免費試用而開始使用，則一開始可以大規模地執行單一測試，而不是執行完整的測試套件，以免耗盡免費試用的限制時數。

注意

預設會針對現有的工作區啟用報告功能。這會分階段推出，需要幾天的時間。若要避免失敗，請先確認工作區的 Rich diagnostics using reporting 設定為 [開啟]，然後再繼續。請參閱啟用工作區的報告。

驗證測試回合成功後，便可以透過搭配服務來執行更多測試，逐漸增加測試負載。

執行下列步驟，以使用 Microsoft Playwright Testing 來執行單一 Playwright 測試：

Playwright CLI
Visual Studio Code

若要使用 Playwright CLI 搭配 Microsoft Playwright Testing 來執行測試，請以命令列參數的形式傳遞服務組態檔。

開啟終端機視窗。
輸入下列命令，在工作區中的遠端瀏覽器上執行 Playwright 測試：

將 {name-of-file.spec.ts} 文字預留位置取代為測試規格檔案的名稱。
```
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
```
測試完成後，可以在終端中檢視測試狀態。
```
Running 1 test using 1 worker
    1 passed (2.2s)

To open last HTML report run:

npx playwright show-report
```

若要使用 Microsoft Playwright Testing 在 Visual Studio Code 中執行單一 Playwright 測試，請在 [測試清單編輯器] 檢視中選取服務組態檔。然後，從測試清單中選取並執行測試。

安裝 Playwright Test Visual Studio Code 延伸模組 (英文)。
在活動列中開啟 [測試清單編輯器] 檢視。

測試清單編輯器會自動偵測您的 Playwright 測試和專案中的服務組態。
選取 [選取預設設定檔]，然後從服務組態檔中選取您的預設專案。

請注意，服務執行設定檔來自您先前新增的 playwright.service.config.ts 檔案。

藉由設定預設設定檔，您可以使用該服務自動執行測試，或同時執行多個 Playwright 專案。
從測試清單中，選取測試旁邊的 [執行測試] 按鈕以執行測試。

測試會在您於預設設定檔中選取的專案上執行。如果您從服務組態中選取一或多個專案，則測試會在工作區中的遠端瀏覽器上執行。

提示

當您使用 [對測試偵錯] 按鈕在遠端瀏覽器上執行測試時，您仍然可以對測試的程式碼進行偵錯。
您可以直接在 Visual Studio Code 中檢視測試結果。

您現在可以使用該服務來執行多個測試，或在遠端瀏覽器上執行整個測試套件。

警告

視測試套件的大小而定，您可能會因為測試分鐘數和測試結果而產生額外的費用，而超出您分配的免費測試分鐘數和免費測試結果。

大規模地執行完整測試套件

您現已驗證您可以使用 Microsoft Playwright Testing 來執行單一測試，接下來您可以大規模地執行完整的 Playwright 測試套件。

執行下列步驟，以使用 Microsoft Playwright Testing 來執行完整的 Playwright 測試套件：

Playwright CLI
Visual Studio Code

當您使用 Microsoft Playwright Testing 執行多個 Playwright 測試或完整測試套件時，您可以選擇性地以命令列參數的形式指定平行背景工作角色數目。

開啟終端機視窗。
輸入下列命令，在工作區中的遠端瀏覽器上執行 Playwright 測試套件：
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
視測試套件大小而定，此命令會在最多 20 個平行背景工作角色上執行測試。

測試完成後，可以在終端中檢視測試狀態。
```
Running 6 tests using 6 workers
    6 passed (18.2s)

Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
```

在 Playwright 入口網站中檢視測試執行和結果

您現在可以在 Playwright 入口網站中針對失敗的測試案例進行疑難解答。

測試回合完成之後，會產生劇作家入口網站的連結。開啟此連結以檢視詳細的測試結果和相關聯的成品。入口網站會顯示基本資訊，包括：
- CI 組建詳細數據
- 整體測試回合狀態
- 連結至測試回合的認可標識碼
Playwright 入口網站提供疑難解答所需的所有資訊。您可以：
- 在重試之間切換。
- 檢視詳細的錯誤記錄、測試步驟和附加成品，例如螢幕快照或影片。
- 直接流覽至 追蹤查看器 以進行更深入的分析。
追蹤查看器可讓您以可視化方式逐步執行測試。您可以：
- 使用時間軸將滑鼠停留在個別步驟上，並顯示每個動作前後的頁面狀態。
- 檢查每個步驟的詳細記錄、DOM 快照集、網路活動、錯誤和控制台輸出。

提示

您可以獨立使用 Microsoft Playwright Testing 服務功能。您可以在不使用雲端裝載瀏覽器功能的情況下，將測試結果發佈至入口網站，您也可以只使用雲端裝載瀏覽器來加速您的測試套件，而不發佈測試結果。

注意

您發佈的測試結果和成品會在服務上保留 90 天。之後，系統會自動將它們刪除。

將平行背景工作角色的組態最佳化

測試能搭配服務順利執行後，請實驗不同數目的平行背景工作角色，以判斷可將測試完成時間降到最低的最佳組態。

使用 Microsoft Playwright Testing 時，您最多可以搭配 50 個平行背景工作角色來執行。有數個因素會影響專案的最佳組態，例如用戶端機器的 CPU、記憶體和網路資源、目標應用程式的負載處理容量，以及測試中所執行的動作類型。

您可以在 Playwright CLI 命令列上指定平行背景工作角色數目，或在 Playwright 服務組態檔中設定 workers 屬性。

深入了解如何判斷可將測試套件完成時間最佳化的最佳組態 (部分機器翻譯)。

後續步驟

您已成功在 Playwright 入口網站中建立 Microsoft Playwright Testing 工作區，並在雲端瀏覽器上執行 Playwright 測試。

請繼續進行下一個快速入門，在 CI/CD 工作流程中執行 Playwright 測試，以設定持續的端對端測試。

在 CI/CD 中設定持續的端對端測試 (部分機器翻譯)

分享方式：