다음을 통해 공유


빠른 시작: Microsoft Playwright Testing 미리 보기를 사용하여 연속 엔드투엔드 테스트 설정

이 빠른 시작에서는 Microsoft Playwright Testing 미리 보기를 사용해 연속 엔드투엔드 테스트를 설정하여 웹앱이 모든 코드 커밋을 통해 여러 브라우저 및 운영 체제에서 올바르게 실행되는지 확인하고 서비스 대시보드를 사용하여 쉽게 테스트 문제를 해결합니다. GitHub Actions, Azure Pipelines 또는 기타 CI 플랫폼과 같은 CI(연속 통합) 워크플로에 Playwright 테스트를 추가하는 방법을 알아봅니다.

이 빠른 시작을 완료하면 Playwright 테스트 도구 모음을 대규모로 실행하고 Microsoft Playwright Testing을 사용하여 테스트 문제를 쉽게 해결할 수 있는 CI 워크플로를 갖게 됩니다.

Important

Microsoft Playwright Testing은 현재 미리 보기 상태입니다. 베타, 미리 보기 또는 아직 일반 공급으로 릴리스되지 않은 Azure 기능에 적용되는 약관은 Microsoft Azure 미리 보기에 대한 보충 사용 약관을 참조하세요.

필수 조건

  • 활성 구독이 있는 Azure 계정. Azure 구독이 아직 없는 경우 시작하기 전에 체험 계정을 만듭니다.

  • Microsoft Playwright Testing 작업 영역. 빠른 시작을 완료합니다 . 대규모 로 Playwright 테스트를 실행하고 작업 영역을 만듭니다.

서비스 지역 엔드포인트 URL 가져오기

서비스 구성에서는 지역별 서비스 엔드포인트를 제공해야 합니다. 엔드포인트는 작업 영역을 만들 때 선택한 Azure 지역에 따라 다릅니다.

서비스 엔드포인트 URL을 가져오고 CI 워크플로 비밀로 저장하려면 다음 단계를 수행합니다.

  1. Azure 계정으로 Playwright 포털에 로그인합니다.

  2. 작업 영역 홈페이지에서 설정 가이드 보기를 선택합니다.

    작업 영역이 여러 개인 경우 페이지 상단에서 작업 영역 이름을 선택한 다음 모든 작업 영역 관리를 선택하여 다른 작업 영역으로 전환할 수 있습니다.

  3. 설정에 지역 엔드포인트 추가에서 서비스 엔드포인트 URL을 복사합니다.

    엔드포인트 URL은 작업 영역을 만들 때 선택한 Azure 지역과 일치합니다.

  4. 서비스 엔드포인트 URL을 CI 워크플로 비밀에 저장합니다.

    비밀 이름
    PLAYWRIGHT_SERVICE_URL 이전에 복사한 엔드포인트 URL을 붙여넣습니다.

서비스 구성 파일 추가

서비스를 실행하도록 구성된 Playwright 테스트가 없는 경우 서비스 구성 파일을 리포지토리에 추가합니다. 다음 단계에서는 Playwright CLI에서 이 서비스 구성 파일을 지정합니다.

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

    선택적으로 샘플 리포지토리playwright.service.config.ts 파일을 사용합니다.

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

    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']],
      }
    );
    

    기본적으로 서비스 구성을 사용하면 다음을 수행할 수 있습니다.

    • 클라우드 호스팅 브라우저를 사용하여 병렬로 테스트를 실행하여 빌드 파이프라인을 가속화합니다.
    • 서비스에 게시된 테스트 결과 및 아티팩트 액세스에 쉽게 액세스하여 문제 해결을 간소화합니다.

    그러나 이러한 기능 중 하나 또는 둘 다를 사용하도록 선택할 수 있습니다. 요구 사항에 따라 서비스 기능을 사용하고 서비스 구성 파일을 업데이트하는 방법을 참조하세요.

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

package.json 파일 업데이트

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

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

Playwright 구성에서 아티팩트 사용

playwright.config.ts 프로젝트 파일에서 필요한 모든 아티팩트가 수집되는지 확인합니다.

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

서비스 구성 설정

  1. 프로젝트의 루트 디렉터리에 새 파일을 PlaywrightServiceSetup.cs 만듭니다. 이 파일은 서비스를 사용하여 클라이언트를 쉽게 인증할 수 있도록 합니다.

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

    using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
    using NUnit.Framework;
    
    namespace PlaywrightTests; // Remember to change this as per your project namespace
    
    [SetUpFixture]
    public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
    
  3. 파일을 저장하고 소스 코드 리포지토리에 커밋합니다.

서비스 패키지 설치

프로젝트에서 Microsoft Playwright Testing 패키지를 설치합니다.

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

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

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

프로젝트에 대한 파일을 추가하거나 업데이트 .runsettings 합니다.

서비스로 실행하기 위해 아직 Playwright 테스트를 구성하지 않은 경우 리포지토리에 파일을 추가 .runsettings 합니다. 다음 단계에서는 Playwright CLI에서 이 서비스 구성 파일을 지정합니다.

  1. .runsettings 파일을 만듭니다.

    선택적으로 샘플 리포지토리.runsettings 파일을 사용합니다.

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

    <?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>
    

    이 파일의 설정을 통해 다음을 수행할 수 있습니다.

    • 클라우드 호스팅 브라우저를 사용하여 병렬로 테스트를 실행하여 빌드 파이프라인을 가속화합니다.
    • 빠른 문제 해결을 위해 테스트 결과 및 아티팩트 게시

    그러나 이러한 기능 중 하나 또는 둘 다를 사용하도록 선택할 수 있습니다. 요구 사항에 따라 서비스 기능을 사용하고 서비스 구성 파일을 업데이트하는 방법을 참조하세요.

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

Playwright 설정에서 아티팩트 사용

스크린샷, 비디오 및 추적과 같은 아티팩트 캡처를 위해 Playwright를 설정합니다.

  • 스크린샷은 캡처 스크린샷을 참조 하세요.
  • 비디오의 경우 테스트에 대한 비디오 녹화를 참조 하세요.
  • 추적은 추적 기록을 참조하세요 .

이러한 아티팩트가 수집되면 테스트 보고서에서 사용할 수 있는지 확인하기 위해 아티팩트(아티팩트)에 연결 TestContext 합니다. 자세한 내용은 NUnit에 대한 샘플 프로젝트를 참조하세요.

인증 설정

Playwright 테스트를 실행하는 CI 컴퓨터는 브라우저에서 테스트를 실행하고 테스트 결과 및 아티팩트 게시를 위해 Playwright Testing 서비스를 사용하여 인증해야 합니다.

이 서비스는 두 가지 인증 방법인 Microsoft Entra ID 및 액세스 토큰을 제공합니다. Microsoft Entra ID를 사용하여 파이프라인을 인증하는 것이 좋습니다.

Microsoft Entra ID를 사용하여 인증 설정

GitHub Actions를 사용하는 경우 GitHub OpenID Connect를 사용하여 서비스에 연결할 수 있습니다. 단계에 따라 통합을 설정합니다.

필수 조건

옵션 1: Microsoft Entra 애플리케이션

옵션 2: 사용자 할당 관리 ID

GitHub 비밀 만들기
  • 이전 단계에서 얻은 값을 GitHub 리포지토리에 비밀로 추가합니다. GitHub 작업 비밀 설정을 참조하세요. 이러한 변수는 이후 단계에서 GitHub Action 워크플로에서 사용됩니다.
GitHub 비밀 원본(Microsoft Entra 애플리케이션 또는 관리 ID)
AZURE_CLIENT_ID 클라이언트 ID
AZURE_SUBSCRIPTION_ID 구독 ID
AZURE_TENANT_ID 디렉터리(테넌트) ID

참고 항목

보안 강화를 위해 GitHub 비밀을 사용하여 중요한 값을 워크플로 파일에 직접 포함하는 대신 저장하는 것이 좋습니다.

액세스 토큰을 사용하여 인증 설정

주의

서비스에 대한 인증에 Microsoft Entra ID를 사용하는 것이 좋습니다. 액세스 토큰을 사용하는 경우 액세스 토큰을 관리하는 방법을 참조 하세요.

Playwright Testing 작업 영역에서 액세스 토큰을 생성하고 설정에서 사용할 수 있습니다. 그러나 향상된 보안으로 인해 인증에 Microsoft Entra ID를 사용하는 것이 좋습니다. 액세스 토큰은 편리하지만 수명이 긴 암호처럼 작동하며 손상되기 쉽습니다.

  1. 액세스 토큰을 사용하는 인증은 기본적으로 사용하지 않도록 설정됩니다. 사용하려면 액세스 토큰 기반 인증을 사용하도록 설정합니다.

  2. 액세스 토큰을 사용하여 인증을 설정합니다.

  3. 액세스 토큰을 CI 워크플로 비밀에 저장하고 GitHub Actions 워크플로 또는 Azure Pipeline yaml 파일에 사용합니다.

비밀 이름
PLAYWRIGHT_SERVICE_ACCESS_TOKEN 이전에 만든 액세스 토큰의 값을 붙여넣습니다.

워크플로 정의 업데이트

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

  1. 워크플로 정의 열기

  2. Microsoft Playwright Testing을 사용하여 Playwright 테스트를 실행하려면 다음 단계를 추가합니다.

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

    
      # 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 (Microsoft Playwright Testing)
      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 Microsoft Playwright Testing
                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 워크플로 정의를 업데이트합니다. .runsettings 파일을 Playwright CLI의 입력 매개 변수로 전달합니다. 환경 변수를 지정하여 환경을 구성합니다.

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

  2. Microsoft Playwright Testing을 사용하여 Playwright 테스트를 실행하려면 다음 단계를 추가합니다.

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

    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 Microsoft Playwright Testing
              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 --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
    
  1. 변경 내용을 저장하고 커밋합니다.

    CI 워크플로가 트리거되면 Playwright 테스트는 클라우드 호스팅 브라우저의 Microsoft Playwright Testing 작업 영역에서 20개의 병렬 작업자에 걸쳐 실행됩니다. 수집된 결과 및 아티팩트가 서비스에 게시되며 서비스 포털에서 볼 수 있습니다.

테스트 실행에 대한 설정을 파일에 정의 .runsettings 할 수 있습니다. 자세한 내용은 서비스 패키지 옵션을 사용하는 방법을 참조 하세요.

참고 항목

기존 작업 영역에는 보고 기능이 기본적으로 사용하도록 설정되어 있습니다. 이 기능은 단계적으로 적용되며 며칠이 걸릴 것입니다. 실패를 방지하려면 계속 진행하기 전에 작업 영역에 대한 Rich diagnostics using reporting 설정이 켜져 있는지 확인합니다. 자세한 내용은 작업 영역에 대한 보고 사용 설정을 참조 하세요.

주의

Microsoft Playwright Testing을 사용하면 총 테스트 시간(분)과 게시된 테스트 결과에 따라 요금이 청구됩니다. 신규 사용자이거나 무료 평가판으로 시작하는 경우 무료 테스트 시간(분)과 테스트 결과가 소진되는 것을 방지하기 위해 전체 테스트 도구 모음 대신 단일 테스트를 대규모로 실행하는 것으로 시작할 수 있습니다.

테스트가 성공적으로 실행되었는지 유효성을 검사한 후 서비스에 대해 더 많은 테스트를 실행하여 테스트 로드를 점진적으로 늘릴 수 있습니다.

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

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

Playwright 포털에서 테스트 실행 및 결과 보기

이제 Playwright 포털에서 CI 파이프라인 문제를 해결할 수 있습니다.

  1. 테스트 실행이 완료되면 Playwright 포털에 대한 링크가 생성됩니다. 자세한 테스트 결과 및 관련 아티팩트 보기를 보려면 이 링크를 엽니다. 포털에는 다음을 비롯한 필수 정보가 표시됩니다.

    • CI 빌드 세부 정보
    • 전체 테스트 실행 상태
    • 테스트 실행에 연결된 커밋 ID

    테스트 실행의 테스트 목록을 보여 주는 스크린샷

  2. Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 다음이 가능합니다.

    • 재시도 간에 전환합니다.
    • 자세한 오류 로그, 테스트 단계 및 연결된 아티팩트(예: 스크린샷 또는 비디오)를 봅니다.
    • 심층 분석을 위해 추적 뷰어 로 직접 이동합니다.

    테스트의 미리 보기를 보여 주는 스크린샷

  3. 추적 뷰어를 사용하면 테스트 실행을 시각적으로 단계별로 실행할 수 있습니다. 다음이 가능합니다.

    • 타임라인을 사용하여 개별 단계를 마우스로 가리키고 각 작업 전후의 페이지 상태를 표시합니다.
    • 각 단계에 대한 자세한 로그, DOM 스냅샷, 네트워크 활동, 오류 및 콘솔 출력을 검사합니다.

    추적 뷰어를 보여 주는 스크린샷.

  1. 테스트 실행이 완료되면 터미널에서 Playwright 포털에 대한 링크를 가져옵니다. 자세한 테스트 결과 및 관련 아티팩트 보기를 보려면 이 링크를 엽니다. 포털에는 다음을 비롯한 필수 정보가 표시됩니다.

    • CI 빌드 세부 정보
    • 전체 테스트 실행 상태
    • 테스트 실행에 연결된 커밋 ID

    테스트 실행의 테스트 목록을 보여 주는 스크린샷

  2. Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 다음이 가능합니다.

    • 자세한 오류 로그 및 연결된 아티팩트(예: 스크린샷 또는 비디오)를 봅니다.
    • 심층 분석을 위해 추적 뷰어 로 직접 이동합니다.

    테스트의 미리 보기를 보여 주는 스크린샷

참고 항목

소유자, 설명 및 범주와 같은 일부 메타데이터는 현재 서비스 대시보드에 표시되지 않습니다. 포함할 추가 정보가 있는 경우 리포지토리에 GitHub 문제를 제출하세요.

  1. 추적 뷰어를 사용하면 테스트 실행을 시각적으로 단계별로 실행할 수 있습니다. 다음이 가능합니다.

    • 타임라인을 사용하여 개별 단계를 마우스로 가리키고 각 작업 전후의 페이지 상태를 표시합니다.
    • 각 단계에 대한 자세한 로그, DOM 스냅샷, 네트워크 활동, 오류 및 콘솔 출력을 검사합니다.

    추적 뷰어를 보여 주는 스크린샷.

Microsoft Playwright Testing 서비스 기능을 독립적으로 사용할 수 있습니다. 클라우드 호스팅 브라우저 기능을 사용하지 않고 포털에 테스트 결과를 게시할 수 있으며, 클라우드 호스팅 브라우저만 사용하여 테스트 결과를 게시하지 않고도 테스트 제품군을 신속하게 처리할 수 있습니다. 자세한 내용은 서비스 기능을 사용하는 방법을 참조 하세요.

참고 항목

게시하는 테스트 결과 및 아티팩트가 90일 동안 서비스에 유지됩니다. 그런 다음, 자동으로 삭제됩니다.

클라우드 호스팅 브라우저에서 대규모로 Playwright 테스트를 실행하도록 연속 엔드투엔드 테스트 워크플로를 올바르게 설정했습니다.