Playwright 고도화: 디버깅, Headless/Headful 모드, Code Coverage

Playwright 고도화: 디버깅, Headless/Headful 모드, Code Coverage

안녕하세요! 지난 시간에는 CI/CD 파이프라인에 Playwright를 연동해 자동화 테스트를 구성하는 방법을 알아봤습니다.
이번 편에서는 좀 더 깊이 있는 테스트 관리와 분석을 위해 활용할 수 있는 디버깅 기법, Headless/Headful 모드, Code Coverage 등을 살펴보겠습니다.

---

1. 디버깅 기법

1) .pause()와 --debug 모드

Playwright는 테스트 도중에 스크립트를 잠시 멈추고 대화형으로 디버깅할 수 있는 기능을 제공합니다.

test('디버깅 테스트', async ({ page }) => {
  await page.goto('https://example.com');
  await page.pause(); // 이 시점에서 실행이 멈춰, 브라우저를 직접 조작 가능
  // 이후 동작
});

• npx playwright test --debug 옵션을 추가하면, 개발자 도구 느낌으로 Playwright 테스트를 디버깅할 수 있습니다.
• DOM 구조, 콘솔 로그, 네트워크 패널까지 브라우저 내에서 직접 확인이 가능하므로, 실패 원인을 빠르게 파악할 수 있습니다.

2) 콘솔 및 네트워크 로깅

테스트 코드를 작성할 때, 브라우저 콘솔 로그와 네트워크 요청을 기록해두면 디버깅에 큰 도움이 됩니다.

page.on('console', msg => console.log('브라우저 콘솔 메시지:', msg.text()));
page.on('request', req => console.log('요청 URL:', req.url()));

• 자바스크립트 에러, API 요청/응답에 문제가 있는지 빠르게 파악 가능
• CI 환경에서도 로그가 기록되므로, 실패 원인을 쉽게 추적할 수 있습니다.

---

2. Headless vs Headful 모드

1) Headless 모드

• 브라우저 UI 없이 백그라운드에서 동작
• CI 환경이나 대량 테스트에 적합
• 테스트가 빠르고, 자원 소모가 적음

2) Headful 모드

• 실제 브라우저 창을 띄우고 테스트
• UI 변화를 시각적으로 확인할 수 있어, 디버깅이나 디자인 체크에 유리

npx playwright test --headed

• CI/CD를 돌릴 땐 대개 Headless 모드를 쓰지만, 문제 발생 시에는 Headful 모드로 수동 확인을 할 수 있습니다.

---

3. Code Coverage(코드 커버리지)

“내가 작성한 테스트가 실제 코드의 어느 부분까지 커버하고 있는가?”를 알려주는 지표가 바로 코드 커버리지입니다.
Playwright 자체에서도 커버리지 기능 일부를 제공하지만, 일반적으로는 Istanbul(nyc), Babel, Jest 등과 함께 사용하는 경우가 많습니다.

# 예시: nyc 설치
npm install --save-dev nyc

1. package.json 스크립트에 "test": "npx nyc -- npx playwright test" 와 같이 등록
2. 실행 후 커버리지 보고서(HTML, lcov 등)를 생성하여, 코드가 어느 부분 덜 테스트되었는지 확인 가능

이렇게 커버리지 보고서를 CI/CD 파이프라인에 포함시키면, 팀원들과 함께 테스트 공백 영역을 모니터링하고 보완할 수 있습니다.

---

4. 결론

1. 디버깅 기법을 익혀두면 테스트 실패 원인을 빠르게 파악할 수 있습니다.
2. Headless/Headful 모드를 상황에 맞게 활용하면, 대량 테스트나 시각적 확인 모두 효율적으로 진행할 수 있습니다.
3. 코드 커버리지를 통해 테스트가 애플리케이션 전반을 충분히 커버하고 있는지 점검할 수 있습니다.

다음 편(마지막 편)에서는 Best Practices 및 실무 적용 팁을 종합적으로 정리해볼 예정이니, 마지막까지 함께 해주세요!