Playwright를 활용한 크로스 브라우저 테스트 자동화

Playwright로 테스트 가능한 브라우저 종류

Playwright는 최신 브라우저 자동화 도구로, 여러 주요 브라우저를 지원합니다. 다음은 Playwright로 테스트 가능한 브라우저 종류입니다.

1. Chromium 계열
   • Google Chrome
   • Microsoft Edge
     (Playwright는 Chromium 기반 브라우저를 자동으로 다운로드하고 실행할 수 있습니다.)
2. WebKit
   • Safari
     (Apple Safari의 엔진인 WebKit 기반 브라우저를 테스트할 수 있습니다.)
3. Firefox
   • Mozilla Firefox
     (Gecko 엔진 기반 브라우저로 Firefox를 지원합니다.)
4. Microsoft Edge (Legacy 버전)
   • Playwright는 Chromium 기반 Microsoft Edge 외에도 이전의 EdgeHTML 기반 Microsoft Edge를 제한적으로 지원할 수 있습니다. (구체적인 요구가 있을 경우 설정 필요)

Playwright의 주요 특징

• Playwright는 브라우저별로 각각 독립적인 실행 환경을 제공하며, 모든 브라우저 테스트를 한 API로 수행할 수 있습니다.
• Headless 모드 및 Headed 모드 모두 지원하여 UI 렌더링 여부에 따라 선택적으로 테스트 실행 가능.
• Chromium 기반의 브라우저는 Android와 같은 모바일 환경에서도 테스트 가능합니다.

이를 통해 Playwright는 크로스 브라우저 테스트 및 다양한 플랫폼에서의 테스트를 효과적으로 지원합니다.

브라우저별 설정과 제약 사항

1. Chromium (Google Chrome 및 Microsoft Edge)

설정

• 기본 실행

const browser = await playwright.chromium.launch();

• Headed 모드 실행

const browser = await playwright.chromium.launch({ headless: false });

• Google Chrome 전용 실행

const browser = await playwright.chromium.launch({ channel: "chrome" });

• Microsoft Edge 전용 실행

const browser = await playwright.chromium.launch({ channel: "msedge" });

제약 사항

• Chromium 기반 브라우저는 최신 버전이 Playwright에 의해 자동 관리되며, 특정 버전의 Chrome 또는 Edge를 사용하려면 channel 옵션을 명시적으로 지정해야 합니다.
• Headless 모드에서는 일부 확장 프로그램(Extensions)이 정상적으로 작동하지 않을 수 있습니다.

2. WebKit (Safari)

설정

• 기본 실행

const browser = await playwright.webkit.launch();

• Headed 모드 실행

const browser = await playwright.webkit.launch({ headless: false });

제약 사항

• WebKit은 Playwright에서 제공하는 엔진 버전을 사용하므로 macOS의 Safari와 완전히 동일하지 않을 수 있습니다.
• Windows와 Linux 환경에서 WebKit 기반 테스트는 Safari의 모든 기능을 지원하지 않을 수 있습니다.

3. Firefox

설정

• 기본 실행

const browser = await playwright.firefox.launch();

• Headed 모드 실행

const browser = await playwright.firefox.launch({ headless: false });

제약 사항

• Playwright가 제공하는 Firefox 내부 빌드를 사용하기 때문에, 최신 Firefox 브라우저의 모든 기능을 지원하지 않을 수 있습니다.
• 확장 프로그램이나 최신 고급 기능은 일부 제한이 있을 수 있습니다.

공통 설정 옵션

Playwright는 모든 브라우저에서 다음과 같은 공통 설정을 지원합니다.

• Proxy 설정

const browser = await playwright.chromium.launch({
  proxy: { server: "http://my-proxy-server:3128" },
});

• User Agent 변경

const context = await browser.newContext({
  userAgent: "MyCustomUserAgent",
});

• Viewport 크기 설정

const context = await browser.newContext({
  viewport: { width: 1920, height: 1080 },
});

주요 제약 사항 요약

1. Headless 모드와 확장 프로그램
   • 대부분의 브라우저에서 Headless 모드에서는 확장 프로그램이 제대로 작동하지 않을 수 있습니다.
2. Safari(WebKit)의 제한
   • Windows와 Linux에서 WebKit 테스트는 macOS Safari와 완전히 동일하지 않을 수 있습니다.
3. Firefox 기능 제한
   • Playwright 내부 빌드로 인해 특정 최신 기능은 공식 Firefox와 동일하게 지원되지 않을 수 있습니다.
4. Chromium 기반 브라우저의 특정 버전
   • 특정 Chrome 또는 Edge 버전을 테스트하려면 Playwright의 channel 옵션을 사용해야 합니다.

단일 스크립트로 크로스 브라우저 테스트하기

Playwright는 단일 스크립트로 여러 브라우저에서 테스트를 실행할 수 있는 강력한 기능을 제공합니다. 이를 통해 Chromium, WebKit, Firefox 등의 브라우저에서 동일한 테스트를 반복적으로 실행할 수 있습니다. 아래는 TypeScript를 사용하여 단일 스크립트로 크로스 브라우저 테스트를 구현하는 방법입니다.

예제: 단일 스크립트로 크로스 브라우저 테스트 실행

import { chromium, firefox, webkit, BrowserType } from "playwright";

(async () => {
  // 테스트 대상 브라우저 타입 정의
  const browsers: BrowserType<any>[] = [chromium, firefox, webkit];

  for (const browserType of browsers) {
    console.log(`Testing on: ${browserType.name()}`);

    // 브라우저 실행
    const browser = await browserType.launch({ headless: true });
    const context = await browser.newContext();
    const page = await context.newPage();

    try {
      // 테스트 대상 URL 접속
      await page.goto("https://example.com");

      // 페이지 타이틀 확인
      const title = await page.title();
      console.log(`[${browserType.name()}] Page title: ${title}`);

      // 추가적인 테스트 로직 작성 가능
      // 예: 특정 요소 확인
      const heading = await page.textContent("h1");
      console.log(`[${browserType.name()}] Heading: ${heading}`);

    } catch (error) {
      console.error(`[${browserType.name()}] Test failed:`, error);
    } finally {
      // 브라우저 종료
      await browser.close();
    }
  }
})();

주요 코드 설명

• 브라우저 타입 배열 정의

const browsers: BrowserType<any>[] = [chromium, firefox, webkit];

• chromium, firefox, webkit 모듈을 배열에 저장하여 반복문을 통해 순차적으로 실행.
• 브라우저 실행

const browser = await browserType.launch({ headless: true });

• 각 브라우저 타입별로 launch()를 호출하여 Headless 모드로 브라우저를 실행.
• 페이지 상호작용
  • page.goto()로 테스트 대상 URL을 열고, page.title()이나 page.textContent() 등을 사용해 페이지 내용을 확인.
• 결과 로깅

console.log(`[${browserType.name()}] Page title: ${title}`);

• 브라우저별로 테스트 결과를 콘솔에 출력.
• 브라우저 종료

await browser.close();

• 각 브라우저 테스트가 끝난 후 반드시 종료하여 리소스를 해제.

실행 방법

Playwright 설치

npm install -D playwright

테스트 스크립트 실행

npx ts-node cross-browser-test.ts

확장 가능성

• 다양한 테스트 로직 추가
  • page.click()이나 page.fill()과 같은 Playwright API를 활용해 복잡한 사용자 동작을 추가할 수 있습니다.
• 테스트 보고서 생성
  • console.log 대신 테스트 결과를 파일로 저장하거나, jest와 같은 테스트 프레임워크를 활용하여 구조적인 보고서를 생성할 수 있습니다.
• 브라우저 설정 세분화
  • launch() 시 브라우저별로 다른 설정을 적용하거나, 특정 브라우저에서만 실행할 테스트를 작성할 수 있습니다.

장점

• 단일 스크립트로 모든 브라우저 테스트 가능.
• Playwright의 일관된 API를 사용하여 크로스 브라우저 테스트의 복잡성을 줄임.
• 확장성과 유지보수가 용이.

이 코드 구조를 기반으로 필요한 테스트 로직을 추가하면 효율적인 크로스 브라우저 테스트가 가능합니다.

Codegen을 활용한 크로스 브라우저 코드 생성

Playwright의 codegen 기능은 브라우저에서 수행하는 동작을 기록하여 테스트 코드를 자동으로 생성해주는 유용한 도구입니다. 이를 활용하면 크로스 브라우저 테스트 코드의 기본 스크립트를 빠르게 작성할 수 있습니다. 아래는 codegen을 사용하여 크로스 브라우저 테스트 코드를 생성하는 방법과 활용법을 설명합니다.

1. Codegen 실행

codegen을 실행하려면 Playwright CLI 명령어를 사용합니다. 브라우저를 열고 상호작용을 기록하여 테스트 코드를 생성할 수 있습니다.

명령어

npx playwright codegen

이 명령어를 실행하면 기본적으로 chromium 브라우저가 열리고, 브라우저에서 수행하는 동작이 기록됩니다.

2. 특정 브라우저에서 Codegen 실행

codegen은 원하는 브라우저에서 실행할 수 있습니다. 다음과 같이 브라우저를 지정합니다.

Chromium

npx playwright codegen --browser=chromium

Firefox

npx playwright codegen --browser=firefox

WebKit (Safari)

npx playwright codegen --browser=webkit

3. 생성된 코드로 크로스 브라우저 테스트 작성

Playwright는 기본적으로 단일 브라우저의 코드를 생성합니다. 이를 기반으로 크로스 브라우저 테스트를 작성하려면 생성된 코드를 수정하여 각 브라우저를 순회하도록 변경해야 합니다.

생성된 코드 예시 (chromium에서 기록된 경우)

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');
  await page.click('text=More information...');
  console.log(await page.title());

  await browser.close();
})();

4. 크로스 브라우저 코드로 확장

위의 단일 브라우저 코드에서 chromium을 firefox, webkit으로 확장하여 여러 브라우저를 테스트하도록 수정합니다.

수정된 크로스 브라우저 테스트 코드

import { chromium, firefox, webkit, BrowserType } from 'playwright';

(async () => {
  const browsers: BrowserType<any>[] = [chromium, firefox, webkit];

  for (const browserType of browsers) {
    console.log(`Testing on: ${browserType.name()}`);

    const browser = await browserType.launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage();

    try {
      await page.goto('https://example.com');
      await page.click('text=More information...');
      const title = await page.title();
      console.log(`[${browserType.name()}] Page title: ${title}`);
    } catch (error) {
      console.error(`[${browserType.name()}] Error: ${error}`);
    } finally {
      await browser.close();
    }
  }
})();

5. Codegen 실행 시점에 크로스 브라우저 코드 생성

Playwright는 한 번에 크로스 브라우저 테스트 코드를 자동으로 생성하지 않습니다. 하지만 한 브라우저에서 codegen으로 테스트 동작을 기록한 후, 위와 같이 수동으로 크로스 브라우저 테스트를 작성하면 됩니다.

6. Codegen을 활용한 반복적인 개발 워크플로우

1. codegen으로 기본 코드를 빠르게 생성합니다.
2. 생성된 코드를 크로스 브라우저 코드로 변환합니다.
3. 테스트 로직을 추가하거나 브라우저별 커스터마이징을 수행합니다.
4. 필요할 경우 jest 같은 테스트 프레임워크와 통합하여 테스트 실행 및 결과 보고를 자동화합니다.

7. Codegen 명령어 추가 옵션

URL을 지정하여 시작

npx playwright codegen https://example.com

결과 파일 저장

npx playwright codegen --output=generatedTest.ts

Playwright의 codegen을 사용하면 테스트 코드를 빠르게 생성하고 크로스 브라우저 테스트 코드로 확장할 수 있습니다. 단일 브라우저에서 기록된 코드를 기반으로 다른 브라우저에서도 테스트를 수행하도록 수정하면, 크로스 브라우저 테스트를 효율적으로 작성할 수 있습니다. 이를 통해 개발 및 QA 워크플로우의 생산성을 높일 수 있습니다.