Playwright 시작하기

2025년 09월 09일 13:39:00

안녕하세요.

프론트엔드하면서 부끄럽게도 테스트코드 작성이라는걸 말만 들어봤지 해본적이 없네요.

부끄럽네요 ㅋ 이 포스팅은 아마 제가 Playwright 를 탐구하는 글이 될것같네요 ㅎ

Playwright 란?

Playwright 는 오픈소스 프레임워크로, E2E 테스트를 위한 도구입니다.

다양한 언어를 지원하구요. (TypeScript, JavaScript, Python, .NET, Java)

모바일 웹 테스트도 된다고합니당. 이외에 여러가지 특징들이 있지만, 우선 저는 알못이기때문에 그냥 기초적인 정도만 서술해보려고합니다.

저는 일단 프로젝트를 새로 만들어서 해보기로했어요.

프로젝트 생성 및 Playwright 설치

저는 pnpm을 주로 사용하고 있어서 패키지를 설치할 때 pnpm을 사용할거에요!

pnpm create vite

일단 vite react 프로젝트를 생성해용.

Project Name : react-playwright
Select a framework : React
Select a variant : TypeScript

저는 위와같이 선택하고 프로젝트를 만들었습니당.

이제 playwright도 설치해염.

리액트 프로젝트 디렉토리로 이동 후 다음 명령어 입력

pnpm create playwright

위 명령어를 입력하면 나오는 프롬프트에서는 다음과 같이 선택했습니다.

bash01

조금 기다리면 설치가 끝나염.

설치가 끝나면 다음과 같은 파일들이 생기는데여.

playwright.config.ts         # playwright 설정파일
package.json
package-lock.json            # Or yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts            # 간단한 예제 테스트 파일
tests-examples/
  demo-todo-app.spec.ts      # 더 복잡한 예제 테스트 파일

간단한 예제 테스트 파일을 한번 살펴보겠습니다.

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

test("has title", async ({ page }) => {
  await page.goto("https://playwright.dev/")

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/)
})

test("get started link", async ({ page }) => {
  await page.goto("https://playwright.dev/")

  // Click the get started link.
  await page.getByRole("link", { name: "Get started" }).click()

  // Expects page to have a heading with the name of Installation.
  await expect(
    page.getByRole("heading", { name: "Installation" })
  ).toBeVisible()
})