빠른 시작: 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 테스트를 실행하고 작업 영역을 만듭니다.
- GitHub 계정. GitHub 계정이 없으면 무료 계정을 만들 수 있습니다.
- Playwright 테스트 사양 및 GitHub Actions 워크플로가 포함된 GitHub 리포지토리입니다. 리포지토리를 만들려면 새 리포지토리 만들기를 참조하세요.
- 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 테스트가 없는 경우 서비스 구성 파일을 리포지토리에 추가합니다. 다음 단계에서는 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.6"
}
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 { };
파일을 저장하고 소스 코드 리포지토리에 커밋합니다.
서비스 패키지 설치
프로젝트에서 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에서 이 서비스 구성 파일을 지정합니다.
새
.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 설정에서 아티팩트 사용
스크린샷, 비디오 및 추적과 같은 아티팩트 캡처를 위해 Playwright를 설정합니다.
이러한 아티팩트가 수집되면 테스트 보고서에서 사용할 수 있는지 확인하기 위해 아티팩트(아티팩트)에 연결 TestContext
합니다. 자세한 내용은 NUnit에 대한 샘플 프로젝트를 참조하세요.
인증 설정
Playwright 테스트를 실행하는 CI 컴퓨터는 브라우저에서 테스트를 실행하고 테스트 결과 및 아티팩트 게시를 위해 Playwright Testing 서비스를 사용하여 인증해야 합니다.
이 서비스는 두 가지 인증 방법인 Microsoft Entra ID 및 액세스 토큰을 제공합니다. Microsoft Entra ID를 사용하여 파이프라인을 인증하는 것이 좋습니다.
Microsoft Entra ID를 사용하여 인증 설정
GitHub Actions를 사용하는 경우 GitHub OpenID Connect를 사용하여 서비스에 연결할 수 있습니다. 단계에 따라 통합을 설정합니다.
필수 조건
옵션 1: Microsoft Entra 애플리케이션
Azure Portal, Azure CLI 또는 Azure PowerShell에서 서비스 주체를 사용하여 Microsoft Entra 애플리케이션을 만듭니다.
클라이언트 ID, 구독 ID 및 디렉터리(테넌트) ID의 값을 복사하여 나중에 GitHub Actions 워크플로에서 사용합니다.
Owner
이전 단계에서 만든 서비스 주체에 또는Contributor
역할을 할당합니다. 이러한 역할은 극작가 테스트 작업 영역에 할당되어야 합니다. 자세한 내용은 액세스를 관리하는 방법을 참조 하세요.GitHub Actions에서 발급한 토큰을 GitHub 리포지토리에 신뢰하도록 Microsoft Entra 애플리케이션 에서 페더레이션 ID 자격 증명을 구성합니다.
옵션 2: 사용자 할당 관리 ID
사용자 할당 관리 ID 만들기의 지침에 따라 만듭니다.
클라이언트 ID, 구독 ID 및 디렉터리(테넌트) ID의 값을 복사하여 나중에 GitHub Actions 워크플로에서 사용합니다.
Owner
이전 단계에서 만든 사용자 할당 관리 ID에 해당 또는Contributor
역할을 할당합니다. 이러한 역할은 극작가 테스트 작업 영역에 할당되어야 합니다. 자세한 내용은 액세스를 관리하는 방법을 참조 하세요.GitHub Actions에서 발급한 토큰을 GitHub 리포지토리에 신뢰하도록 사용자 할당 관리 ID에서 페더레이션 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를 사용하는 것이 좋습니다. 액세스 토큰은 편리하지만 수명이 긴 암호처럼 작동하며 손상되기 쉽습니다.
액세스 토큰을 사용하는 인증은 기본적으로 사용하지 않도록 설정됩니다. 사용하려면 액세스 토큰 기반 인증을 사용하도록 설정합니다.
액세스 토큰을 사용하여 인증을 설정합니다.
액세스 토큰을 CI 워크플로 비밀에 저장하고 GitHub Actions 워크플로 또는 Azure Pipeline yaml 파일에 사용합니다.
비밀 이름 | 값 |
---|---|
PLAYWRIGHT_SERVICE_ACCESS_TOKEN | 이전에 만든 액세스 토큰의 값을 붙여넣습니다. |
워크플로 정의 업데이트
Playwright CLI를 사용하여 Playwright 테스트를 실행하도록 CI 워크플로 정의를 업데이트합니다. 서비스 구성 파일을 Playwright CLI에 대한 입력 매개 변수로 전달합니다. 환경 변수를 지정하여 환경을 구성합니다.
워크플로 정의 열기
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의 입력 매개 변수로 전달합니다. 환경 변수를 지정하여 환경을 구성합니다.
CI 워크플로 정의를 엽니다.
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
변경 내용을 저장하고 커밋합니다.
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 파이프라인 문제를 해결할 수 있습니다.
테스트 실행이 완료되면 Playwright 포털에 대한 링크가 생성됩니다. 자세한 테스트 결과 및 관련 아티팩트 보기를 보려면 이 링크를 엽니다. 포털에는 다음을 비롯한 필수 정보가 표시됩니다.
- CI 빌드 세부 정보
- 전체 테스트 실행 상태
- 테스트 실행에 연결된 커밋 ID
Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 다음이 가능합니다.
- 재시도 간에 전환합니다.
- 자세한 오류 로그, 테스트 단계 및 연결된 아티팩트(예: 스크린샷 또는 비디오)를 봅니다.
- 심층 분석을 위해 추적 뷰어 로 직접 이동합니다.
추적 뷰어를 사용하면 테스트 실행을 시각적으로 단계별로 실행할 수 있습니다. 다음이 가능합니다.
- 타임라인을 사용하여 개별 단계를 마우스로 가리키고 각 작업 전후의 페이지 상태를 표시합니다.
- 각 단계에 대한 자세한 로그, DOM 스냅샷, 네트워크 활동, 오류 및 콘솔 출력을 검사합니다.
테스트 실행이 완료되면 터미널에서 Playwright 포털에 대한 링크를 가져옵니다. 자세한 테스트 결과 및 관련 아티팩트 보기를 보려면 이 링크를 엽니다. 포털에는 다음을 비롯한 필수 정보가 표시됩니다.
- CI 빌드 세부 정보
- 전체 테스트 실행 상태
- 테스트 실행에 연결된 커밋 ID
Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 다음이 가능합니다.
- 자세한 오류 로그 및 연결된 아티팩트(예: 스크린샷 또는 비디오)를 봅니다.
- 심층 분석을 위해 추적 뷰어 로 직접 이동합니다.
참고 항목
소유자, 설명 및 범주와 같은 일부 메타데이터는 현재 서비스 대시보드에 표시되지 않습니다. 포함할 추가 정보가 있는 경우 리포지토리에 GitHub 문제를 제출하세요.
팁
Microsoft Playwright Testing 서비스 기능을 독립적으로 사용할 수 있습니다. 클라우드 호스팅 브라우저 기능을 사용하지 않고 포털에 테스트 결과를 게시할 수 있으며, 클라우드 호스팅 브라우저만 사용하여 테스트 결과를 게시하지 않고도 테스트 제품군을 신속하게 처리할 수 있습니다. 자세한 내용은 서비스 기능을 사용하는 방법을 참조 하세요.
참고 항목
게시하는 테스트 결과 및 아티팩트가 90일 동안 서비스에 유지됩니다. 그런 다음, 자동으로 삭제됩니다.
관련 콘텐츠
클라우드 호스팅 브라우저에서 대규모로 Playwright 테스트를 실행하도록 연속 엔드투엔드 테스트 워크플로를 올바르게 설정했습니다.