빠른 시작: Microsoft Playwright Testing 미리 보기를 사용하여 테스트 문제 해결

아티클
12/04/2024

이 빠른 시작에서는 Microsoft Playwright 테스트 미리 보기에 게시된 보고서 및 아티팩트를 사용하여 쉽게 Playwright 테스트 문제를 해결하는 방법을 알아봅니다. 또한 이 가이드에서는 서비스에서 제공하는 클라우드 호스팅 브라우저에서 테스트를 실행하는지 여부에 관계없이 보고 기능을 활용하는 방법을 보여 줍니다.

이 빠른 시작을 완료하면 서비스 포털에서 테스트 결과 및 아티팩트를 볼 수 있는 Microsoft Playwright Testing 작업 영역이 생성됩니다.

Important

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

배경

Microsoft Playwright Testing 서비스를 사용하면 다음을 수행할 수 있습니다.

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

서비스의 이러한 두 기능은 독립적으로 또는 함께 사용할 수 있으며 각각 자체 가격 책정 계획을 가지고 있습니다. 다음을 유연하게 수행할 수 있습니다.

클라우드 호스팅 브라우저에서 테스트를 실행하고 결과를 서비스에 게시하는 두 기능을 사용하여 테스트 실행을 신속하게 수행하고 문제 해결을 간소화합니다.
클라우드 호스팅 브라우저에서만 테스트를 실행하여 테스트 실행을 더 빠르게 완료합니다.
효율적인 문제 해결을 위해 로컬에서 테스트를 계속 실행하는 동안 테스트 결과를 서비스에 게시합니다.

참고 항목

이 문서에서는 클라우드 호스팅 브라우저를 사용하지 않고도 테스트 결과를 서비스에 게시하는 방법에 중점을 둡니다. 테스트 실행을 가속화하는 방법을 알아보려면 빠른 시작을 참조 하세요. 대규모로 Playwright 테스트 실행

필수 조건

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

작업 영역 만들기

Playwright Testing 서비스에 테스트 결과 게시를 시작하려면 먼저 Playwright 포털에서 Microsoft Playwright Testing 작업 영역을 만듭니다.

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

팁

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

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

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

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

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

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

Microsoft Playwright 테스트 패키지 설치

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

npm init @azure/microsoft-playwright-testing@latest

참고 항목

프로젝트에서 버전 1.47 이상을 사용하는 @playwright/test 지 확인합니다.

이 명령은 다음을 수행할 파일을 생성합니다 playwright.service.config.ts .

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

이 파일이 이미 있는 경우 프롬프트에서 재정의하라는 메시지가 표시됩니다.

테스트 실행에 보고 기능만 사용하려면 false로 설정하여 클라우드 호스팅 브라우저를 사용하지 않도록 설정합니다 useCloudHostedBrowsers .

export default defineConfig(
  config,
  getServiceConfig(config, {
    timeout: 30000,
    os: ServiceOS.LINUX,
	useCloudHostedBrowsers: false // Do not use cloud hosted browsers
  }),
  {
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
  }
);

값을 설정 false 하면 클라우드 호스팅 브라우저가 테스트를 실행하는 데 사용되지 않습니다. 테스트는 로컬 컴퓨터에서 실행되지만 결과와 아티팩트가 서비스에 게시됩니다.

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

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

참고 항목

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

보고 기능만 사용하려면 프로젝트 파일에서 다음을 .runsettings 업데이트합니다.

false로 설정하여 클라우드 호스팅 브라우저를 사용하지 않도록 설정합니다 useCloudHostedBrowsers .
'로거' 섹션에서 Microsoft Playwright Testing 로거를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>        
        <!--Select if you want to use cloud-hosted browsers to run your Playwright tests.-->
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <!--Select the authentication method you want to use with Entra-->
    </TestRunParameters> 
 .
 .
 .
    <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>

팁

클라우드 호스팅 브라우저를 사용하여 테스트 실행을 가속화하려는 경우 true로 설정할 useCloudHostedBrowsers 수 있습니다. 그러면 서비스 관리 브라우저에서 테스트가 실행됩니다.

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

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

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

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

엔드포인트 URL은 작업 영역을 만들 때 선택한 Azure 지역과 일치합니다. 환경 변수에서 이 URL을 PLAYWRIGHT_SERVICE_URL 사용할 수 있는지 확인합니다.

환경 설정

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

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

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

서비스 구성 설정

다음 콘텐츠를 사용하여 루트 디렉터리에 파일을 PlaywrightServiceSetup.cs 만듭니다.

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

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

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

참고 항목

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

인증 설정

Microsoft Playwright Testing 작업 영역에 테스트 결과 및 아티팩트 게시하려면 서비스를 사용하여 테스트를 실행하는 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를 사용하는 것이 좋습니다. 액세스 토큰은 편리하지만 수명이 긴 암호처럼 작동하며 손상되기 쉽습니다.

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

주의

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

Playwright 설정에서 아티팩트 사용

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

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

스크린샷, 비디오 및 추적과 같은 아티팩트가 Playwright에서 캡처되도록 설정합니다.

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

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

Microsoft Playwright Testing에서 테스트 실행 및 결과 게시

이제 Microsoft Playwright Testing을 사용하여 테스트 결과 및 아티팩트 게시를 위한 구성을 준비했습니다. 새로 만든 playwright.service.config.ts 파일을 사용하여 테스트를 실행하고 테스트 결과 및 아티팩트 서비스를 게시합니다.

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

참고 항목

Microsoft Playwright Testing의 보고 기능의 경우 게시된 테스트 결과 수에 따라 요금이 청구됩니다. 처음 사용자이거나 무료 평가판을 시작하는 경우 무료 평가판 제한을 소진하지 않도록 전체 테스트 도구 모음 대신 단일 테스트 결과를 게시하는 것으로 시작할 수 있습니다.

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

Running 6 test using 2 worker
    5 passed, 1 failed (20.2s)

Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

이제 Microsoft Playwright Testing을 사용하여 테스트 결과 및 아티팩트 게시를 위한 구성을 준비했습니다. 파일을 사용하여 .runsettings 테스트를 실행하고 테스트 결과 및 아티팩트 서비스를 게시합니다.

dotnet test --settings:.runsettings

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

참고 항목

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

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

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

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

주의

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

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

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

테스트 실행이 완료되면 Playwright 포털에 대한 링크가 생성됩니다. 자세한 테스트 결과 및 관련 아티팩트 보기를 보려면 이 링크를 엽니다. 포털에는 다음을 비롯한 필수 정보가 표시됩니다.
- CI 빌드 세부 정보
- 전체 테스트 실행 상태
- 테스트 실행에 연결된 커밋 ID
Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 마케팅 목록의 구성원을 관리할 수 있습니다.
- 재시도 간에 전환합니다.
- 자세한 오류 로그, 테스트 단계 및 연결된 아티팩트(예: 스크린샷 또는 비디오)를 봅니다.
- 심층 분석을 위해 추적 뷰어 로 직접 이동합니다.
추적 뷰어를 사용하면 테스트 실행을 시각적으로 단계별로 실행할 수 있습니다. 마케팅 목록의 구성원을 관리할 수 있습니다.
- 타임라인을 사용하여 개별 단계를 마우스로 가리키고 각 작업 전후의 페이지 상태를 표시합니다.
- 각 단계에 대한 자세한 로그, DOM 스냅샷, 네트워크 활동, 오류 및 콘솔 출력을 검사합니다.

테스트 실행이 완료되면 터미널에서 Playwright 포털에 대한 링크를 가져옵니다. 자세한 테스트 결과 및 관련 아티팩트 보기를 보려면 이 링크를 엽니다. 포털에는 다음을 비롯한 필수 정보가 표시됩니다.
- CI 빌드 세부 정보
- 전체 테스트 실행 상태
- 테스트 실행에 연결된 커밋 ID
Playwright 포털은 문제 해결에 필요한 모든 정보를 제공합니다. 마케팅 목록의 구성원을 관리할 수 있습니다.
- 자세한 오류 로그 및 연결된 아티팩트(예: 스크린샷 또는 비디오)를 봅니다.
- 심층 분석을 위해 추적 뷰어 로 직접 이동합니다.

참고 항목

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

추적 뷰어를 사용하면 테스트 실행을 시각적으로 단계별로 실행할 수 있습니다. 마케팅 목록의 구성원을 관리할 수 있습니다.
- 타임라인을 사용하여 개별 단계를 마우스로 가리키고 각 작업 전후의 페이지 상태를 표시합니다.
- 각 단계에 대한 자세한 로그, DOM 스냅샷, 네트워크 활동, 오류 및 콘솔 출력을 검사합니다.

팁

Microsoft Playwright Testing 서비스를 사용하여 클라우드 호스팅 브라우저를 사용하여 동시에 테스트를 실행할 수도 있습니다. 보고 및 클라우드 호스팅 브라우저는 모두 독립적인 기능이며 별도로 청구됩니다. 이 중 하나 또는 둘 다를 사용할 수 있습니다. 자세한 내용은 서비스 기능을 사용하는 방법을 참조 하세요.

참고 항목

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

다음 단계

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

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

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

다음을 통해 공유

빠른 시작: Microsoft Playwright Testing 미리 보기를 사용하여 테스트 문제 해결

배경

필수 조건

작업 영역 만들기

Microsoft Playwright 테스트 패키지 설치

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

환경 설정

서비스 구성 설정

인증 설정

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

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

Playwright 설정에서 아티팩트 사용

Microsoft Playwright Testing에서 테스트 실행 및 결과 게시

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

다음 단계

피드백

추가 리소스