Playwright 실패 원인, Trace Viewer로 찾는 법

실패한 테스트를 다시 돌릴 수 있다면 trace를 켜고 기록한 뒤, Trace Viewer에서 실패 동작의 Errors와 전후 화면을 확인하세요. 스크린샷 한 장으로 놓치는 동작 순서와 요청 내역을 함께 살필 수 있습니다.

실제 프로그램 화면이 아닌 AI 생성 개념 이미지입니다.

 

아래는 Playwright Test 공식 문서를 확인한 절차입니다. 직접 실행한 테스트 결과가 아니며, Node.js용 Playwright 프로젝트와 브라우저 설치가 끝난 환경을 전제로 합니다.

실패 기록부터 남기기

자신이 관리하는 테스트 환경에서 다음 명령을 실행합니다. 테스트의 실제 동작도 다시 실행되므로 운영 결제나 데이터 삭제가 포함된 시나리오에 그대로 적용하지 마세요.

npx playwright test --trace on

저장된 trace.zip이 있다면 아래 명령의 경로를 실제 파일 위치로 바꿔 엽니다.

npx playwright show-trace path/to/trace.zip

CI에서 첫 재시도만 기록하려면 설정의 use.trace를 'on-first-retry'로 둡니다. 이때 재시도 설정도 있어야 합니다. 공식 예시는 retries: 1을 함께 사용합니다. 재시도 없이 실패 기록을 남기려면 'retain-on-failure'를 검토하세요. 모든 테스트를 항상 기록하는 'on'은 성능 부담 때문에 CI 기본값으로 권장되지 않습니다.

오류가 난 동작을 기준으로 보기

Actions에서 실패한 동작을 선택하고 Errors의 메시지와 연결된 코드 위치를 읽습니다. 이어 Before·After 화면을 비교하고, 요청 문제라면 Network에서 해당 구간의 상태 코드와 응답을 살핍니다. 이 순서는 원인을 좁히기 위한 점검 제안이지 자동 진단 결과는 아닙니다.

Microsoft Playwright의 공식 실패 예시입니다. 왼쪽 Click과 아래 Errors를 함께 보세요.

 

공식 예시 이미지에서는 Click이 실패했고 Errors에 하나의 locator가 여러 요소와 일치했다는 내용이 표시됩니다. 이 경우에는 대기 시간을 늘리기보다 어떤 요소를 지정했는지부터 확인하는 편이 문제에 맞는 접근입니다.

이미지 출처: Microsoft Playwright 문서 저장소의 공식 예시, CC BY 4.0, 원본 변경 없음. 2026-10-24 확인.
https://github.com/microsoft/playwright.dev/blob/main/images/getting-started/trace-viewer-failed-test.png
라이선스: https://creativecommons.org/licenses/by/4.0/

trace에는 화면과 요청·응답 내용이 담길 수 있습니다. 팀 밖으로 공유하기 전 개인정보나 비밀정보가 들어 있는지 확인하세요. 기록을 열었다는 것과 오류를 해결했다는 것은 다릅니다. 수정 후 같은 테스트를 다시 실행해 결과를 확인해야 합니다.

공식 Trace Viewer 안내: https://playwright.dev/docs/trace-viewer
재시도 설정: https://playwright.dev/docs/test-retries
테스트를 만드는 단계가 필요하다면: https://diary9864.tistory.com/entry/Playwright-테스트-녹화하는-법