빠른 시작: Playwright 작업 영역을 사용하여 대규모로 엔드투엔드 테스트 실행

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

이 빠른 시작을 완료하면 극작가 테스트를 대규모로 실행할 수 있는 극작가 작업 영역이 있습니다.

필수 조건

• 활성 구독이 있는 Azure 계정. Azure 구독이 없는 경우, 시작하기 전에 무료 계정을 만드십시오.
• Azure 계정에는 소유자, 기여자 또는 클래식 관리자 역할 중 하나가 필요합니다.
• Playwright 프로젝트입니다. 프로젝트가 없는 경우 Playwright 시작 설명서를 사용하여 프로젝트를 만들거나 Playwright 작업 영역 샘플 프로젝트를 사용합니다.
• Azure CLI. Azure CLI가 없는 경우 Azure CLI 설치를 참조하세요.

작업 영역 만들기

클라우드 브라우저에서 Playwright 테스트를 실행하기 시작하려면 먼저 Playwright 작업 영역을 만들어야 합니다.

1. Azure Portal에 로그인합니다.

2. 포털의 왼쪽 상단 모서리에 있는 메뉴 단추를 선택한 다음, 리소스 만들기를 선택합니다.

   

3. 검색창에 Playwright Workspaces 를 입력합니다.

4. Playwright 작업 영역 카드를 선택한 다음, 만들기를 선택합니다.

   

5. 새 Playwright 작업 영역을 구성하려면 다음 정보를 제공합니다.

   분야	설명
   구독	이 Playwright 작업 영역에 사용할 Azure 구독을 선택합니다.
   리소스 그룹	기존 리소스 그룹을 선택합니다. 또는 새로 만들기를 선택하고 새 리소스 그룹의 고유한 이름을 입력합니다.
   이름	작업 영역을 식별할 수 있는 고유한 이름을 입력합니다. 이름은 영숫자 및 하이픈으로만 구성되며 길이는 3자에서 24자 사이입니다.
   위치	작업 영역을 호스팅할 지리적 위치를 선택합니다. 이 위치는 테스트 실행 결과가 저장되는 위치도 결정합니다.

   비고

   필요에 따라 태그 탭에서 세부 정보를 구성할 수 있습니다. 태그는 동일한 태그를 여러 개의 리소스 및 리소스 그룹에 적용하여 리소스를 범주화하고 통합된 청구를 볼 수 있는 이름/값 쌍입니다.

6. 리소스 구성을 마쳤으면 검토 + 만들기를 선택합니다.

7. 모든 구성 설정을 검토하고 만들기 를 선택하여 Playwright 작업 영역의 배포를 시작합니다.

   프로세스가 완료되면 배포 성공 메시지가 표시됩니다.

8. 새 작업 영역을 보려면 리소스로 이동을 선택합니다.

   

Playwright 작업 영역 패키지 설치

서비스를 사용하려면 Playwright 작업 영역 패키지를 설치합니다.

npm init @azure/playwright@latest

이 작업은 극작가 작업 영역에 대한 극작가를 직접 인증하는 역할을 하는 파일을 생성 playwright.service.config.ts 합니다.

이 파일이 이미 있는 경우 패키지에서 덮어쓰도록 요청합니다.

서비스를 사용하려면 Playwright 작업 영역 패키지를 설치합니다.

dotnet add package Azure.Developer.Playwright.NUnit

브라우저 엔드포인트 구성

설정에서 지역별 브라우저 엔드포인트를 제공해야 합니다. 엔드포인트는 작업 영역을 만들 때 선택한 Azure 지역에 따라 다릅니다.

브라우저 엔드포인트 URL을 얻으려면 다음 단계를 수행합니다.

1. Azure 계정으로 Azure Portal 에 로그인하고 작업 영역으로 이동합니다.

2. 시작 페이지를 선택합니다.

   

3. 설정에 브라우저 엔드포인트 추가에서 엔드포인트 URL을 복사합니다.

   환경 변수에서 이 URL을 PLAYWRIGHT_SERVICE_URL 사용할 수 있는지 확인합니다.

   

환경 설정

환경을 설정하려면 이전 단계에서 얻은 값으로 PLAYWRIGHT_SERVICE_URL 환경 변수를 구성해야 합니다.

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

1. 프로젝트에 dotenv 모듈을 추가합니다.

   npm i --save-dev dotenv
   

2. playwright.service.config.ts 다음 코드 조각을 추가합니다.

   require('dotenv').config();
   

3. Playwright 프로젝트에서 .env 파일과 함께 playwright.config.ts 파일을 만듭니다.

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   {MY-REGION-ENDPOINT} 텍스트 자리 표시자를 이전에 복사한 값으로 바꿔야 합니다.

서비스 구성 설정

다음 콘텐츠를 사용하여 프로젝트에 파일을 PlaywrightServiceSetup.cs 만듭니다.

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;

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

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

비고

프로젝트에서 버전 1.50 이상을 사용하는 Microsoft.Playwright.NUnit 지 확인합니다.

인증 설정

Playwright 작업 영역에서 Playwright 테스트를 실행하려면 서비스를 사용하여 테스트를 실행하는 경우 Playwright 클라이언트를 인증해야 합니다. 로컬 개발 머신 또는 CI 머신일 수 있습니다.

이 서비스는 두 가지 인증 방법인 Microsoft Entra ID 및 액세스 토큰을 제공합니다.

Microsoft Entra ID는 Azure 자격 증명을 사용하여 보안 액세스를 위해 Azure 계정에 로그인해야 합니다. 아니면 Playwright 작업 영역에서 액세스 토큰을 생성하고 설정에서 사용할 수 있습니다.

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

Microsoft Entra ID는 서비스에 대한 기본 및 권장 인증입니다. 로컬 개발 머신에서 Azure CLI 사용하여 로그인할 수 있습니다.

az login

비고

여러 Microsoft Entra 테넌트의 일부인 경우 작업 영역이 속한 테넌트에 로그인해야 합니다. Azure Portal에서 테넌트 ID를 가져올 수 있습니다. Microsoft Entra 테넌트찾기를 참조하세요. ID를 가져오면 명령 az login --tenant <TenantID>을(를) 사용하여 로그인합니다.

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

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

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

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

주의

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

Playwright 작업 영역을 사용하여 대규모로 테스트 실행

이제 Playwright 작업 영역을 사용하여 클라우드에서 Playwright 테스트를 실행하기 위한 구성을 준비했습니다. Playwright CLI를 사용하여 테스트를 실행하거나 Playwright Test Visual Studio Code 확장을 사용할 수 있습니다.

서비스를 사용하여 단일 테스트 실행

Playwright 작업 영역을 사용하면 총 테스트 시간(분)에 따라 요금이 청구됩니다. 처음 사용자이거나 무료 평가판을 시작하는 경우 무료 평가판 제한을 소진하지 않도록 전체 테스트 제품군 대신 단일 테스트를 실행하는 것으로 시작할 수 있습니다.

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

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

극작가 CLI

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

1. 터미널 창을 엽니다.

2. 작업 영역의 원격 브라우저에서 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
   

Visual Studio Code

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

1. Playwright Test Visual Studio Code 확장을 설치합니다.

2. 작업 표시줄에서 테스트 탐색기 보기를 엽니다.

   테스트 탐색기는 Playwright 테스트와 프로젝트의 서비스 구성을 자동으로 검색합니다.

   

3. 기본 프로필 선택을 선택한 다음 서비스 구성 파일에서 기본 프로젝트를 선택합니다.

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

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

   

4. 테스트 목록에서 테스트 옆에 있는 테스트 실행 단추를 선택하여 실행합니다.

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

   

   팁 (조언)

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

5. Visual Studio Code에서 직접 테스트 결과를 볼 수 있습니다.

   

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

주의

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

서비스를 사용하여 전체 테스트 도구 모음 실행

이제 Playwright 작업 영역에서 단일 테스트를 실행할 수 있는지 확인했으므로 대규모로 전체 Playwright 테스트 제품군을 실행할 수 있습니다.

다음 단계를 수행하여 Playwright 작업 영역으로 전체 Playwright 테스트 제품군을 실행합니다.

극작가 CLI

Playwright 작업 영역을 사용하여 여러 Playwright 테스트 또는 전체 테스트 제품군을 실행하는 경우 필요에 따라 병렬 작업자 수를 명령줄 매개 변수로 지정할 수 있습니다.

1. 터미널 창을 엽니다.

2. 작업 영역의 원격 브라우저에서 Playwright 테스트 도구 모음을 실행하려면 다음 명령을 입력합니다.

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   테스트 도구 모음의 크기에 따라 이 명령은 최대 20개의 병렬 작업자에 대해 테스트를 실행합니다.

   테스트가 완료되면 터미널에서 테스트 상태를 확인할 수 있습니다.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   

Visual Studio Code

Playwright 작업 영역을 사용하여 Visual Studio Code에서 Playwright 테스트 제품군을 실행하려면 다음을 수행합니다.

1. 작업 표시줄에서 테스트 탐색기 보기를 엽니다.

2. 테스트 실행 단추를 선택하여 Playwright 작업 영역에서 모든 테스트를 실행합니다.

   모든 테스트를 실행하면 기본 프로필이 사용됩니다. 이전 단계에서는 서비스 구성의 프로젝트를 사용하도록 기본 프로필을 구성했습니다.

   

   팁 (조언)

   테스트 디버그 단추를 사용하여 원격 브라우저에서 테스트를 실행할 때 테스트 코드를 계속 디버그할 수 있습니다.

3. 또는 목록에서 특정 서비스 구성을 선택하여 특정 브라우저 구성에 대한 테스트만 실행할 수도 있습니다.

   

4. 테스트 결과 탭에서 모든 테스트 결과를 볼 수 있습니다.

위에서 만든 구성을 사용하여 서비스에서 관리하는 브라우저에 대해 Playwright 테스트를 실행합니다.

dotnet test -- NUnit.NumberOfTestWorkers=20

테스트 실행이 완료되면 터미널에서 테스트 상태를 볼 수 있습니다.

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

병렬 작업자 구성 최적화

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

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

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

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

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

다음 단계

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

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

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