快速入門：使用 Microsoft Playwright Testing 預覽版來設定持續的端對端測試

發行項
11/19/2024

在本快速入門中，您會使用 Microsoft Playwright Testing 預覽版來設定持續的端對端測試，以驗證 Web 應用程式可搭配每一個程式碼認可，在不同瀏覽器和作業系統之間正確執行，並使用服務儀錶板來輕鬆疑難排解測試。請了解如何將 Playwright 測試新增至持續整合 (CI) 工作流程，例如 GitHub Actions、Azure Pipelines 或其他 CI 平台。

完成本快速入門之後，您會獲得一個 CI 工作流程，其會使用 Microsoft Playwright Testing 大規模地執行 Playwright 測試套件並幫助您輕鬆疑難排解測試。

重要

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

必要條件

具有有效訂用帳戶的 Azure 帳戶。如尚未擁有 Azure 訂用帳戶，請在開始之前先建立免費帳戶。
Microsoft Playwright Testing 工作區。完成快速入門：大規模地執行 Playwright 測試 (部分機器翻譯) 以建立工作區。

GitHub 動作
Azure Pipelines

GitHub 帳戶。如果您沒有 GitHub 帳戶，您可免費建立帳戶。
GitHub 存放庫，其中包含您的 Playwright 測試規格和 GitHub Actions 工作流程。若要建立存放庫，請參閱建立新的存放庫 (英文)。
GitHub Actions 工作流程。如果您需要協助以便開始使用 GitHub Actions，請參閱建立您的第一個工作流程 (英文)
設定從 GitHub Actions 到 Azure 的驗證。查看使用 GitHub Actions 連線到 Azure

取得服務區域端點 URL

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

若要取得服務端點 URL，並將其儲存為 CI 工作流程祕密，請執行下列步驟：

使用您的 Azure 帳戶登入 Playwright 入口網站 (英文)。
在工作區首頁上，選取 [檢視設定指南]。

提示

如果您有多個工作區，則可以藉由選取頁面頂端的工作區名稱來切換至另一個工作區，然後選取 [管理所有工作區]。
在 [在設定中新增區域端點] 中，複製服務端點 URL。

此端點 URL 會符合您在建立工作區時選取的 Azure 區域。
將服務端點 URL 儲存在 CI 工作流程秘密中：

祕密名稱值

PLAYWRIGHT_SERVICE_URL 貼上您先前複製的端點 URL。

祕密名稱	值
PLAYWRIGHT_SERVICE_URL	貼上您先前複製的端點 URL。

新增服務組態檔

如果您尚未設定 Playwright 測試以使用服務執行，請將服務組態檔新增至您的存放庫。在下一個步驟中，您接著會在 Playwright CLI 上指定此服務組態檔。

連同 playwright.config.ts 檔案一起建立新檔案 playwright.service.config.ts。

(選擇性) 使用範例存放庫 (英文) 中的 playwright.service.config.ts 檔案。

將下列內容新增至其中：

import { defineConfig } from '@playwright/test';
import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/mpt/config */
export default defineConfig(
  config,
  getServiceConfig(config, {
    exposeNetwork: '<loopback>',
        timeout: 30000,
    os: ServiceOS.LINUX,
        useCloudHostedBrowsers: true
  }),
  {
    /* 
    Playwright Testing service reporter is added by default.
    This will override any reporter options specified in the base playwright config.
    If you are using more reporters, please update your configuration accordingly.
    */
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
  }
);

根據預設，服務組態可讓您：

使用雲端裝載的瀏覽器平行執行測試，以加速建置管線。
簡化疑難解答，輕鬆存取發佈至服務的測試結果和成品。

不過，您可以選擇使用這些功能或兩者。請參閱如何使用服務功能，並根據您的需求更新服務組態檔。

將檔案儲存並認可至您的原始程式碼存放庫。

更新 package.json 檔案

更新存放庫中的 package.json 檔案，以在 devDependencies 區段中新增Microsoft Playwright Testing 服務套件的詳細資料。

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

在 Playwright 設定中啟用成品

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

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

設定服務組態

在專案的根目錄中建立新檔案 PlaywrightServiceSetup.cs 。此檔案可協助驗證客戶端與服務。

將下列內容新增至其中：

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
using NUnit.Framework;

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

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };

將檔案儲存並認可至您的原始程式碼存放庫。

更新專案的 .csproj 檔案

更新存放庫中的 csproj 檔案，以在 ItemGroup 區段中新增Microsoft Playwright Testing 服務套件的詳細資料。

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

新增或更新 `.runsettings` 項目的檔案。

如果您尚未設定 Playwright 測試以使用服務執行它們，請將檔案新增 .runsettings 至您的存放庫。在下一個步驟中，您接著會在 Playwright CLI 上指定此服務組態檔。

建立新的 .runsettings 檔案。

(選擇性) 使用範例存放庫 (英文) 中的 .runsettings 檔案。

將下列內容新增至其中：

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>
        <!-- The below parameters are optional -->
        <Parameter name="Os" value="linux" />
        <!--<Parameter name="RunId" value="sample-run-id1" />-->
        <Parameter name="ServiceAuthType" value="EntraId" />
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
        <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
        <Parameter name="EnableGitHubSummary" value="false" />
        <!--<Parameter name="ExposeNetwork" value="*" />-->
    </TestRunParameters>
  <!-- NUnit adapter -->  
  <NUnit>
    <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
    <NumberOfTestWorkers>10</NumberOfTestWorkers>
  </NUnit>
  <!-- General run configuration -->
  <RunConfiguration>
    <EnvironmentVariables>
      <!-- For debugging selectors, it's recommend to set the following environment variable -->
        <!--<DEBUG>pw:api*</DEBUG>--> 
    </EnvironmentVariables>
  </RunConfiguration>
  <!-- Playwright -->  
  <Playwright>
    <BrowserName>chromium</BrowserName>
    <ExpectTimeout>5000</ExpectTimeout>
    <LaunchOptions>
      <Headless>false</Headless>
      <!--Channel>msedge</Channel-->
    </LaunchOptions>
  </Playwright>
    <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>

此檔案中的設定可讓您：

使用雲端裝載的瀏覽器平行執行測試，以加速建置管線。
將測試結果和成品發佈至服務，以更快速地進行疑難解答。

不過，您可以選擇使用這些功能或兩者。請參閱如何使用服務功能，並根據您的需求更新服務組態檔。

將檔案儲存並認可至您的原始程式碼存放庫。

在劇作家設定中啟用成品

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

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

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

更新工作流程定義

更新 CI 工作流程定義，以使用 Playwright CLI 來執行 Playwright 測試。將服務組態檔作為 Playwright CLI 的輸入參數來傳遞。您可以藉由指定環境變數來設定環境。

開啟 CI 工作流程定義

新增下列步驟，以在 Microsoft Playwright Testing 中執行 Playwright 測試。

下列步驟說明 GitHub Actions 或 Azure Pipelines 的工作流程變更。同樣地，您也可以在其他 CI 平台中使用 Playwright CLI 來執行 Playwright 測試。

GitHub 動作
Azure Pipelines


  # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
  # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using Microsoft Entra ID to authenticate
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4    
- name: Login to Azure with AzPowershell (enableAzPSSession true) 
  uses: azure/login@v2 
  with: 
    client-id: ${{ secrets.AZURE_CLIENT_ID }} 
    tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
    subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
    enable-AzPSSession: true 

- name: Install dependencies
    working-directory: path/to/playwright/folder # update accordingly
  run: npm ci

- name: Run Playwright tests
    working-directory: path/to/playwright/folder # update accordingly
  env:
    # Regional endpoint for Microsoft Playwright Testing
    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
  run: npx playwright test -c playwright.service.config.ts --workers=20

- name: Upload Playwright report
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: path/to/playwright/folder/playwright-report/ # update accordingly
    retention-days: 10

- task: PowerShell@2
  enabled: true
  displayName: "Install dependencies"
  inputs:
    targetType: 'inline'
    script: 'npm ci'
    workingDirectory: path/to/playwright/folder # update accordingly

- task: AzureCLI@2
  displayName: Run Playwright Test  
    env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      npx playwright test -c playwright.service.config.ts --workers=20
  addSpnToEnvironment: true
  workingDirectory: path/to/playwright/folder # update accordingly

- task: PublishPipelineArtifact@1
  displayName: Upload Playwright report
  inputs:
    targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
    artifact: 'Playwright tests'
    publishLocation: 'pipeline'

更新 CI 工作流程定義，以使用 Playwright NUnit CLI 執行 Playwright 測試。傳遞 .runsettings 檔案作為 Playwright CLI 的輸入參數。您可以藉由指定環境變數來設定環境。

開啟 CI 工作流程定義。

新增下列步驟，以在 Microsoft Playwright Testing 中執行 Playwright 測試。

下列步驟說明 GitHub Actions 或 Azure Pipelines 的工作流程變更。同樣地，您也可以在其他 CI 平台中使用 Playwright CLI 來執行 Playwright 測試。

GitHub 動作
Azure Pipelines

on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using AuthType as EntraId
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4
    # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
    # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 

      - name: Login to Azure with AzPowershell (enableAzPSSession true) 
        uses: azure/login@v2 
        with: 
          client-id: ${{ secrets.AZURE_CLIENT_ID }} 
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
          enable-AzPSSession: true 

      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: 8.0.x

      - name: Restore dependencies
        run: dotnet restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Build
        run: dotnet build --no-restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Run Playwright tests
          working-directory: path/to/playwright/folder # update accordingly
        env:
          # Regional endpoint for Microsoft Playwright Testing
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
          PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
        run: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20

      - name: Upload Playwright report
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: path/to/playwright/folder/playwright-report/ # update accordingly
          retention-days: 10

- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '8.x'
    installationPath: $(Agent.ToolsDirectory)/dotnet

- checkout: self

- script: dotnet restore
  displayName: 'Restore dependencies'
  workingDirectory: path/to/playwright/folder # update accordingly

- script: dotnet build --no-restore
  displayName: 'Build'
  workingDirectory: path/to/playwright/folder # update accordingly

- task: AzureCLI@2
  displayName: Run Playwright Test  
    env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20
  addSpnToEnvironment: true
  workingDirectory: path/to/playwright/folder # update accordingly

- task: PublishPipelineArtifact@1
  displayName: Upload Playwright report
  inputs:
    targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
    artifact: 'Playwright tests'
    publishLocation: 'pipeline'

儲存並認可您的變更。

觸發 CI 工作流程時，Playwright 測試便會在雲端裝載的瀏覽器上的 Microsoft Playwright Testing 工作區中，跨 20 個平行背景工作角色來執行。收集的結果和成品會發佈至服務，而且可以在服務入口網站上檢視。

注意

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

警告

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

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

您可以使用下列命令列，搭配服務來執行單一測試：

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

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

您現在可以在 Playwright 入口網站中針對 CI 管線進行疑難解答，

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

提示

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

注意

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

您已成功設定持續的端對端測試工作流程，以在雲端裝載的瀏覽器上大規模地執行 Playwright 測試。

向使用者授與工作區的存取權 (部分機器翻譯)
管理工作區 (部分機器翻譯)

共用方式為

快速入門：使用 Microsoft Playwright Testing 預覽版來設定持續的端對端測試

必要條件

取得服務區域端點 URL

新增服務組態檔

更新 package.json 檔案

在 Playwright 設定中啟用成品

設定服務組態

更新專案的 .csproj 檔案

新增或更新 `.runsettings` 項目的檔案。

在劇作家設定中啟用成品

更新工作流程定義

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

意見反應

其他資源

共用方式為

快速入門：使用 Microsoft Playwright Testing 預覽版來設定持續的端對端測試

必要條件

取得服務區域端點 URL

新增服務組態檔

更新 package.json 檔案

在 Playwright 設定中啟用成品

設定服務組態

更新專案的 .csproj 檔案

新增或更新 .runsettings 項目的檔案。

在劇作家設定中啟用成品

更新工作流程定義

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

相關內容

意見反應

其他資源

新增或更新 `.runsettings` 項目的檔案。