Setting up Playwright with Next.js

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

Quickstart

가장 빠르게 시작하는 방법은 with-playwright example (opens in a new tab)을 사용하여 create-next-app을 사용하는 것입니다. 이렇게 하면 Playwright가 구성된 Next.js 프로젝트가 생성됩니다.

Terminal

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

Manual setup

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

Terminal

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

이 명령어는 Playwright를 프로젝트에 설정하고 구성하는 일련의 프롬프트를 안내하며, playwright.config.ts 파일을 추가합니다. 자세한 내용은 Playwright 설치 가이드 (opens in a new tab)를 참조하세요.

Creating your first Playwright E2E test

다음과 같이 두 개의 새로운 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 }) => {
  // index 페이지에서 시작 (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')
})

참고:

page.goto("http://localhost:3000/") 대신 page.goto("/")를 사용할 수 있습니다. 만약 playwright.config.ts 설정 파일 (opens in a new tab)에 "baseURL": "http://localhost:3000" (opens in a new tab)을 추가하면 됩니다.

Running your Playwright tests

Playwright는 세 가지 브라우저인 Chromium, Firefox 및 Webkit을 사용하여 사용자가 애플리케이션을 탐색하는 것을 시뮬레이션하며, 이를 위해 Next.js 서버가 실행 중이어야 합니다. 애플리케이션이 실제로 작동하는 방식을 더 가깝게 재현하기 위해 프로덕션 코드를 대상으로 테스트를 실행하는 것을 권장합니다.

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

참고: 또는 webServer (opens in a new tab) 기능을 사용하여 Playwright가 개발 서버를 시작하고 완전히 사용 가능해질 때까지 기다리도록 할 수 있습니다.

Running Playwright on Continuous Integration (CI)

Playwright는 기본적으로 headless mode (opens in a new tab)에서 테스트를 실행합니다. 모든 Playwright 종속성을 설치하려면 npx playwright install-deps를 실행하세요.

Continuous Integration에서 Playwright에 대해 더 알고 싶다면 다음 리소스를 참조하세요:

Jest Cypress