Next.js와 Playwright 설정하기

Playwright는 단일 API로 Chromium, Firefox, WebKit을 자동화할 수 있게 해주는 테스팅 프레임워크입니다. 이를 사용하여 End-to-End (E2E) 테스팅을 작성할 수 있습니다. 이 가이드에서는 Next.js와 Playwright를 설정하고 첫 번째 테스트를 작성하는 방법을 보여드리겠습니다.

빠른 시작

가장 빠른 시작 방법은 with-playwright 예제와 함께 create-next-app을 사용하는 것입니다. 이렇게 하면 Playwright가 구성된 완전한 Next.js 프로젝트가 생성됩니다.

Terminal

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

수동 설정

Playwright를 설치하려면 다음 명령을 실행하세요:

Terminal

npm init playwright
# 또는
yarn create playwright
# 또는
pnpm create playwright

이 과정에서 프로젝트에 Playwright를 설정하고 구성하기 위한 일련의 프롬프트가 표시되며, playwright.config.ts 파일이 추가됩니다. 단계별 가이드는 Playwright 설치 가이드를 참조하세요.

첫 번째 Playwright E2E 테스트 만들기

두 개의 새로운 Next.js 페이지를 만드세요:

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 }) => {
  // 인덱스 페이지에서 시작 (baseURL은 playwright.config.ts의 webServer를 통해 설정됨)
  await page.goto("http://localhost:3000/");
  // 'About' 텍스트가 있는 요소를 찾아 클릭
  await page.click("text=About");
  // 새 URL은 "/about"이어야 함 (baseURL이 여기서 사용됨)
  await expect(page).toHaveURL("http://localhost:3000/about");
  // 새 페이지에는 "About"이라는 텍스트가 있는 h1이 포함되어야 함
  await expect(page.locator("h1")).toContainText("About");
});

알아두면 좋은 점:

playwright.config.ts 구성 파일에 "baseURL": "http://localhost:3000"을 추가하면 page.goto("http://localhost:3000/") 대신 page.goto("/")를 사용할 수 있습니다.

Playwright 테스트 실행하기

Playwright는 Chromium, Firefox, Webkit 세 가지 브라우저를 사용하여 애플리케이션을 탐색하는 사용자를 시뮬레이션합니다. 이를 위해서는 Next.js 서버가 실행 중이어야 합니다. 애플리케이션의 동작을 더 정확히 반영하기 위해 프로덕션 코드에 대해 테스트를 실행하는 것을 권장합니다.

npm run build와 npm run start를 실행한 다음, 다른 터미널 창에서 npx playwright test를 실행하여 Playwright 테스트를 실행하세요.

알아두면 좋은 점: 또는 webServer 기능을 사용하여 Playwright가 개발 서버를 시작하고 완전히 사용 가능할 때까지 기다리도록 할 수 있습니다.

지속적 통합(CI)에서 Playwright 실행하기

Playwright는 기본적으로 헤드리스 모드에서 테스트를 실행합니다. 모든 Playwright 의존성을 설치하려면 npx playwright install-deps를 실행하세요.

Playwright와 지속적 통합에 대해 다음 리소스에서 더 자세히 알아볼 수 있습니다:

Jest Cypress