Playwright 설치 가이드

들어가며

이전 글에서 Playwright가 무엇인지, 왜 사용하는지 알아봤습니다. 이번 글에서는 실제로 Playwright를 설치하고 첫 테스트를 실행하는 과정을 다뤄보겠습니다.

Node.js와 VS Code가 이미 설치되어 있다는 가정 하에 진행합니다.

💻 작성 환경

• macOS Tahoe 26.2
• VS Code
• Node.js

---

프로젝트 폴더 생성

먼저 Playwright 프로젝트를 위한 폴더를 생성하고 이동합니다.

mkdir my-playwright-project
cd my-playwright-project

VS Code에서 해당 폴더를 열어주세요.

code .

---

Playwright 설치

VS Code에서 터미널을 열고 다음 명령어를 실행합니다.

npm init playwright@latest

명령어를 실행하면 몇 가지 질문이 나타납니다.

설치 옵션 선택

1. TypeScript 또는 JavaScript 선택

Do you want to use TypeScript or JavaScript?
  ▸ TypeScript
    JavaScript

원하는 언어를 선택합니다. 이 가이드에서는 TypeScript를 기준으로 진행합니다.

2. 테스트 폴더 경로

Where to put your end-to-end tests?
  ▸ tests

테스트 파일이 저장될 폴더명입니다. 기본값인 tests를 그대로 사용하면 됩니다.

3. GitHub Actions 워크플로우 추가 여부

Add a GitHub Actions workflow?
  ▸ false

Github Actions에서 CI/CD 설정이 필요하면 true를 선택합니다. 지금은 false로 진행해도 괜찮습니다.

4. 브라우저 설치 여부

Install Playwright browsers?
  ▸ true

반드시 true를 선택합니다. Playwright가 사용할 브라우저 바이너리(Chromium, Firefox, WebKit)를 설치합니다. false를 할 경우 나중에 직접 브러우저를 설치해줘야하는 불편함이 있으니깐 웬만하면 true로 하시길 권장합니다.

---

설치 완료 확인

설치가 완료되면 프로젝트에 다음 파일들이 생성됩니다.

package.json을 열어보면 Playwright가 devDependencies에 추가된 것을 확인할 수 있습니다.

---

제대로 설치되었는지 확인

설치가 완료되면 다음 명령어로 Playwright 버전을 확인할 수 있습니다.

npx playwright --version

버전 정보가 출력되면 설치가 정상적으로 완료된 것입니다.

---

마치며

터미널 명령어 몇 줄이면 Playwright 설치가 완료됩니다. 다음 글에서는 실제 테스트를 실행하고 코드를 작성하는 방법을 알아보겠습니다.

---

📚 참고 자료

• Playwright - Installation
• Playwright - Running Tests