Playwright 크로스 브라우저 테스트 완벽 가이드

웹 서비스를 출시하면 "Chrome에서는 잘 되는데 Safari에서 안 돼요"라는 버그 리포트를 받아본 경험, 한 번쯤 있으시죠? Playwright는 Chromium, Firefox, WebKit(Safari)을 하나의 API로 제어할 수 있어 크로스 브라우저 테스트를 효율적으로 자동화할 수 있어요.

Playwright가 크로스 브라우저 테스트에 강한 이유

Playwright는 Microsoft에서 개발한 E2E 테스트 프레임워크로, 세 가지 주요 브라우저 엔진을 모두 지원해요. Selenium과 달리 각 브라우저의 DevTools Protocol을 직접 사용해 더 빠르고 안정적인 테스트가 가능합니다.

가장 큰 장점은 하나의 테스트 코드로 여러 브라우저를 동시에 검증할 수 있다는 점이에요. 브라우저별로 다른 드라이버를 설치하거나 설정을 변경할 필요가 없죠.

기본 설정 및 설치

먼저 Playwright를 프로젝트에 설치하고 브라우저를 다운로드해야 해요.

npm init playwright@latest
npx playwright install

playwright.config.ts 파일에서 테스트할 브라우저를 설정할 수 있어요.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

이렇게 설정하면 npx playwright test 명령어 하나로 세 브라우저에서 모든 테스트가 병렬로 실행돼요.

실전 크로스 브라우저 테스트 작성

실제 로그인 기능을 테스트하는 예시를 볼게요.

import { test, expect } from '@playwright/test';

test('로그인 버튼이 모든 브라우저에서 동작', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#email', 'test@email.com');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL(/.*dashboard/);
});

이 테스트 코드는 playwright.config.ts에 설정된 모든 브라우저에서 자동으로 실행돼요. 특정 브라우저에서만 실행하고 싶다면 --project 옵션을 사용하면 됩니다.

npx playwright test --project=webkit

브라우저별 조건부 테스트

특정 브라우저에서만 발생하는 이슈를 테스트하고 싶을 때는 browserName 속성을 활용해요.

test('Safari에서만 특별한 동작 확인', async ({ page, browserName }) => {
  test.skip(browserName !== 'webkit', 'Safari 전용 테스트');

  await page.goto('https://example.com');
  // Safari 전용 검증 로직
});

주의사항

크로스 브라우저 테스트를 작성할 때 CSS 선택자나 JavaScript 기능이 브라우저마다 다르게 동작할 수 있다는 점을 꼭 기억하세요. 특히 WebKit(Safari)은 Chromium과 달리 일부 최신 CSS 기능이나 Web API를 지원하지 않을 수 있어요. 테스트 실패 시 브라우저 호환성을 먼저 확인하는 습관을 들이면 좋습니다.

또한 병렬 실행 시 시스템 리소스를 많이 사용하므로, CI/CD 환경에서는 workers 옵션으로 동시 실행 수를 조절하는 것이 좋아요.

결론

Playwright의 크로스 브라우저 테스트는 하나의 API로 여러 브라우저를 검증할 수 있어 개발 생산성을 크게 높여줘요. 설정도 간단하고 병렬 실행으로 테스트 시간도 단축되죠. 다음 프로젝트에서는 Playwright로 크로스 브라우저 테스트를 도입해보시길 추천드려요. 사용자가 어떤 브라우저를 사용하든 일관된 경험을 제공할 수 있을 거예요.

Deepveloper

Playwright 크로스 브라우저 테스트 완벽 가이드 - 3분만에 Chrome, Firefox, Safari 동시 테스트하기