Playwright 는 무엇일까?

Playwright

Playwright는 브라우저 테스트 및 웹 스크래핑을 위한 Microsoft에서 개발한 오픈 소스 자동화 라이브러리입니다.

Playwright는 현대 웹 앱을 E2E 테스트할 수 있게 해주는 라이브러리 입니다.

E2E (End-to-End) 테스트 : 소프트웨어 애플리케이션의 전체 흐름을 검사하는 테스트

Playwright 특징

크로스 브라우징

Chromium, WebKit, Firefox를 포함한 여러 주요 웹 브라우저 테스트를 진행합니다.

크로스 플랫폼

Windows, Linux, macOS 등 로컬 혹은 CI 환경에서 테스트를 진행합니다.
또한 Android용 Google Chrome 그리고 Safari의 네이티브 모바일 에뮬레이션을 지원합니다.

다양한 언어 지원

TypeScript, JavaScript, Python, .NET, Java 에서 Playwright API 사용이 가능합니다.

비동기 지원

비동기 프로그래밍 모델을 지원해 빠르고 효율적인 테스트가 가능합니다.

네트워크 모니터링

요청 및 응답을 모니터링하는 기능을 제공해, 네트워크 문제를 쉽게 진단 가능합니다.

Playwright 설치 및 실행법

이번 글에서는 Playwright의 Node.js 기반 설치와 실행 법을 알려드리겠습니다.

설치

• npm

npm init playwright@latest

• yarn

yarn create playwright

• pnpm

pnpm create playwright

파일/폴더 설정

playwright.config.ts 파일

playwright.config.ts는 Playwright의 설정을 정의하는 파일입니다.
테스트 실행 환경, 브라우저 설정, 테스트 경로, 타임아웃 등 설정이 가능합니다.

test 폴더

test 폴더는 테스트를 할 때 기본적인 예시 테스트를 포함하고 있습니다.

test/
   example.spec.ts

test 폴더 안에 있는 example.spec.ts는 아래와 같이 작성할 수 있습니다.

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

test('basic test for example.com', async ({ page }) => {
    // 1. 페이지로 이동
    await page.goto('https://example.com');

    // 2. 페이지 제목 확인
    const title = await page.title();
    expect(title).toBe('Example Domain');

    // 3. 특정 요소가 존재하는지 확인
    const heading = await page.locator('h1').textContent();
    expect(heading).toBe('Example Domain');

    // 4. 링크 클릭 및 이동 확인
    await page.locator('a').click();
    await page.waitForURL('https://www.example.com/domains/example');
    const newTitle = await page.title();
    expect(newTitle).toBe('Example.com Reserved Domains');
});

테스트 실행

Playwright 테스트는 다음과 같은 명령어로 실행이 가능합니다.

• npm

npx playwright test

• yarn

yarn playwright test

• pnpm

pnpm exec playwright test

혹은 특정 파일만 테스트를 실행시킬려면 다음과 같이도 가능합니다.

npx playwright test example.spec.ts

테스트 이 후 추가 작업

HTML Test Report

HTML로 된 테스트 결과를 출력하기 위해서 다음과 같은 명령어를 입력해야합니다.

• npm

npx playwright show-report

• yarn

yarn playwright show-report

• pnpm

pnpm exec playwright show-report

UI Mode를 통한 테스트 확인

테스트 도중 UI로 결과를 보고 싶다면 다음과 같이 명령어를 입력해야합니다.

• npm

npx playwright test --ui

• yarn

yarn playwright test --ui

• pnpm

pnpm exec playwright test --ui

Playwright vs. Selenimum

Selenium 역시 웹 애플리케이션 테스트 자동화 도구 입니다.

	Playwright	Selenium
기초 설정	간단한 설치 및 브라우저 설정	다양한 언어를 지원하지만, 복잡한 설정, 브라우저 호환성 문제 위험
브라우저 지원	Chronium, Firefox, WebKit, 모바일 브라우저 에뮬레이션	WebDriver를 지원하는 모든 브라우저
비동기	비동기 프로그래밍 지원	비동기 처리를 위한 추가적인 코드 필요
API	사용자 친화적인 API	상대적으로 복잡한 API, 안정적
테스트 속도	빠른 속도, 각 테스트에 대해 독립적인 브라우저 컨텍스트 생성	브라우저 상태나 세션에 따라 성능이 영향을 받음, Playwright에 비해 느릴 수 있음
기능	다양한 기능, 상대적으로 새로운 도구	오랜 역사를 통한 많은 커뮤니티, 확장 기능, 기본적인 기능은 Playwright에 비해 제한

결론

Playwright는 직접 브라우저 엔진을 조작하여 빠른 속도와 많은 기능이 있습니다.
반면, Selenium은 더 넓은 커뮤니티를 가지고 있고, 브라우저 및 프로그래밍 언어 지원 폭이 넓습니다.

따라서, 현대적인 웹 애플리케이션 테스트에는 Playwright이 조금 더 적합하고, 레거시의 경우 Seleinum이 적합할 수 있습니다.

Playwright과 Jest의 조합

Playwright는 웹 애플리케이션의 E2E 테스트를 자동화하므로, 전체적 흐름을 알 수 있습니다.
Jest는 단위 테스트와 통합 테스트를 위한 프레임워크입니다.

때문에, Jest를 통한 단위 테스트와 통합 테스트를 작성하고, Playwright를 활용하여 실제 브라우저 환경에 대한 UI 테스트를 수행할 수 있습니다.

이를 통해 효율적이고 신뢰성 높은 테스트 환경이 구축 가능할 것입니다.