Playwright 설치 및 수행

Playwright는 Microsoft에서 개발한 오픈소스 엔드투엔드(E2E) 테스트 자동화 도구

---

1. Playwright와 TypeScript란?

• Playwright:
  웹 애플리케이션을 테스트하고 브라우저 동작을 자동화할 수 있는 강력한 도구.
• TypeScript:
  JavaScript의 상위 집합으로, 정적 타입 검사와 더불어 코드 품질을 높여줌.
• 장점:
  TypeScript와 Playwright를 함께 사용하면 타입 안정성과 자동 완성을 통해 더 효율적으로 테스트 코드를 작성할 수 있음.

 

2. Playwright 설치

npm init playwright@latest

Choose between TypeScript or JavaScript (default is TypeScript) > //언어 선택
Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project) > //테스트 폴더 이름 지정
Add a GitHub Actions workflow to easily run tests on CI > //GitHub Actions 워크플로를 추가
Install Playwright browsers (default is true) > //playwright 브라우저 설치

 

3. 기본 코드 작성 및 실행

① 디렉토리 구성

1. 디렉토리 구조
    

playwright-ts-demo/
├── src/
│   └── example.ts
├── tsconfig.json
├── package.json
└── node_modules/

 

 

② 코드 실행

 

npx playwright test //CLI 모드로 수행됨 
npx playwright test --ui // UI 모드로 수행됨 
npx playwright test tests/example.spec.ts --project chromium --headed // 특정 script를 chrome에서 수행