다음을 통해 공유


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

이 빠른 시작에서는 고도의 병렬 클라우드 브라우저를 사용하여 Playwright 테스트를 실행하고 Microsoft Playwright Testing Preview를 사용하여 실패한 테스트 문제를 쉽게 해결하는 방법을 알아봅니다. 클라우드 인프라를 사용하여 여러 브라우저, 디바이스 및 운영 체제에서 애플리케이션의 유효성을 검사합니다. Playwright에서 생성한 결과 및 아티팩트가 서비스에 게시되고 서비스 포털에서 볼 수 있습니다.

이 빠른 시작을 완료하면 대규모로 Playwright 테스트를 실행하고 서비스 포털에서 테스트 결과 및 아티팩트를 볼 수 있는 Microsoft Playwright Testing 작업 영역이 있습니다.

Important

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

필수 조건

작업 영역 만들기

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

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

  2. 이미 작업 영역이 있는 경우 기존 작업 영역을 선택하고 다음 단계로 이동합니다.

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

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

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

    Playwright 포털의 '작업 영역 만들기' 페이지를 보여 주는 스크린샷.

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

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

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

Microsoft Playwright 테스트 패키지 설치

서비스를 사용하려면 Microsoft Playwright Testing 패키지를 설치합니다.

npm init @azure/microsoft-playwright-testing

그러면 다음을 수행할 playwright.service.config.ts 파일이 생성됩니다.

  • Microsoft Playwright Testing 서비스에 대한 직접 및 인증 Playwright.
  • 테스트 결과 및 아티팩트를 게시하는 기자를 추가합니다.

이 파일이 이미 있는 경우 패키지에서 재정의하도록 요청합니다.

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

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

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

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

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

    Playwright Testing 포털에서 작업 영역 지역 엔드포인트를 복사하는 방법을 보여 주는 스크린샷.

환경 설정

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

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

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

    npm i --save-dev dotenv
    
  2. Playwright 프로젝트에서 playwright.config.ts 파일과 함께 .env 파일을 만듭니다.

    PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
    

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

인증 설정

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

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

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

주의

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

Playwright 구성에서 아티팩트 사용

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

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

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

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

대규모 단일 테스트 실행

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

참고 항목

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

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

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

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

  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
    

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

주의

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

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

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

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

Microsoft Playwright Testing을 사용하여 여러 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)
    
    Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
    

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

이제 Playwright 포털에서 실패한 테스트 사례를 해결할 수 있습니다.

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

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

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

  2. Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 마케팅 목록의 구성원을 관리할 수 있습니다.

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

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

  3. 추적 뷰어를 사용하면 테스트 실행을 시각적으로 단계별로 실행할 수 있습니다. 마케팅 목록의 구성원을 관리할 수 있습니다.

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

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

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

참고 항목

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

병렬 작업자 구성 최적화

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

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

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

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

다음 단계

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

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