快速入門：使用 Microsoft Playwright Testing Preview 對測試進行疑難解答

發行項
11/19/2024

在本快速入門中，您將瞭解如何使用Microsoft Playwright Testing Preview 上發佈的報表和成品，輕鬆地對劇作家測試進行疑難解答。此外，本指南會示範如何使用報告功能，不論您是否在服務所提供的雲端裝載瀏覽器上執行測試。

完成本快速入門之後，您將有Microsoft Playwright Testing 工作區，以在服務入口網站中檢視測試結果和成品。

重要

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

背景

Microsoft Playwright Testing 服務可讓您：

使用雲端裝載的瀏覽器平行執行測試，以加速建置管線。
藉由將測試結果和成品發佈至服務來簡化疑難解答，使其可透過服務入口網站存取。

服務的這兩個功能可以彼此獨立使用，而且每個功能都有自己的定價方案。這表示您可以：

在雲端裝載的瀏覽器中執行測試，並將結果發佈至服務，以加速測試執行並簡化疑難解答。
只在雲端裝載的瀏覽器中執行測試，以更快完成測試執行。
將測試結果發佈至服務，同時繼續在本機執行測試，以有效率地進行疑難解答。

必要條件

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

建立工作區

若要開始在 Playwright Testing 服務上發佈測試結果，請先在 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/test 1.47 版或更新版本。

此指令會產生 playwright.service.config.ts 提供下列動作的檔案：

將 Playwright 用戶端直接並驗證至 Microsoft Playwright Testing 服務。
新增報告程式以發佈測試結果和成品。

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

若要只針對測試回合使用報告功能，請將設定 useCloudHostedBrowsers 為 false 來停用雲端裝載的瀏覽器。

export default defineConfig(
  config,
  getServiceConfig(config, {
    timeout: 30000,
    os: ServiceOS.LINUX,
	useCloudHostedBrowsers: false // Do not use cloud hosted browsers
  }),
  {
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
  }
);

將值設定為 false ，可確保雲端裝載的瀏覽器不會用來執行測試。測試會在本機計算機上執行，但結果和成品會在服務上發佈。

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

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

注意

請確定您的專案使用 Microsoft.Playwright.NUnit 1.47 版或更新版本。

若要只使用報告功能，請在專案的檔案中 .runsettings 更新下列內容：

將設定 useCloudHostedBrowsers 為 false，以停用雲端裝載的瀏覽器。
在 [記錄器] 區段中新增Microsoft Playwright Testing 記錄器。

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>        
        <!--Select if you want to use cloud-hosted browsers to run your Playwright tests.-->
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <!--Select the authentication method you want to use with Entra-->
    </TestRunParameters> 
 .
 .
 .
    <LoggerRunSettings>
        <Loggers>
            <!--Microsoft Playwright Testing service logger for reporting -->
            <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
            <!--could enable any logger additionally -->
            <Logger friendlyName="trx" enabled="false" />
        </Loggers>
    </LoggerRunSettings>
</RunSettings>

提示

如果您想要使用雲端裝載的瀏覽器加速測試回合，您可以將設定 useCloudHostedBrowsers 為 true。這會在服務管理的瀏覽器上執行您的測試。

設定服務區域端點

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

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

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

此端點 URL 會符合您在建立工作區時選取的 Azure 區域。請確定此 URL 可在環境變數中使用 PLAYWRIGHT_SERVICE_URL 。

設定您的環境

若要設定您的環境，必須使用您在先前步驟中取得的值來設定 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} 文字預留位置取代為您稍早複製的值。

設定服務組態

使用下列內容在根目錄中建立檔案 PlaywrightServiceSetup.cs 。

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

注意

請確定您的專案使用 Microsoft.Playwright.NUnit 1.47 版或更新版本。

設定驗證

若要將測試結果和成品發佈至您的 Microsoft Playwright Testing 工作區，您必須向服務執行測試的 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 Tenant。取得識別碼之後，請使用命令 az login --tenant <TenantID> 登入

使用存取權杖設定驗證

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

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

警告

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

在劇作家設定中啟用成品

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

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

啟用螢幕快照、影片和追蹤等成品，由 Playwright 擷取。

如需螢幕快照，請參閱擷取螢幕快照
針對影片，請參閱錄製測試的影片
如需追蹤，請參閱錄製追蹤

收集這些成品之後，請將它們附加至 TestContext ，以確保這些成品可在您的測試報告中使用。如需詳細資訊，請參閱 NUnit 的範例專案

在劇作家測試 Microsoft上執行測試併發佈結果

您現在已準備使用 Microsoft playwright Testing 發行測試結果和成品的設定。使用新建立 playwright.service.config.ts 的檔案執行測試，並將測試結果和成品發佈至服務。

   npx playwright test --config=playwright.service.config.ts

注意

針對 Microsoft Playwright Testing 的報告功能，您會根據發佈的測試結果數目收費。如果您是第一次使用者或開始使用免費試用，您可以開始發佈單一測試結果，而不是完整的測試套件，以避免耗盡免費試用限制。

測試完成後，可以在終端中檢視測試狀態。

Running 6 test using 2 worker
    5 passed, 1 failed (20.2s)

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

您現在已準備使用 Microsoft playwright Testing 發行測試結果和成品的設定。使用檔案執行測試， .runsettings 並將測試結果和成品發佈至服務。

dotnet test --settings:.runsettings

測試回合的設定定義於檔案中 .runsettings 。如需詳細資訊，請參閱如何使用服務套件選項

注意

測試回合完成之後，您可以在終端機中檢視測試狀態。

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

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

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 10 m - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

警告

視測試套件的大小而定，除了分配的免費測試結果之外，可能會產生測試結果的額外費用。

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

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

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

提示

您也可以使用 Microsoft Playwright Testing 服務，使用雲端裝載的瀏覽器平行執行測試。報告和雲端裝載瀏覽器都是獨立的功能，而且會個別計費。您可以使用這兩者或兩者。如需詳細資訊，請參閱如何使用服務功能

注意

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

後續步驟

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

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

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

共用方式為