Playwright는 Microsoft에서 개발한 테스팅 프레임워크입니다. Playwright를 사용하면 Chromium, Firefox, 그리고 WebKit을 하나의 API로 자동화할 수 있으며, 이를 사용하여 E2E 테스트를 편리하게 작성할 수 있습니다.

14.4.1 Playwright 설치하기

빠르게 시작하기

아래 명령어와 같이 create-next-app을 with-playwright 예제와 함께 실행하여 Playwright가 설치된 형태의 Next.js 애플리케이션을 곧바로 생성할 수 있습니다.

npx create-next-app@latest --example with-playwright with-playwright-app

수동 설치

Playwright를 수동으로 설치하려면 아래 명령을 실행하면 됩니다.

npm init playwright
# or
yarn create playwright
# or
pnpm create playwright

그러면 playwright.config.ts 파일 생성과 함께 프로젝트에 맞게 Playwright를 설정하고 구성하기 위한 일련의 프롬프트가 표시됩니다.

14.4.2 Playwright E2E test 작성 및 실행

먼저 아래와 같이 두 개의 페이지 컴포넌트를 코드를 작성합니다.

// app/page.tsx

import Link from 'next/link';

export default function Page() {
    return (
        <div>
            <h1>Home</h1>
            <Link href='/about'>About</Link>
        </div>
    );
}

// app/about/page.tsx

import Link from 'next/link';

export default function Page() {
    return (
        <div>
            <h1>About</h1>
            <Link href='/'>Home</Link>
        </div>
    );
}

이후 각 페이지 간에 경로 이동이 제대로 작동하는지 확인하기 위한 테스트 코드를 아래와 같이 작성하면 됩니다.

// tests/example.spec.ts

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

test('should navigate to the about page', async ({ page }) => {
    // 인덱스 페이지로 이동
    await page.goto('http://localhost:3000/');
    // 'About'이라는 텍스트를 가진 element를 찾아서 클릭
    await page.click('text=About');
    // 새로운 페이지가 '/about'이라는 경로를 가지는지 확인
    await expect(page).toHaveURL('http://localhost:3000/about');
    // 새로운 페이지가 'About'이라는 텍스트를 가진 h1 태그를 포함하는지 확인
    await expect(page.locator('h1')).toContainText('About');
});

NOTE. 알아두면 좋은 점
playwright.config.ts 설정 파일에 "baseURL": "http://localhost:3000"을 추가하면 page.goto("http://localhost:3000/") 대신 page.goto("/")를 사용할 수 있습니다.

Playwright는 Chromium, Firefox, 그리고 Webkit 세 가지 브라우저를 사용하여 사용자가 애플리케이션을 탐색하는 것을 시뮬레이션합니다. 그리고 이를 위해서는 Next.js 서버가 실행 중이어야 합니다. 개발모드에서도 시뮬레이션은 가능하지만 애플리케이션이 실제로 동작하는 방식을 더 정확하게 테스트하기 위해서는 Production 코드에 대해 테스트하는 것이 좋습니다.

Production 코드에 대해 테스트 하기 위해서는 npm run build와 npm run start를 실행하여 Next.js 애플리케이션을 빌드하고 시작합니다. 그런 다음 다른 터미널 창에서 npx playwright test를 실행하여 Playwright 테스트를 실행하면 됩니다.