개발자에서 QA 엔지니어로의 전환은 기술 스택의 깊이를 더하는 흥미로운 여정입니다. 그 여정의 첫 단추이자 가장 중요한 기반 작업은 바로 테스트 자동화 환경을 구축하는 것입니다.
이 가이드는 Node.js와 VS Code를 기반으로, 강력한 E2E(End-to-End) 테스트 프레임워크인 Playwright를 완벽하게 설정하는 과정을 스타일리시하게 안내합니다.
1. 개발 환경의 기반 다지기: Node.js와 VS Code 설치
Playwright는 JavaScript 런타임 환경인 Node.js 위에서 구동되므로, 이 두 가지 핵심 도구를 먼저 준비해야 합니다.
Node.js 설치 및 검증
Playwright를 포함한 현대적인 프론트엔드/백엔드 도구들의 근간이 되는 Node.js를 설치합니다.
LTS 버전 다운로드: Node.js 공식 웹사이트에서 LTS(Long Term Support) 버전을 다운로드하여 설치합니다. 안정성이 검증된 버전을 사용하는 것이 좋습니다.
- node -v
npm -v(Node Package Manager)
VS Code 설정 및 필수 확장 프로그램
코드 편집기로는 강력한 기능과 확장성을 자랑하는 VS Code를 선택합니다. QA 엔지니어로서의 효율성을 극대화하기 위해 다음 확장을 설치하는 것을 추천합니다.
Playwright Test for VSCode: 이 확장 프로그램은 테스트 파일의 시각적 표시, 테스트 실행 및 디버깅을 VS Code 인터페이스 내에서 직접 지원하여 QA 업무의 생산성을 비약적으로 향상시킵니다.
2. Playwright 프레임워크 설치 및 초기화
기반 환경이 갖춰졌다면, 이제 Playwright 프레임워크 자체를 프로젝트에 통합할 차례입니다.
프로젝트 초기화 명령어
기존 프로젝트 폴더로 이동하거나, 새 프로젝트 폴더를 생성한 후 다음 표준 명령어를 실행합니다.
npm init playwright@latest이 명령어는 Playwright 설치를 위한 대화형 프롬프트를 시작합니다. 주요 설정 항목은 다음과 같습니다.
설정 항목 | 권장 선택 (QA 관점) | 설명 |
TypeScript 사용 여부 | Yes/No (선호에 따름) | 타입 안정성이 필요하면 Yes, 단순 시작은 No |
테스트 디렉토리 이름 | `e2e` 또는 `tests` | E2E 테스트 파일들을 모아둘 폴더명입니다. |
GitHub Actions 설정 | No (초기에는) | CI/CD 통합은 환경 설정 후 진행하는 것이 좋습니다. |
이 과정을 통해 Playwright는 필요한 모든 종속성(Dependencies)과 기본 예제 테스트 파일(example.spec.ts 등)을 자동으로 설치하고 구성합니다.
3. 첫 테스트 실행 및 결과 확인 (Headless vs Headed)
환경 설정의 성공 여부는 첫 테스트 실행으로 판가름 납니다. Playwright는 기본적으로 세 가지 주요 브라우저(Chromium, WebKit, Firefox)를 지원합니다.
기본 실행 (Headless Mode)
기본 설정에서 테스트를 실행하면, 브라우저 창이 화면에 나타나지 않는 헤드리스(Headless) 모드로 실행되어 속도가 매우 빠릅니다.
npx playwright test시각적 확인 (Headed Mode)
테스트가 실제로 어떻게 동작하는지 눈으로 확인하며 디버깅하고 싶다면, --headed 옵션을 추가합니다.
npx playwright test --headed이 명령어를 실행하면, 실제 브라우저 창이 열리면서 테스트 스크립트가 동작하는 과정을 실시간으로 관찰할 수 있습니다. 개발자 경험에서 QA 엔지니어로 전환하는 과정에서 이 시각적 피드백은 매우 중요합니다.
테스트 리포트 분석
테스트 실행이 완료되면, 상세한 결과를 담은 HTML 리포트를 생성하고 열어볼 수 있습니다. QA 엔지니어로서 테스트의 안정성과 커버리지를 검증하는 데 필수적인 단계입니다.
npx playwright show-report이 리포트에는 각 브라우저별 성공/실패 여부, 스크린샷, 실행 시간 등이 상세히 기록되어 있어, 결함 분석의 훌륭한 자료가 됩니다.
4. 실전 팁: 특정 테스트 실행 및 디버깅 시작점 지정
실제 프로젝트에서는 수백 개의 테스트 케이스 중 필요한 부분만 선별적으로 실행해야 할 때가 많습니다.
특정 파일 실행
특정 테스트 파일만 실행하려면, 해당 파일의 경로를 인수로 전달합니다.
npx playwright test e2e/login.spec.ts디버깅을 위한 정밀 타겟팅
특정 테스트 케이스나 특정 라인에서 디버깅을 시작하고 싶다면, 파일 경로 뒤에 콜론(:)과 라인 번호를 붙여 지정할 수 있습니다.
예를 들어, e2e/checkout.spec.ts 파일의 45번째 줄에서 디버깅을 시작하려면:
npx playwright test e2e/checkout.spec.ts:45 --debug--debug 옵션은 Playwright Inspector 창을 띄워주며, 지정된 라인에서 실행을 일시 중지합니다. 이를 통해 개발자 도구와 유사하게 변수 상태를 확인하고, 코드를 한 줄씩 실행하며 문제의 근원을 정확히 파악할 수 있습니다. 이 정밀 디버깅 기능은 QA 엔지니어의 문제 해결 시간을 획기적으로 단축시켜 줄 것입니다.
이 가이드를 통해 Playwright 테스트 환경 설정이라는 첫 번째 관문을 성공적으로 통과하셨습니다. 이제 자동화된 테스트 코드를 작성할 준비가 완벽하게 갖춰졌습니다!