Playwright 코드 자동 생성 도구

Playwright Codegen의 소개

Playwright Codegen은 Playwright에서 제공하는 기능으로, 웹 애플리케이션 테스트를 자동 생성하기 위해 사용됩니다. Playwright는 Microsoft에서 개발한 오픈 소스 테스트 자동화 도구로, 브라우저 간 테스트를 손쉽게 수행할 수 있는 강력한 기능을 제공합니다. 이 중 Codegen은 테스트 스크립트를 자동으로 생성하여 초기 테스트 작업을 간소화할 수 있게 도와주는 기능입니다.

Playwright Codegen의 주요 기능

1. 자동 스크립트 생성
   사용자가 브라우저에서 수행하는 작업을 자동으로 기록하여 Playwright의 스크립트로 변환합니다. 이를 통해 반복적인 작업을 수동으로 작성할 필요가 줄어듭니다.
2. 다중 언어 지원
   Playwright Codegen은 JavaScript, TypeScript, Python, .NET 등 다양한 언어로 테스트 스크립트를 생성할 수 있습니다. 프로젝트의 프로그래밍 언어에 맞게 선택할 수 있습니다.
3. 브라우저 간 테스트 지원
   Chromium, Firefox, WebKit 등 여러 브라우저에서 동일한 테스트 시나리오를 수행할 수 있도록 지원합니다.
4. 시각적 피드백 제공
   브라우저를 통해 직접 작업을 수행하면서, 현재 진행 상황을 실시간으로 확인할 수 있습니다.
5. 커스터마이징 가능
   기본적으로 생성된 코드는 필요에 따라 수정하거나 커스터마이징할 수 있습니다. 이를 통해 특정 요구 사항에 맞는 테스트를 쉽게 구성할 수 있습니다.

Playwright Codegen의 사용 방법

1. 브라우저에서 동작 수행
   Codegen 실행 후 브라우저가 열리면, 테스트하려는 동작(클릭, 입력 등)을 수행합니다. Codegen은 이를 자동으로 기록하여 테스트 코드로 변환합니다.
2. 생성된 코드 확인 및 저장
   Codegen 실행 시, 생성된 코드는 CLI(터미널) 또는 브라우저 옆의 코드 창에 표시됩니다. 이를 복사하여 프로젝트에 저장하거나, 필요에 따라 수정할 수 있습니다.

Codegen 실행 Playwright Codegen은 playwright codegen 명령어로 실행됩니다.

npx playwright codegen <웹사이트 URL>

예를 들어, 구글의 홈페이지를 테스트하려면 다음과 같이 입력합니다.

npx playwright codegen https://www.google.com

Playwright 설치 먼저 Playwright를 설치해야 합니다. Node.js 환경에서 아래 명령어로 설치할 수 있습니다.

npm install playwright

Playwright Codegen의 장점

• 효율성 향상: 테스트 시나리오를 빠르게 생성할 수 있어 초기 셋업 시간을 줄일 수 있습니다.
• 테스트 품질 향상: Codegen은 사람의 실수를 줄이고, 표준화된 코드 스타일을 제공합니다.
• 초보자 친화적: Playwright와 테스트 자동화에 익숙하지 않은 사람들도 쉽게 테스트 코드를 생성할 수 있습니다.
• 시간 절약: 복잡한 테스트 케이스의 초안을 빠르게 작성할 수 있어 반복 작업을 최소화합니다.

활용 사례

1. 테스트 자동화 초안 작성
   Codegen은 테스트 스크립트의 초안을 작성하는 데 유용하며, 생성된 코드를 기반으로 세부적인 로직을 추가하거나 수정할 수 있습니다.
2. 기능 테스트
   특정 기능이 브라우저에서 올바르게 작동하는지 빠르게 확인하고, 이를 스크립트로 저장하여 반복 테스트에 활용할 수 있습니다.
3. 신규 팀원의 학습 도구
   Playwright와 테스트 자동화에 익숙하지 않은 팀원이 Codegen을 통해 Playwright 사용법을 익히고 코드 작성에 대한 감을 잡을 수 있습니다.

Playwright Codegen은 자동화 테스트를 더 쉽고 빠르게 시작할 수 있는 강력한 도구입니다. 이를 통해 테스트 초기 설정을 간소화하고, 팀의 개발 생산성을 높일 수 있습니다.

Codegen 설치 및 설정

Playwright Codegen을 설치하고 설정하는 과정은 비교적 간단하며, Playwright 자체 설치 후 Codegen을 실행하여 사용할 수 있습니다. 아래에 단계별로 설명합니다.

1. Node.js 설치

Playwright는 Node.js 기반으로 동작하므로 먼저 Node.js를 설치해야 합니다.

• Node.js 공식 웹사이트에서 LTS(Long Term Support) 버전을 다운로드하여 설치합니다.

설치 후, 터미널에서 다음 명령어로 Node.js와 npm이 제대로 설치되었는지 확인합니다.

node -v
npm -v

2. Playwright 설치

Playwright는 npm을 통해 설치할 수 있습니다.

설치 후 Playwright가 설치되었는지 확인하려면 아래 명령어를 실행합니다.

npx playwright --version

글로벌 설치가 필요하다면 아래 명령어를 사용합니다.

npm install -g playwright

프로젝트에 Playwright를 설치하려면 터미널에서 다음 명령어를 실행합니다.

npm install playwright

3. Playwright 브라우저 설치

Playwright는 다양한 브라우저(Chromium, Firefox, WebKit)에서 동작하므로, 브라우저 바이너리를 다운로드해야 합니다. 브라우저 설치는 Playwright 설치 시 자동으로 수행됩니다. 그러나 명시적으로 설치하려면 아래 명령어를 실행합니다.

npx playwright install

4. Playwright Codegen 실행

Playwright Codegen은 설치 후 명령어를 통해 실행됩니다. 아래 단계를 따라 실행하세요.

1. 명령어 실행 시 브라우저가 열리고 Codegen 인터페이스가 표시됩니다.
   브라우저에서 수행하는 작업이 자동으로 기록되고, 터미널 또는 Codegen 창에 테스트 코드로 생성됩니다.

터미널에서 다음 명령어를 입력하여 Codegen을 실행합니다.

npx playwright codegen <웹사이트 URL>

예: 구글 홈페이지를 테스트하려면

npx playwright codegen https://www.google.com

5. Codegen 언어 설정

Playwright Codegen은 기본적으로 TypeScript로 코드를 생성합니다. 다른 언어로 설정하려면 명령어에 옵션을 추가합니다.

C#

npx playwright codegen --target csharp https://www.google.com

JavaScript

npx playwright codegen --target javascript https://www.google.com

Python

npx playwright codegen --target python https://www.google.com

6. 생성된 코드 저장

Codegen을 실행한 후, 생성된 코드를 파일에 저장하려면 간단히 복사하여 적절한 파일에 붙여넣으면 됩니다. 예를 들어, Python 코드를 test.py로 저장하려면

1. Codegen에서 생성된 코드를 복사합니다.
2. 텍스트 편집기 또는 IDE에서 test.py 파일을 생성한 후 붙여넣습니다.

저장 후 Playwright를 사용하여 스크립트를 실행합니다.

python test.py

7. 추가 설정 (선택 사항)

7.1. Playwright 프로젝트 초기화

프로젝트 설정 파일을 생성하려면 Playwright 초기화 명령을 실행합니다.

npx playwright init

이 명령은 프로젝트 디렉터리에 playwright.config.js(또는 .ts) 파일을 생성하여 Playwright 설정을 구성합니다.

7.2. Codegen 설정 커스터마이징

기본적으로 Codegen은 Playwright의 표준 동작을 따릅니다. 하지만 브라우저 창 크기, 언어, 디바이스 설정 등을 명령어에 추가하여 커스터마이징할 수 있습니다.

모바일 디바이스 시뮬레이션

npx playwright codegen --device="iPhone 12" https://www.google.com

브라우저 창 크기 설정

npx playwright codegen --viewport-size=1280x720 https://www.google.com

8. Codegen 활용 팁

1. 빠른 테스트 시작: 초기 테스트 시나리오를 빠르게 생성할 때 Codegen을 사용하여 시간을 절약하세요.
2. 코드 편집: Codegen으로 생성된 코드는 기본 스크립트이므로, 실제 테스트 시나리오에 맞게 추가 수정이 필요합니다.
3. 다양한 브라우저 테스트: Playwright의 멀티 브라우저 지원을 활용해 Codegen을 통해 동일한 테스트를 여러 브라우저에서 실행해 보세요.

Playwright Codegen은 빠르고 효율적인 테스트 코드 생성을 지원하므로, 테스트 자동화 초기에 유용하게 활용할 수 있습니다.

Codegen을 사용하여 테스트 코드 생성하기

Playwright의 Codegen을 사용하여 테스트 코드를 생성하는 과정은 간단하며, 브라우저에서의 사용자 동작을 자동으로 기록해 테스트 스크립트를 작성할 수 있습니다. 아래에서 단계별로 설명하겠습니다.

1. Codegen 실행

Codegen은 npx playwright codegen 명령어를 사용해 실행할 수 있습니다.

1. 명령어를 실행하면 브라우저와 함께 Codegen UI가 열립니다. Codegen UI에는 브라우저 옆에 코드 창이 표시되며, 사용자가 브라우저에서 수행하는 작업이 실시간으로 코드로 기록됩니다.

터미널을 열고 아래 명령어를 입력하여 실행합니다.

npx playwright codegen <테스트할 웹사이트 URL>

예를 들어, 구글의 홈페이지를 테스트하려면

npx playwright codegen https://www.google.com

2. 브라우저에서 테스트 작업 수행

Codegen 실행 후 브라우저 창에서 테스트하고자 하는 동작을 수행합니다.

1. 웹사이트의 특정 버튼을 클릭합니다.
2. 검색창에 텍스트를 입력합니다.
3. 페이지 내의 특정 요소를 선택하거나 확인합니다.

이러한 작업이 수행되는 동안, Codegen은 이를 자동으로 기록하여 스크립트로 변환합니다.

3. 생성된 테스트 코드 확인

• Codegen 창에 실시간으로 생성된 테스트 코드가 표시됩니다.
• Playwright는 기본적으로 TypeScript로 코드를 생성하지만, 다른 언어로 생성하려면 --target 옵션을 사용할 수 있습니다.

C#

npx playwright codegen --target=csharp https://www.google.com

JavaScript

npx playwright codegen --target=javascript https://www.google.com

Python

npx playwright codegen --target=python https://www.google.com

4. 생성된 코드 저장

Codegen 창에서 생성된 코드를 파일에 저장하려면

1. 코드 복사: Codegen 창에서 생성된 코드를 복사합니다.
2. 파일 저장: 프로젝트 디렉터리 내에서 테스트 파일(예: test.js 또는 test.py)을 생성하고 복사한 코드를 붙여넣습니다.
3. 파일 이름 지정: Playwright의 파일 확장자는 사용하는 언어에 따라 달라집니다.
   • JavaScript: test.js
   • Python: test.py

5. 생성된 테스트 코드 실행

저장한 테스트 파일을 실행하려면 Playwright 명령어를 사용합니다.

Python 코드 실행

python <파일 경로>

JavaScript/TypeScript 코드 실행

npx playwright test <파일 경로>

6. Codegen 생성 예시

예를 들어, 구글에서 검색을 수행하는 테스트 코드를 생성하면 다음과 같은 코드가 생성됩니다.

JavaScript 예시

const { test, expect } = require('@playwright/test');

test('Google Search Test', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.keyboard.press('Enter');
  await page.waitForSelector('#search');
  expect(await page.title()).toContain('Playwright');
});

Python 예시

from playwright.sync_api import sync_playwright

def test_google_search():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.goto("https://www.google.com")
        page.fill('input[name="q"]', 'Playwright')
        page.keyboard.press('Enter')
        page.wait_for_selector('#search')
        assert 'Playwright' in page.title()
        browser.close()

7. Codegen 최적화

Codegen은 기본적인 테스트 코드를 생성하므로, 추가로 다음 작업을 통해 최적화할 수 있습니다.

1. 리팩터링: 생성된 코드에서 불필요한 동작 제거 및 변수 정리.
2. Assertions 추가: 테스트 결과를 확인하기 위한 조건(assertions)을 명시적으로 추가.
3. 데이터 매개변수화: 테스트를 반복하거나 다른 입력 데이터를 사용할 수 있도록 코드 수정.
4. 리포트 생성: 테스트 결과를 출력하거나 보고서를 생성하도록 설정.

Codegen의 장점

• 테스트 자동화 초안 작성 시간을 단축.
• Playwright에 익숙하지 않은 사용자도 쉽게 테스트 코드를 생성 가능.
• 언어별 코드 변환 지원(JavaScript, Python, C# 등).
• 반복적인 테스트 케이스 작성 작업의 부담 감소.

Playwright Codegen은 테스트 자동화의 첫 단계를 간소화하고 효율적으로 만들기 위한 강력한 도구입니다. 생성된 코드를 기반으로 추가 수정 및 최적화를 통해 실제 요구 사항에 적합한 테스트 스크립트를 완성할 수 있습니다.

Codegen이 생성한 코드 이해하기

Playwright Codegen이 생성한 코드는 브라우저에서 수행한 사용자 동작을 기반으로 만들어지며, 자동화 테스트를 작성하는 데 중요한 기초를 제공합니다. 생성된 코드를 이해하면 테스트 흐름과 Playwright의 기본 사용법을 더 잘 파악할 수 있습니다. 아래에서는 Codegen이 생성한 코드의 구조와 각 구성 요소에 대해 설명합니다.

1. Codegen으로 생성된 코드 구조

Codegen으로 생성된 테스트 코드는 기본적으로 다음과 같은 단계로 구성됩니다.

1. 테스트 환경 설정
   • Playwright의 테스트 라이브러리를 가져옵니다.
   • 브라우저를 시작하거나 새 페이지를 생성합니다.
2. 테스트 시나리오
   • 브라우저에서의 동작(페이지 이동, 요소 클릭, 텍스트 입력 등)이 순서대로 기록됩니다.
3. 테스트 검증 (Assertions)
   • 특정 조건(assertions)을 추가하여 테스트 결과를 확인합니다.
4. 리소스 정리
   • 브라우저를 닫아 테스트 실행 중 사용한 리소스를 해제합니다.

2. Codegen 생성 코드 예시

JavaScript 예시

const { test, expect } = require('@playwright/test');

test('Google Search Test', async ({ page }) => {
  // 페이지 열기
  await page.goto('https://www.google.com');

  // 검색창에 텍스트 입력
  await page.fill('input[name="q"]', 'Playwright');

  // Enter 키 입력
  await page.keyboard.press('Enter');

  // 검색 결과 로드 대기
  await page.waitForSelector('#search');

  // 페이지 제목 검증
  expect(await page.title()).toContain('Playwright');
});

3. 코드의 주요 구성 요소 이해

3.1. 테스트 프레임워크 설정

const { test, expect } = require('@playwright/test');

• test: Playwright의 테스트 함수를 정의합니다. 각 테스트는 이 함수를 사용하여 구성됩니다.
• expect: 테스트 검증(assertions)을 위해 사용됩니다.

3.2. 테스트 함수 정의

test('Google Search Test', async ({ page }) => {
  // 테스트 시나리오 작성
});

• test('<테스트 이름>', async ({ page }) => { ... }): 테스트 이름과 시나리오를 정의합니다.
• page: 브라우저 페이지를 나타내는 객체로, 브라우저에서 수행할 동작을 제어합니다.

3.3. 페이지 동작

• 지정한 URL로 이동합니다.
• input[name="q"]: CSS 선택자로 검색창을 식별합니다.
• 'Playwright': 입력 필드에 넣을 텍스트입니다.
• Enter 키를 눌러 검색을 실행합니다.
• #search: 검색 결과 페이지에서 특정 요소가 로드될 때까지 기다립니다. 이는 비동기 동작을 처리하기 위해 중요합니다.

요소 로드 대기

await page.waitForSelector('#search');

키보드 입력

await page.keyboard.press('Enter');

입력 필드에 텍스트 입력

await page.fill('input[name="q"]', 'Playwright');

페이지 이동

await page.goto('https://www.google.com');

3.4. 검증 (Assertions)

expect(await page.title()).toContain('Playwright');

• page.title(): 현재 페이지의 제목을 가져옵니다.
• toContain('Playwright'): 페이지 제목에 'Playwright'가 포함되어 있는지 확인합니다.
• Assertions는 테스트의 성공 여부를 판단하는 핵심 요소입니다.

3.5. 리소스 정리

Playwright는 브라우저를 자동으로 닫아 리소스를 해제합니다. 명시적으로 브라우저를 닫으려면 아래 코드를 추가할 수 있습니다:

await browser.close();

4. Codegen 생성 코드의 커스터마이징

Codegen으로 생성된 코드는 기본적인 동작만 포함되므로, 필요에 따라 다음 작업을 추가로 수행할 수 있습니다:

• 더 구체적인 검증을 추가하여 테스트의 완성도를 높입니다.
• 테스트를 다양한 입력 데이터로 반복하려면 매개변수를 사용할 수 있습니다.
• 테스트 코드를 함수로 분리하여 재사용성을 높입니다.
• 특정 조건에 따라 테스트를 다르게 처리하도록 추가 로직을 작성할 수 있습니다.

조건부 로직

if (await page.isVisible('button#accept-cookies')) {
    await page.click('button#accept-cookies');
}

리팩터링

async function searchGoogle(page, query) {
    await page.fill('input[name="q"]', query);
    await page.keyboard.press('Enter');
    await page.waitForSelector('#search');
}
await searchGoogle(page, 'Playwright');

매개변수화

const searchTerms = ['Playwright', 'Automation', 'Testing'];
for (const term of searchTerms) {
    await page.fill('input[name="q"]', term);
    await page.keyboard.press('Enter');
    expect(await page.title()).toContain(term);
}

추가 Assertions

expect(await page.locator('#result-stats').innerText()).toMatch(/About \d+ results/);

5. Codegen 코드에서 흔히 수정할 요소

1. 선택자 정밀화
   • Codegen이 생성한 기본 선택자는 종종 너무 구체적이거나 동적으로 변할 수 있는 값(CSS 클래스명 등)을 포함합니다. 이를 수정해 더 안정적인 선택자를 사용하세요.
   • 기본 대기 조건을 개선하여 특정 상태(예: 요소의 텍스트)가 완료될 때까지 기다리도록 설정합니다.

대기 조건 개선

await page.waitForFunction(() => document.querySelector('#status').innerText === 'Completed');

6. Codegen 생성 코드 예시 (Python)

Python 예시

from playwright.sync_api import sync_playwright

def test_google_search():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()

        # 페이지 열기
        page.goto("https://www.google.com")

        # 검색창에 텍스트 입력
        page.fill('input[name="q"]', 'Playwright')

        # Enter 키 입력
        page.keyboard.press("Enter")

        # 검색 결과 로드 대기
        page.wait_for_selector("#search")

        # 페이지 제목 검증
        assert 'Playwright' in page.title()

        # 브라우저 닫기
        browser.close()

Codegen으로 생성된 코드는 기본적인 테스트 흐름을 제공하며, 이를 기반으로 테스트를 커스터마이징할 수 있습니다. 각 코드의 구성 요소를 이해하면 생성된 코드를 쉽게 수정하고, 더 복잡한 테스트 시나리오를 구현할 수 있습니다. Assertions, 선택자 수정, 매개변수화를 통해 코드의 품질과 안정성을 높이는 것이 중요합니다.

생성된 코드의 커스터마이징

Playwright Codegen이 생성한 코드는 기본적으로 사용자 동작을 기록한 테스트 초안입니다. 이 코드를 커스터마이징하면 더욱 안정적이고 효율적인 테스트를 작성할 수 있습니다. 아래에서는 생성된 코드를 커스터마이징하는 주요 방법과 활용 사례를 소개합니다.

1. 선택자 수정

Codegen은 자동으로 선택자를 생성하지만, 선택자가 지나치게 구체적이거나 동적으로 변할 가능성이 있을 때 이를 수정해야 합니다.

기본 선택자 문제

Codegen이 생성한 선택자가 특정 CSS 클래스나 ID에 의존할 수 있습니다.

await page.click('div:nth-child(3) > span.button-class');

커스터마이징

• 더 안정적인 선택자를 사용해 수정합니다.

locator API를 사용해 읽기 쉽고 안정적인 코드 작성

const button = page.locator('button:has-text("Submit")');
await button.click();

텍스트를 기준으로 요소 선택

await page.click('text="Login"');

data-testid 또는 aria-label 같은 접근성 속성 활용

await page.click('[data-testid="submit-button"]');

2. 테스트 데이터 매개변수화

반복적인 테스트를 줄이고, 여러 데이터 세트를 테스트하려면 매개변수화가 필요합니다.

Codegen 기본 코드

await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'password123');

커스터마이징: 데이터 매개변수화

테스트 데이터 배열을 생성하고 반복문으로 처리합니다.

const testData = [
  { username: 'testuser1', password: 'password1' },
  { username: 'testuser2', password: 'password2' }
];

for (const data of testData) {
  await page.fill('input[name="username"]', data.username);
  await page.fill('input[name="password"]', data.password);
  await page.click('button:has-text("Login")');
}

3. 추가 검증 (Assertions)

생성된 코드에는 기본적인 페이지 이동이나 작업만 포함되며, 추가적인 결과 검증(assertion)이 필요합니다.

Codegen 기본 코드

await page.goto('https://example.com');

커스터마이징: 검증 추가

API 호출 확인

await page.waitForResponse(response => response.url().includes('/api/data') && response.status() === 200);

특정 요소의 상태 확인

const heading = await page.locator('h1');
expect(await heading.textContent()).toBe('Welcome to Example!');

페이지 제목 확인

expect(await page.title()).toBe('Example Domain');

4. 함수화 및 재사용성 향상

동일한 작업이 반복될 경우, 함수를 생성하여 재사용성을 높입니다.

Codegen 기본 코드

await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'password123');
await page.click('button:has-text("Login")');

커스터마이징: 함수화

로그인 동작을 함수로 정의

async function login(page, username, password) {
  await page.fill('input[name="username"]', username);
  await page.fill('input[name="password"]', password);
  await page.click('button:has-text("Login")');
}

await login(page, 'testuser', 'password123');
await login(page, 'admin', 'adminpass');

5. 대기 조건 개선

생성된 코드는 단순히 요소가 존재할 때까지 기다리지만, 더 복잡한 조건을 추가해 안정성을 높일 수 있습니다.

Codegen 기본 코드

await page.waitForSelector('#search-results');

커스터마이징: 대기 조건 강화

요소가 보이거나 활성화될 때까지 기다리기

const button = page.locator('button:has-text("Submit")');
await button.waitFor({ state: 'visible' });

요소가 특정 상태를 가질 때까지 기다리기

await page.waitForFunction(() => document.querySelector('#status').innerText === 'Completed');

6. 테스트 분리

하나의 테스트에 모든 동작을 기록하면 테스트 관리가 어려워지므로, 테스트를 작은 단위로 분리해야 합니다.

Codegen 기본 코드

test('Complete Scenario', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('input[name="search"]', 'Playwright');
  await page.click('button:has-text("Search")');
  await page.waitForSelector('#results');
});

커스터마이징: 테스트 분리

각 기능을 독립적인 테스트로 분리

test('Navigate to Homepage', async ({ page }) => {
  await page.goto('https://example.com');
  expect(await page.title()).toBe('Example Domain');
});

test('Perform Search', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('input[name="search"]', 'Playwright');
  await page.click('button:has-text("Search")');
  await page.waitForSelector('#results');
});

7. 환경 변수 및 설정 활용

테스트 코드에서 민감한 정보나 환경별 설정을 하드코딩하지 않고, 외부 파일이나 환경 변수를 활용합니다.

Codegen 기본 코드

await page.goto('https://staging.example.com');
await page.fill('input[name="apiKey"]', '12345');

커스터마이징: 환경 변수 사용

코드에서 환경 변수 참조

require('dotenv').config();

const BASE_URL = process.env.BASE_URL;
const API_KEY = process.env.API_KEY;

await page.goto(BASE_URL);
await page.fill('input[name="apiKey"]', API_KEY);

.env 파일

BASE_URL=https://staging.example.com
API_KEY=12345

8. 다중 브라우저 및 디바이스 테스트

Codegen은 기본적으로 단일 브라우저에서 테스트를 생성하지만, 이를 확장해 다중 브라우저와 디바이스를 지원할 수 있습니다.

커스터마이징: 다중 브라우저 테스트

const { chromium, firefox, webkit } = require('playwright');

for (const browserType of [chromium, firefox, webkit]) {
  const browser = await browserType.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  expect(await page.title()).toBe('Example Domain');
  await browser.close();
}

커스터마이징: 모바일 디바이스 테스트

await page.emulate({
  deviceScaleFactor: 2,
  hasTouch: true,
  isMobile: true,
  viewport: { width: 375, height: 667 }
});
await page.goto('https://example.com');

9. 보고서 및 로깅 추가

테스트 실행 중 로그를 기록하거나 실행 결과를 보고서로 출력합니다.

로깅 추가

console.log('Navigating to the homepage...');
await page.goto('https://example.com');
console.log('Page title:', await page.title());

테스트 리포트 생성

Playwright의 내장 테스트 리포트 기능을 활성화

npx playwright test --reporter=html

생성된 Codegen 코드를 커스터마이징하면 더 안정적이고 유지보수가 쉬운 테스트를 작성할 수 있습니다. 선택자 수정, 데이터 매개변수화, 함수화, 대기 조건 강화 등 다양한 방법을 통해 코드의 품질을 높이고, 팀 내 테스트 자동화 효율성을 극대화할 수 있습니다. Playwright의 다양한 API를 활용해 테스트를 점진적으로 확장해 보세요.