테스트 디버깅

테스트 디버깅 (Debugging Tests)

테스트가 실패했을 때 가장 답답한 순간은 "왜 실패했는지" 모르는 때예요. Playwright는 실패 원인을 좁히기 위한 여러 디버깅 도구를 제공해요 — VS Code 확장, Playwright Inspector, Trace Viewer, 브라우저 개발자 도구까지요. 각 도구가 어떻게 동작하는지 한 번에 익혀 두면, 문제가 생겼을 때 어디서부터 볼지 바로 감이 잡혀요.

출처: Debugging Tests — Playwright 공식 문서

VS Code 디버거

JavaScript를 쓰고 있다면 VS Code 확장으로 디버깅하는 걸 권장해요. 확장을 설치하면 테스트를 VS Code 안에서 바로 디버그하고, 오류 메시지를 보고, 중단점을 잡고, 한 단계씩 진행할 수 있어요.

오류 메시지 — 테스트가 실패하면 VS Code가 기대값·받은 값과 함께 전체 호출 로그를 에디터에 바로 보여줘요.
라이브 디버깅 — Show Browser를 켠 상태로 테스트를 실행하면, VS Code의 로케이터를 클릭했을 때 브라우저에서 해당 요소가 강조돼요. 여러 요소가 매칭되면 그것도 표시해 주고, 로케이터를 에디터에서 수정하면 변경이 브라우저에 즉시 반영돼요.
로케이터 고르기 — 테스트 사이드바의 Pick locator 버튼을 누른 뒤 브라우저에서 원하는 요소를 클릭하면 로케이터가 생성돼요. Playwright가 role·text·test id 로케이터를 우선해 가장 좋은 로케이터를 골라 주고, 매칭되는 요소가 여러 개라면 유일하게 식별되도록 로케이터를 개선해 줘요. Enter로 복사하거나 Escape로 취소할 수 있어요.
디버그 모드로 실행 — 원하는 줄 번호 옆을 클릭해 빨간 점이 생기도록 중단점을 설정하고, 테스트 옆 줄에서 우클릭해 디버그로 실행하면 브라우저가 열리고 중단점에서 멈춰요.
Chrome DevTools — Run Test로 실행하면 브라우저 세션이 재사용돼서 DevTools를 열어 테스트와 웹 앱을 연속으로 디버그할 수 있어요.
다른 브라우저에서 디버그 — 기본은 Chromium 프로필로 디버그하지만, 테스트 사이드바의 디버그 아이콘을 우클릭해 Select Default Profile로 다른 프로필을 고를 수 있어요.

Playwright Inspector

Playwright Inspector는 테스트를 디버그하기 위한 GUI 도구로, 테스트를 단계별로 진행하고, 로케이터를 라이브 편집하며, 로케이터를 고르고, actionability 로그를 볼 수 있게 해 줘요.

디버그 모드로 실행

--debug 플래그로 테스트를 실행하면 Inspector가 열리고 디버깅용 기본값이 함께 적용돼요.

브라우저가 headed 모드로 실행
기본 타임아웃이 0(= 타임아웃 없음)으로 설정

전체 테스트를 디버그하려면 --debug 플래그를 붙여 실행해요. 테스트가 하나씩 실행되며 각각에 대해 Inspector와 브라우저 창이 열려요.

npx playwright test --debug

특정 줄의 테스트 하나만 디버그하려면 테스트 파일 이름과 줄 번호를 붙이고 --debug를 달아요.

npx playwright test example.spec.ts:10 --debug

특정 브라우저에서 디버그하려면 --project 플래그로 playwright.config에 설정한 프로젝트 이름을 지정해요.

npx playwright test --project=chromium --debug
npx playwright test --project="Mobile Safari" --debug

JS 외 언어(C#, Java, Python)에서는 PWDEBUG 환경 변수로 디버그 모드를 켜요.

PWDEBUG=1 pytest -s

$env:PWDEBUG=1
pytest -s

테스트 단계별 진행

Inspector 상단 툴바로 테스트의 각 액션을 실행·일시정지·단계별 이동할 수 있어요. 현재 액션은 테스트 코드에서, 일치하는 요소는 브라우저 창에서 함께 강조돼요.

특정 위치에서부터 실행

디버깅 시간을 아끼려면 테스트에 page.pause()를 추가하면 돼요. 이러면 처음부터 모든 액션을 하나씩 거칠 필요 없이, 그 지점에서 바로 정지해요.

await page.pause();

page.pause()

page.pause()를 넣고 디버그 모드로 실행한 뒤 Inspector의 "Resume" 버튼을 누르면, page.pause() 지점에서만 멈춰요.

로케이터 라이브 편집과 고르기

디버그 모드 중에는 Pick Locator 필드의 로케이터를 직접 편집할 수 있고, 매칭되는 요소가 브라우저에서 바로 강조돼요. Pick Locator 버튼을 누르고 요소 위에 마우스를 올리면 그 요소를 찾는 코드가 표시되고, 클릭하면 로케이터가 필드에 추가돼요. 필요하면 다듬거나 코드에 복사하면 되고요.

Actionability 로그

Playwright가 click 액션에서 멈출 때쯤이면 이미 actionability 검사들을 수행했고 그 기록이 로그에 남아 있어요. 로그를 보면 요소가 보였는지·활성화됐는지·안정적이었는지, 로케이터가 요소로 해석됐는지·뷰로 스크롤됐는지 같은 정보를 알 수 있고, actionability에 도달하지 못하면 액션이 pending으로 표시돼요.

Trace Viewer

Trace Viewer는 기록된 트레이스를 탐색하는 GUI 도구예요. 왼쪽에서 각 액션을 앞뒤로 이동하며 그 시점의 화면 변화를 보고, 가운데에서 해당 액션의 DOM 스냅샷을 보며, 오른쪽에서 시간·파라미터·반환값·로그 같은 액션 세부 정보를 확인할 수 있어요. 콘솔 메시지, 네트워크 요청, 소스 코드도 함께 탐색할 수 있어요.

브라우저 개발자 도구

PWDEBUG=console로 디버그 모드를 실행하면 개발자 도구 콘솔에 playwright 객체가 제공돼요. DOM 트리 검사와 선택자 찾기, 콘솔 로그 확인, 네트워크 활동 검사 등에 유용해요. 테스트에 page.pause()로 중단점을 걸어 둔 뒤 실행하면 돼요.

PWDEBUG=console npx playwright test

콘솔에는 다음 메서드들이 있어요.

playwright.$(selector) — Playwright 쿼리 엔진으로 요소 하나를 조회
playwright.$$(selector) — 일치하는 모든 요소를 조회
playwright.inspect(selector) — Elements 패널에서 요소를 드러냄
playwright.locator(selector) — 일치 요소를 조회하는 로케이터 생성
playwright.selector(element) — 주어진 요소의 선택자 생성

자세한 API 로그

DEBUG 환경 변수로 상세 로깅을 켤 수 있어요.

DEBUG=pw:api npx playwright test

$env:DEBUG="pw:api"
pytest -s

Headed 모드

Playwright는 기본적으로 headless 모드로 브라우저를 실행해요. headless: false를 실행 옵션으로 주면 브라우저 창이 보이게 되고, slowMo 옵션으로 액션마다 N 밀리초씩 지연을 줘서 디버깅하며 따라가기 좋아요.

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });

# Chromium, Firefox, or WebKit
chromium.launch(headless=False, slow_mo=100)

테스트 디버깅