Playwright Codegen

Source: Dev.to

codegen이란?

codegen은 애플리케이션에서 사용자가 수행하는 모든 작업—클릭, 필드 입력, 탐색—을 기록하고 해당하는 C# 코드를 생성합니다.
예를 들어 로그인 흐름을 빠르게 만들기에 이상적입니다: codegen을 시작하고 일반 사용자처럼 흐름을 실행하면 도구가 코드를 생성합니다. 100 % 자동은 아니지만 매우 가깝습니다.

설치

전체 단계별 가이드:

1. 테스트 프로젝트를 생성하고, 디렉터리로 이동한 뒤, NuGet 패키지를 추가하고 빌드합니다:

   dotnet new xunit -n PlaywrightTests
   cd PlaywrightTests
   dotnet add package Microsoft.Playwright.Xunit
   dotnet build

2. Playwright가 사용하는 브라우저를 설치합니다:

   pwsh bin/Debug/net8.0/playwright.ps1 install

   참고: (CLI가 더 이상 권장되지 않으므로 권장되지 않음) 원한다면 다음을 사용할 수 있습니다:

   dotnet tool install --global Microsoft.Playwright.CLI
   playwright install --with-deps

   하지만 권장되는 방법은 첫 번째 방법이며, 이는 브라우저 버전이 런타임과 일치하도록 보장합니다.

Source:

codegen 사용하기

저는 로컬에서 실행 중인 Blazor(Blueprint 사용) 애플리케이션을 테스트하고 있습니다.
녹화를 시작하려면 다음 명령을 실행하면 됩니다:

playwright codegen http://localhost:5000/

두 개의 패널이 열립니다:

1. 브라우저 – 애플리케이션과 상호작용하는 곳.
   

2. 검사/녹화 창 – 실시간으로 생성된 코드를 보여줍니다.
   

초기 생성 코드

using Microsoft.Playwright;
using System;
using System.Threading.Tasks;

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync(new()
{
    Headless = false,
});
var context = await browser.NewContextAsync();

var page = await context.NewPageAsync();
await page.GotoAsync("http://localhost:5000/");

이것이 기본 setup입니다. 실제 테스트에서는 보통 이 코드를 fixture(기본 클래스)로 옮기고, 브라우저가 시각적으로 열리지 않도록 Headless = true 로 설정합니다.

녹화는 기본적으로 활성화되어 있습니다(아래 캡처 참고). 녹화를 시작하기 전에 다른 페이지로 이동하고 싶다면, 캡처를 일시 정지하고 정상적으로 탐색한 뒤 다시 활성화하면 됩니다.

잘못된 HTTPS 인증서 처리

애플리케이션이 자체 서명된 인증서를 사용하여 HTTPS를 사용하는 경우, 오류를 무시하도록 컨텍스트를 설정합니다:

using Microsoft.Playwright;
using Microsoft.Playwright.Xunit;

namespace PlaywrightTests;

public class MyProjectTestBase : PageTest
{
    public MyProjectTestBase()
    {
        // 테스트 선택자에 사용되는 속성을 정의합니다
        Playwright.Selectors.SetTestIdAttribute("propriedade-test");
    }

    public override BrowserNewContextOptions ContextOptions()
    {
        return new BrowserNewContextOptions
        {
            IgnoreHTTPSErrors = true
        };
    }
}

그리고 테스트에서 이 클래스를 상속합니다:

namespace PlaywrightTests;

public class UnitTest1 : MyProjectTestBase
{
    [Fact]
    public async Task TestName()
    {
        // Given

        // When

        // Then
    }
}

코드 녹화로 테스트 만들기

await page.GotoAsync("http://localhost:5000/"); 가 이미 정의되어 있으니, 이제 assert만 남았습니다.
codegen이 이를 쉽게 해줍니다: “assert visibility” (또는 다른 옵션) 를 클릭하고 원하는 요소 위에 마우스를 올리면, 해당 코드가 자동으로 삽입됩니다.

생성된 assert 예시:

await Expect(page.Locator("[data-test-id='login-button']")).ToBeVisibleAsync();

팁: 선택자를 SetTestIdAttribute에 정의된 속성을 사용하도록 조정하세요 (위 예시에서는 data-test-id). 이렇게 하면 테스트가 더 안정적이고 가독성이 높아집니다.

Source:

빠른 요약

이 단계들을 따르면 .NET에서 Playwright와 강력한 codegen 도구를 사용한 통합 테스트를 시작할 수 있는 탄탄한 기반을 마련할 수 있습니다. 즐거운 코딩 되세요!

UI에서 생성된 assert 예시

요소를 클릭하면 코드 생성기에서 assert가 자동으로 만들어집니다:

await Expect(page.GetByRole(AriaRole.Heading, new() { Name = "Welcome to BlazorBlueprint" }))
          .ToBeVisibleAsync();

텍스트 assert

await Expect(page.Locator("h1"))
          .ToContainTextAsync("Welcome to BlazorBlueprint");

스냅샷 assert

await Expect(page.Locator("h1"))
          .ToMatchAriaSnapshotAsync("- heading \"Welcome to BlazorBlueprint\" [level=1]");

참고: 위 assert 중 어느 것을 사용할지는 프로젝트 코드 스타일에 맞게 선택하시면 됩니다.

양식에서 상호작용 캡처

예를 들어, 저장 버튼을 클릭하고 필드를 정상적으로 입력한 뒤 코드를 생성합니다:

그리고 키와 조합을 눌러서도 기록합니다:

Options

이 부분은 MyProjectTestBase를 오버라이드할 때와 비슷한 컨텍스트로 codegen을 실행하기 위해 중요합니다.
예를 들어, BrowserNewContextOptions에 다음과 같이 설정되어 있다면:

return new BrowserNewContextOptions
{
    IgnoreHTTPSErrors = true,
    Locale = "en-US",
};

codegen에서는 다음과 같이 실행해야 합니다:

playwright codegen --ignore-https-errors --lang "en-US" http://localhost:5000/

필요한 모든 옵션에 대해 동일하게 적용하십시오 (예: --test-id-attribute는 Playwright에서 Playwright.Selectors.SetTestIdAttribute("propriedade-test"); 로 정의할 수 있습니다).

결론

코드젠(codegen) 작업 흐름에 도움이 되는 무언가를 배우셨길 바랍니다.
아직 궁금한 점이 있다면 문서를 참고하고, ChatGPT와 대화하고, 팀 리더나 신뢰할 수 있는 “정육점 주인”에게 물어보세요.
아무것도 효과가 없으면 제 LinkedIn으로 메시지를 보내 주세요.