빠른 시작: Playwright 작업 영역을 사용하여 연속 엔드투엔드 테스트 설정

서비스 구성 파일 추가

Playwright 테스트가 서비스와 함께 실행되도록 구성되지 않은 경우 리포지토리에 서비스 구성 파일을 추가합니다. 다음 단계에서는 Playwright CLI에서 이 서비스 구성 파일을 지정합니다.

1. playwright.config.ts 파일과 함께 새 파일 playwright.service.config.ts를 만듭니다.

   필요에 따라 샘플 리포지토리의 playwright.service.config.ts 파일을 사용합니다.

2. 다음 콘텐츠를 추가합니다.

   import { defineConfig } from '@playwright/test';
   import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
   import { DefaultAzureCredential } from '@azure/identity';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/pww/docs/config */
   export default defineConfig(
     config,
     createAzurePlaywrightConfig(config, {
       exposeNetwork: '<loopback>',
       connectTimeout: 3 * 60 * 1000, // 3 minutes
       os: ServiceOS.LINUX,
       credential: new DefaultAzureCredential(),
     })
   );
   

   기본적으로 서비스 구성을 사용하면 클라우드 호스팅 브라우저를 사용하여 병렬로 테스트를 실행하여 빌드 파이프라인을 가속화할 수 있습니다.

3. 파일을 저장하고 소스 코드 리포지토리에 커밋합니다.

package.json 파일 업데이트

리포지토리의 package.json 파일을 업데이트하여 섹션의 Playwright 작업 영역 패키지 devDependencies 에 대한 세부 정보를 추가합니다.

"devDependencies": {
    "@azure/playwright": "latest"
}

서비스 패키지 설치

프로젝트에서 Playwright 작업 영역 패키지를 설치합니다.

dotnet add package Azure.Developer.Playwright.NUnit

이 명령은 ItemGroup 섹션에 서비스 패키지 세부 정보를 추가하여 프로젝트의 csproj 파일을 업데이트합니다. 변경 내용을 커밋하는 것을 잊지 마세요.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

서비스 구성 설정

1. 프로젝트의 루트 디렉터리에 새 파일 PlaywrightServiceNUnitSetup.cs를 만듭니다. 이 파일은 서비스를 통해 클라이언트의 인증을 용이하게 합니다.
2. 다음 콘텐츠를 추가합니다.

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}

3. 파일을 저장하고 소스 코드 리포지토리에 커밋합니다.

Playwright CLI를 사용하여 Playwright 테스트를 실행하도록 CI 워크플로 정의를 업데이트합니다. 서비스 구성 파일을 Playwright CLI에 대한 입력 매개 변수로 전달합니다. 환경 변수를 지정하여 환경을 구성합니다.

1. 워크플로 정의를 엽니다.

2. 다음 단계를 추가하여 Playwright 작업 영역에서 Playwright 테스트를 실행합니다.

   다음 단계에서는 GitHub Actions 또는 Azure Pipelines의 워크플로 변경 내용을 설명합니다. 마찬가지로 다른 CI 플랫폼에서 Playwright CLI를 사용하여 Playwright 테스트를 실행할 수 있습니다.

   • GitHub Actions
   • 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. 
     name: Playwright Tests (Playwright Workspaces)
     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 }} # GitHub Open ID connect values copied in previous steps
               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 Playwright Workspaces
               PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
               # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
             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
   

Playwright NUnit CLI로 Playwright 테스트를 실행하도록 CI 워크플로 정의를 업데이트합니다. 환경 변수를 지정하여 환경을 구성합니다.

1. 워크플로 정의를 엽니다.

2. 다음 단계를 추가하여 Playwright 작업 영역에서 Playwright 테스트를 실행합니다.

   다음 단계에서는 GitHub Actions 또는 Azure Pipelines의 워크플로 변경 내용을 설명합니다. 마찬가지로 다른 CI 플랫폼에서 Playwright CLI를 사용하여 Playwright 테스트를 실행할 수 있습니다.

   • GitHub Actions
   • 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 }} # GitHub Open ID connect values copied in previous steps
             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 Playwright Workspaces
             PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
             # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
           run: dotnet test -- 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
   

다음 명령줄을 사용하여 서비스에서 단일 테스트를 실행할 수 있습니다.

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