Next.js에서 Playwright 설정하기

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

빠른 시작

가장 빠르게 시작하는 방법은 with-playwright 예제와 create-next-app을 사용하는 것입니다. 이 방법은 Playwright가 구성된 Next.js 프로젝트를 생성합니다.

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

수동 설정

Playwright를 설치하려면 다음 명령어를 실행하세요.

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

이 과정은 playwright.config.ts 파일을 추가하며 프로젝트에 Playwright를 설정하고 구성하는 일련의 프롬프트를 제공합니다. 단계별 가이드는 Playwright 설치 가이드를 참조하세요.

첫 번째 Playwright E2E 테스트 만들기

두 개의 새로운 Next.js 페이지를 생성하세요.

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>홈</h1>
      <Link href="/about">소개</Link>
    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>소개</h1>
      <Link href="/">홈</Link>
    </div>
  )
}

그다음, 네비게이션이 올바르게 작동하는지 검증하는 테스트를 추가하세요.

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

test('소개 페이지로 이동해야 함', async ({ page }) => {
  // 인덱스 페이지에서 시작합니다 (기본 URL은 playwright.config.ts의 webServer를 통해 설정됩니다)
  await page.goto('http://localhost:3000/')
  // '소개'라는 텍스트가 있는 요소를 찾아 클릭합니다
  await page.click('text=소개')
  // 새 URL은 "/about"이어야 합니다 (기본 URL이 여기 사용됩니다)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // 새 페이지에는 "소개"라는 h1이 포함되어야 합니다
  await expect(page.locator('h1')).toContainText('소개')
})

알아두세요:

"baseURL": "http://localhost:3000"을 playwright.config.ts 설정 파일에 추가하면 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와 지속적 통합에 대해 더 알아보려면 다음 자료를 참조하세요.

• Next.js와 Playwright 예제
• CI 제공자에서의 Playwright
• Playwright Discord