빠른 시작: Microsoft Playwright Testing 미리 보기를 사용하여 대규모로 엔드투엔드 테스트 실행

아티클
05/21/2024

이 빠른 시작에서는 Microsoft Playwright Testing 미리 보기를 사용하여 고도의 병렬 클라우드 브라우저로 Playwright 테스트를 실행하는 방법을 알아봅니다. 클라우드 인프라를 사용하여 여러 브라우저, 디바이스 및 운영 체제에서 애플리케이션의 유효성을 검사합니다.

이 빠른 시작을 완료하면 Playwright 테스트를 대규모로 실행할 수 있는 Microsoft Playwright Testing 작업 영역이 제공됩니다.

Important

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

필수 조건

활성 구독이 있는 Azure 계정. Azure 구독이 아직 없는 경우 시작하기 전에 체험 계정을 만듭니다.
Azure 계정에는 소유자, 기여자 또는 클래식 관리자 역할 중 하나가 필요합니다.
Playwright 프로젝트입니다. 프로젝트가 없으면 Playwright 시작하기 설명서를 사용하여 프로젝트를 만들거나 Microsoft Playwright Testing 샘플 프로젝트를 사용합니다.

작업 영역 만들기

클라우드 브라우저에서 대규모로 Playwright 테스트 실행을 시작하려면 먼저 Playwright 포털에서 Microsoft Playwright Testing 작업 영역을 만듭니다.

Azure 계정으로 Playwright 포털에 로그인합니다.
이미 작업 영역이 있는 경우 기존 작업 영역을 선택하고 다음 단계로 이동합니다.

팁

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

아직 작업 영역이 없다면 + 새 작업 영역을 선택한 후 다음 정보를 제공합니다.

필드	설명
작업 영역 이름	작업 영역을 식별할 수 있는 고유한 이름을 입력합니다. 이름은 영숫자로만 구성할 수 있으며 길이는 3~64자입니다.
Azure 구독	이 Microsoft Playwright Testing 작업 영역에 사용하려는 Azure 구독을 선택합니다.
지역	작업 영역을 호스팅할 지리적 위치를 선택합니다. 이는 작업 영역에 대한 테스트 실행 데이터가 저장되는 위치입니다.

구독에 작업 영역을 만들려면 작업 영역 만들기를 선택합니다.

작업 영역을 만드는 동안 새 리소스 그룹과 Microsoft Playwright Testing Azure 리소스가 Azure 구독에 만들어집니다.

작업 영역 만들기가 완료되면 설정 가이드로 리디렉션됩니다.

서비스 인증을 위한 액세스 토큰 만들기

Microsoft Playwright Testing은 액세스 토큰을 사용하여 사용자에게 서비스로 Playwright 테스트를 실행할 수 있는 권한을 부여합니다. 먼저 Playwright 포털에서 서비스 액세스 토큰을 생성한 다음 환경 변수에 값을 저장합니다.

액세스 토큰을 생성하려면 다음 단계를 수행합니다.

작업 영역 설정 가이드의 액세스 토큰 만들기에서 토큰 만들기을 선택합니다.
작업 영역에 대한 액세스 토큰을 복사합니다.

이후 단계에서 환경을 구성하려면 액세스 토큰 값이 필요합니다.

서비스 지역 엔드포인트 구성

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

서비스 엔드포인트 URL을 가져오려면 다음 단계를 수행합니다.

설정에 지역 엔드포인트 추가에서 작업 영역의 지역 엔드포인트를 복사합니다.

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

환경 설정

환경을 설정하려면 이전 단계에서 가져오는 값으로 PLAYWRIGHT_SERVICE_ACCESS_TOKEN 및 PLAYWRIGHT_SERVICE_URL 환경 변수를 구성해야 합니다.

환경을 관리하려면 dotenv 모듈을 사용하는 것이 좋습니다. dotenv를 사용하면 .env 파일에 환경 변수를 정의합니다.

프로젝트에 dotenv 모듈을 추가합니다.
```
npm i --save-dev dotenv
```
Playwright 프로젝트에서 playwright.config.ts 파일과 함께 .env 파일을 만듭니다.
```
PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
{MY-ACCESS-TOKEN} 및 {MY-REGION-ENDPOINT} 텍스트 자리 표시자를 이전에 복사한 값으로 바꿔야 합니다.

주의

액세스 토큰 값 유출을 방지하려면 소스 코드 리포지토리에 .env 파일을 추가하지 마세요.

서비스 구성 파일 추가

Microsoft Playwright Testing 작업 영역에서 Playwright 테스트를 실행하려면 Playwright 구성 파일과 함께 서비스 구성 파일을 추가해야 합니다. 서비스 구성 파일은 환경 변수를 참조하여 작업 영역 엔드포인트와 액세스 토큰을 가져옵니다.

프로젝트에 서비스 구성을 추가하려면 다음 안내를 따릅니다.

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

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

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

/*
* This file enables Playwright client to connect to remote browsers.
* It should be placed in the same directory as playwright.config.ts.
*/

import { defineConfig } from '@playwright/test';
import config from './playwright.config';
import dotenv from 'dotenv';

// Define environment on the dev box in .env file:
//  .env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
//    PLAYWRIGHT_SERVICE_URL=XXX

// Define environment in your GitHub workflow spec.
//  env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
//    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
//    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}

dotenv.config();

// Name the test run if it's not named yet.
process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();

// Can be 'linux' or 'windows'.
const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';

export default defineConfig(config, {
  // Define more generous timeout for the service operation if necessary.
  // timeout: 60000,
  // expect: {
  //   timeout: 10000,
  // },
  workers: 20,

  // Enable screenshot testing and configure directory with expectations.
  // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
  ignoreSnapshots: false,
  snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
  
  use: {
    // Specify the service endpoint.
    connectOptions: {
      wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
        // Can be 'linux' or 'windows'.
        os,
        runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
      })}`,
      timeout: 30000,
      headers: {
        'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
      },
      // Allow service to access the localhost.
      exposeNetwork: '<loopback>'
    }
  },
  // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
  projects: config.projects? config.projects : [{}]
});

파일을 저장합니다.

Microsoft Playwright Testing을 통해 대규모 테스트 실행

이제 Microsoft Playwright Testing을 통해 클라우드에서 Playwright 테스트를 실행하기 위한 구성이 준비되었습니다. Playwright CLI를 사용하여 테스트를 실행하거나 Playwright Test Visual Studio Code 확장을 사용할 수 있습니다.

대규모 단일 테스트 실행

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

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

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

Playwright CLI
Visual Studio Code

Playwright CLI를 사용하여 Microsoft Playwright Testing으로 테스트를 실행하려면 서비스 구성 파일을 명령줄 매개 변수로 전달합니다.

터미널 창을 엽니다.
작업 영역의 원격 브라우저에서 Playwright 테스트를 실행하려면 다음 명령을 입력합니다.

{name-of-file.spec.ts} 텍스트 자리 표시자를 테스트 사양 파일 이름으로 바꿉니다.
```
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
```
테스트가 완료되면 터미널에서 테스트 상태를 확인할 수 있습니다.
```
Running 1 test using 1 worker
    1 passed (2.2s)

To open last HTML report run:

npx playwright show-report
```

Microsoft Playwright Testing을 사용하여 Visual Studio Code에서 단일 Playwright 테스트를 실행하려면 테스트 탐색기 보기에서 서비스 구성 파일을 선택합니다. 그런 다음 테스트 목록에서 테스트를 선택하고 실행합니다.

Playwright Test Visual Studio Code 확장을 설치합니다.
작업 표시줄에서 테스트 탐색기 보기를 엽니다.

테스트 탐색기는 Playwright 테스트와 프로젝트의 서비스 구성을 자동으로 검색합니다.
기본 프로필 선택을 선택한 다음 서비스 구성 파일에서 기본 프로젝트를 선택합니다.

서비스 실행 프로필은 이전에 추가한 playwright.service.config.ts 파일에서 가져옵니다.

기본 프로필을 설정하면 서비스로 테스트를 자동으로 실행하거나 여러 Playwright 프로젝트를 동시에 실행할 수 있습니다.
테스트 목록에서 테스트 옆에 있는 테스트 실행 단추를 선택하여 실행합니다.

테스트는 기본 프로필에서 선택한 프로젝트에서 실행됩니다. 서비스 구성에서 하나 이상의 프로젝트를 선택한 경우 테스트는 작업 영역의 원격 브라우저에서 실행됩니다.

팁

원격 브라우저에서 테스트를 실행할 때 디버그 테스트 단추를 사용하면 테스트 코드를 디버그할 수 있습니다.
Visual Studio Code에서 직접 테스트 결과를 볼 수 있습니다.

이제 서비스를 사용하여 여러 테스트를 실행하거나 원격 브라우저에서 전체 테스트 도구 모음을 실행할 수 있습니다.

주의

테스트 도구 모음의 크기에 따라 할당된 무료 테스트 시간을 초과하는 테스트 시간에 대해 추가 요금이 발생할 수 있습니다.

대규모로 전체 테스트 도구 모음 실행

이제 Microsoft Playwright Testing을 통해 단일 테스트를 실행할 수 있음의 유효성을 검사했으므로 대규모 전체 Playwright 테스트 도구 모음을 실행할 수 있습니다.

Microsoft Playwright Testing을 통해 전체 Playwright 테스트 도구 모음을 실행하려면 다음 단계를 수행합니다.

Playwright CLI
Visual Studio Code

Microsoft Playwright Testing을 사용하여 여러 Playwright 테스트 또는 전체 테스트 도구 모음을 실행할 때 선택적으로 병렬 작업자 수를 명령줄 매개 변수로 지정할 수 있습니다.

터미널 창을 엽니다.
작업 영역의 원격 브라우저에서 Playwright 테스트 도구 모음을 실행하려면 다음 명령을 입력합니다.
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
테스트 도구 모음의 크기에 따라 이 명령은 최대 20개의 병렬 작업자에 대해 테스트를 실행합니다.

테스트가 완료되면 터미널에서 테스트 상태를 확인할 수 있습니다.
```
Running 6 tests using 6 workers
    6 passed (18.2s)

To open last HTML report run:

    npx playwright show-report
```

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

작업 영역에 대한 테스트 실행 메타데이터와 활동 로그를 보려면 Playwright 포털로 이동합니다.

각 테스트 실행에 대한 활동 로그에는 총 테스트 완료 시간, 병렬 작업자 수, 테스트 시간(분) 등의 세부 정보가 나열됩니다.

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

이제 Microsoft Playwright Testing이 Playwright 포털에서 테스트 결과 보기를 지원합니다. 이 기능은 초대 전용 기능으로만 사용할 수 있습니다.

Important

Microsoft Playwright Testing 서비스의 보고 기능은 초대 전용 미리 보기 기간 중에 무료로 제공됩니다. 그러나 클라우드 호스팅 브라우저의 기존 기능은 Azure 가격 책정 플랜에 따라 계속 비용이 청구됩니다.

보고 도구에 대한 액세스 권한이 있다면 다음 단계를 사용하여 테스트를 설정합니다.

작업 영역 홈페이지에서 설정으로 이동합니다.
설정에서 일반을 선택하고 보고가 사용으로 설정되어 있는지 확인합니다.
환경 설정 섹션에서 설명한 대로 환경이 올바르게 설정되었는지 확인합니다.
보고 패키지 설치

이 기능은 현재 공개 상태가 아니므로 패키지를 설치하려면 몇 가지 추가 단계를 수행해야 합니다. 기능이 공개 상태가 되면 이러한 단계가 필요하지 않습니다.
1. Playwright 구성 파일과 동일한 위치에 이름이 .npmrc인 파일을 만듭니다.
2. 파일에 다음 내용을 추가하고 저장합니다.
```
@microsoft:registry=https://npm.pkg.github.com
```
3. 다음 단계에 따라 GitHub 개인용 액세스 토큰을 만듭니다.
토큰에 read:packages 권한을 제공해야 합니다. 이 문서의 나머지 부분에서는 이 토큰을 PAT_TOKEN_PACKAGE라고 합니다.
1. 터미널의 Playwright 구성 파일 위치에서 다음 명령을 실행합니다. PAT_TOKEN_PACKAGE를 이전 단계에서 생성된 토큰으로 바꿉니다.
```
    npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
```
2. 패키지로 package.json 파일을 업데이트합니다.
```
 "dependencies": {
            "@microsoft/mpt-reporter": "0.1.1-alpha-8839338250-1.0"
    }
```
3. npm install을 실행하여 패키지를 설치합니다.

Playwright 구성 파일 업데이트

다른 보고자와 같은 방식으로 Playwright.config.ts에 Playwright Testing 보고자를 추가합니다.

import { defineConfig } from '@playwright/test';

export default defineConfig({
    reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }],
    ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
    ],
});

더 나은 문제 해결을 위해 구성에서 아티팩트가 활성화되어 있는지 확인합니다.

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

Playwright 테스트 실행

npx playwright test 명령을 실행하고 Playwright Testing 포털에서 결과 및 아티팩트를 볼 수 있습니다.

팁

Microsoft Playwright Testing 서비스를 사용하여 클라우드 호스팅 브라우저 기능과 관계없이 포털에 테스트 결과를 게시할 수 있습니다.

병렬 작업자 구성 최적화

테스트가 서비스와 함께 원활하게 실행되면 병렬 작업자 수를 다양하게 실험하여 테스트 완료 시간을 최소화하는 최적의 구성을 결정합니다.

Microsoft Playwright Testing을 사용하면 최대 50개의 병렬 작업자로 실행할 수 있습니다. 클라이언트 컴퓨터의 CPU, 메모리, 네트워크 리소스, 대상 애플리케이션의 로드 처리 용량, 테스트에서 수행되는 작업 형식 등 여러 요소가 프로젝트에 가장 적합한 구성에 영향을 미칩니다.

Playwright CLI 명령줄에서 병렬 작업자 수를 지정하거나 Playwright 서비스 구성 파일에서 workers 속성을 구성할 수 있습니다.

테스트 도구 모음 완료 최적화를 위한 최적의 구성을 결정하는 방법에 대해 자세히 알아봅니다.

다음 단계

Playwright 포털에서 Microsoft Playwright Testing 작업 영역을 성공적으로 만들고 클라우드 브라우저에서 Playwright 테스트를 실행했습니다.

CI/CD 워크플로에서 Playwright 테스트를 실행하여 지속적인 엔드투엔드 테스트를 설정하려면 다음 빠른 시작으로 진행합니다.

CI/CD에서 지속적인 엔드투엔드 테스트 설정

다음을 통해 공유