Playwright로 테스트를 작성했다면, 다음 단계는 실행하고 디버깅하는 것이다.
단순히 “테스트 통과했는가?”를 확인하는 수준을 넘어서, Playwright는 직관적인 실행 환경과 강력한 디버깅 도구를 함께 제공한다.
이 글에서는 다음과 같은 내용을 소개한다:
- 커맨드라인으로 테스트 실행하기
- UI로 테스트 확인하고 디버깅하는 방법
- 실패한 테스트만 재실행하기
- VS Code에서 Playwright 테스트 실행하기
- HTML 리포트로 테스트 결과 정리하기
테스트 실행하기
기본 실행: npx playwright test
가장 기본적인 명령어는 다음과 같다.
npx playwright test
이 명령어는 playwright.config.ts에 설정된 모든 브라우저에서 테스트를 병렬로 실행한다.
기본적으로 headless 모드에서 실행되며, 브라우저 창은 뜨지 않고 결과는 터미널에 출력된다.
🧠 headless 모드란?
브라우저 UI 없이 백그라운드에서 브라우저를 실행하는 방식이다. 시각적으로 확인할 수는 없지만 실행 속도가 빠르다.
UI 모드 실행: --ui
npx playwright test --uiUI 모드는 Playwright에서 강력하게 추천하는 방식이다.
테스트 과정을 시각적으로 한눈에 파악할 수 있고, 각 스텝을 순서대로 따라가며 실행할 수 있다.
- 각 테스트가 어떤 과정을 거쳐 실패했는지 확인 가능
- Locator를 시각적으로 선택하고 수정 가능
- Watch 모드 지원: 파일을 수정하면 테스트 자동 재실행
Cypress에서 테스트 결과를 시각적으로 확인할 수 있던 것처럼, Playwright도 UI 모드를 통해 개발자 경험을 극대화할 수 있다.
Headed 모드: 실제 브라우저 띄우기
npx playwright test --headed--headed 옵션을 사용하면 실제 브라우저 창을 띄워 테스트를 실행할 수 있다.
UI 모드와는 다르게 Inspector 없이 터미널에서 실행되지만, 동작 상황을 눈으로 확인할 수 있다.
브라우저 선택하여 실행하기
Playwright는 Chromium, Firefox, WebKit(사파리 엔진) 등 다양한 브라우저를 지원한다.
--project 플래그를 사용하면 그 이름에 해당하는 브라우저로 테스트를 진행할 수 있다.
npx playwright test --project webkit다양한 브라우저를 띄우기 위해서 --project 플래그를 여러 개 사용할 수 있다.
npx playwright test --project webkit --project firefox
Cypress는 Chromium 기반 브라우저에 특화된 반면, Playwright는 사파리 엔진까지 지원하여 브라우저 호환성 테스트에 강점이 있다.
특정 테스트 파일만 실행
npx playwright test landing-page.spec.ts여러 디렉토리를 한 번에 지정할 수도 있다.
npx playwright test tests/todo-page/ tests/landing-page/
파일 이름에 포함된 키워드로 실행할 수도 있다. 예를 들어 "landing", "login" 이 들어간 파일을 테스트하려면 다음과 같이 작성하면 된다.
npx playwright test landing login특정 테스트 이름으로 실행하려면 -g 옵션을 사용한다.
npx playwright test -g "add a todo item"실패한 테스트만 다시 실행
한 번 테스트를 실행한 후, 실패했던 테스트만 다시 실행하고 싶을 때 --last-failed 플래그를 사용한다.
npx playwright test --last-failedCI 환경이나 로컬 디버깅 시 유용하다.
디버깅 테스트
Playwright는 Node.js 기반으로 작동하므로,
기본적인 console.log() 디버깅부터 브라우저 기반의 UI 디버깅까지 모두 가능하다.
UI 모드에서 디버깅하기
npx playwright test --ui
UI 모드를 통해 다음과 같은 디버깅 작업이 가능하다:
- 테스트 단계를 하나씩 확인하며 실행
- 실패 시 에러 메시지, 네트워크 요청, DOM 상태까지 확인
- Locator를 직접 선택하고 Playground에서 수정 가능
Locator를 선택하면 브라우저 화면에서 해당 요소가 하이라이트되며,
수정된 Locator는 바로 복사하여 코드에 사용할 수 있다.
Playwright Inspector로 디버깅
Inspector는 Playwright에서 제공하는 별도의 디버깅 툴이다.
npx playwright test --debug이 명령어는 브라우저 창과 Inspector 창을 함께 띄워준다.
Inspector에서는 다음과 같은 기능을 제공한다:
- Step Over: 한 줄씩 코드 실행
- Play: 전체 테스트 실행
- Locator 보기 및 선택
- 콘솔 로그 확인
특정 파일만 디버깅하려면 --debug 플래그를 사용하여 다음과 같이 작성한다.
npx playwright test example.spec.ts --debug특정 줄에서 시작하려면 줄 번호를 붙이면 된다.
npx playwright test example.spec.ts:10 --debug
HTML 리포트 확인
테스트가 끝난 후 결과를 시각적으로 보고 싶다면, HTML 리포트를 열 수 있다.
npx playwright show-report기본적으로 테스트 중 실패가 발생하면 자동으로 HTML 리포트가 열리고,
모든 테스트가 통과하면 자동으로 닫힌다.
HTML 리포트에서는 다음이 가능하다:
- 테스트 결과를 브라우저별로 필터링
- 실패한 테스트만 보기
- 특정 테스트의 실행 흐름과 오류 보기
- flaky(불안정한) 테스트 식별
마무리
Playwright는 단순히 “테스트 도구”에 그치지 않는다.
실행, 디버깅, 리포트까지 전 과정이 개발자 친화적으로 설계되어 있다.
- Cypress보다 다양한 브라우저 지원
- headless, headed, UI 모드 등 유연한 실행 방식
- 실패한 테스트만 재실행하는 기능
- 테스트마다 완전 격리된 실행 환경
공식 문서
https://playwright.dev/docs/running-tests
Running and debugging tests | Playwright
Introduction
playwright.dev
'(준)공식 문서 > Playwright' 카테고리의 다른 글
| [ Playwright ] Playwright 액션 완전 정리: 폼 입력부터 드래그 앤 드롭까지 (0) | 2025.05.15 |
|---|---|
| [ Playwright ] Playwright로 테스트 코드 자동 생성하기: 클릭만으로 테스트가 만들어진다? (0) | 2025.05.14 |
| [ Playwright ] Playwright 입문 가이드: 테스트는 이렇게 써야 합니다 (0) | 2025.05.14 |