트레이스 뷰어

트레이스 뷰어 (Trace Viewer)

테스트가 CI에서 실패했을 때, 로그만으로는 무엇이 잘못됐는지 파악하기 어려울 때가 많아요. Playwright Trace Viewer는 스크립트가 실행된 뒤 기록된 트레이스를 탐색할 수 있게 해 주는 GUI 도구예요. 브라우저에서 실행된 모든 단계를 타임라인과 DOM 스냅샷, 네트워크 요청까지 시간 여행하듯 되짚어 볼 수 있어서, 원인을 훨씬 빨리 찾을 수 있어요.

출처: Trace viewer — Playwright 공식 문서

트레이스 뷰어 열기

저장된 트레이스는 Playwright CLI로 열거나 브라우저의 trace.playwright.dev에서 열 수 있어요. trace.zip 파일이 있는 전체 경로를 지정하면 돼요.

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

playwright show-trace trace.zip

trace.playwright.dev 사용하기

trace.playwright.dev는 Trace Viewer를 정적으로 호스팅한 버전이에요. 트레이스 파일을 끌어다 놓거나 Select file 버튼으로 업로드하면 되고, 트레이스는 전적으로 브라우저 안에서 로드되며 외부로 데이터가 전송되지 않아요.

원격 트레이스 보기

원격에 있는 트레이스는 URL만으로 바로 열 수 있어요. CI 실행 결과를 따로 파일로 내려받지 않아도 되니 편리하죠.

npx playwright show-trace https://example.com/trace.zip

trace.playwright.dev에서도 접근 가능한 저장소(예: CI 내부)에 둔 트레이스 URL을 쿼리 파라미터로 넘길 수 있어요. 여기엔 CORS 규칙이 적용될 수 있어요.

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/e6099cadf79aa753d5500aa9508f9d1dbd87b5ee.zip

트레이스 기록하기

로컬에서 트레이스 남기기

개발 중 트레이스를 기록하려면 테스트 실행 시 --trace 플래그를 on으로 주면 돼요. 개발자 경험을 위해 UI Mode를 쓴다면 각 테스트가 자동으로 트레이스되기도 해요. 이렇게 기록된 트레이스는 HTML 리포트에서 트레이스 아이콘을 클릭해 열 수 있어요.

npx playwright test --trace on

npx playwright show-report

CI에서 트레이스 남기기

CI에서는 trace: 'on-first-retry' 옵션을 설정해서 실패한 테스트를 처음 재시도할 때만 트레이스를 남기는 걸 권장해요. 이렇게 하면 재시도된 각 테스트마다 trace.zip 파일이 만들어져요.

import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: 1,
  use: {
    trace: 'on-first-retry',
  },
});

Test Runner를 쓰지 않고 라이브러리로 직접 쓴다면, BrowserContext.tracing API로 시작·정지 시점을 직접 제어해요.

const browser = await chromium.launch();
const context = await browser.newContext();

// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });

const page = await context.newPage();
await page.goto('https://playwright.dev');

// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });

트레이스 기록 옵션은 다음과 같아요.

  • 'on-first-retry' — 테스트를 처음 재시도할 때만 기록
  • 'on-all-retries' — 모든 재시도에서 기록
  • 'off' — 기록하지 않음
  • 'on' — 매 테스트마다 기록 (성능 부담이 커 비권장)
  • 'retain-on-failure' — 매 테스트 기록하되 성공한 실행에서는 제거

재시도를 쓰지 않으면서 실패 테스트의 트레이스만 남기고 싶다면 trace: 'retain-on-failure'를 쓰면 돼요.

트레이스 뷰어 기능

Actions

Actions 탭에서는 각 액션에 어떤 로케이터가 쓰였고 실행에 얼마나 걸렸는지 볼 수 있어요. 액션 위에 마우스를 올리면 DOM 스냅샷의 변화가 시각적으로 보이고, 시간을 앞뒤로 이동하며 특정 액션을 클릭해 살펴볼 수 있어요. 액션 하나를 선택하면 액션 스냅샷, 액션 로그, 소스 코드 위치가 함께 드러나요.

Screenshots

Tracing.start.screenshots 옵션을 켜면(기본값) 각 트레이스가 스크린캐스트를 기록해 필름 스트립 형태로 보여줘요. 필름 스트립에 마우스를 올리면 액션별 확대 이미지를 볼 수 있어, 확인하고 싶은 액션을 쉽게 찾을 수 있죠. 타임라인의 슬라이더로 선택 구간을 늘리면 그 액션들의 콘솔·네트워크 로그만 필터링돼요.

Snapshots

Tracing.start.snapshots 옵션을 켜면(기본값) 각 액션마다 완전한 DOM 스냅샷 세트를 캡처해요. 액션 유형에 따라 이렇게 나뉘어요.

유형 설명
Before 액션이 호출된 시점의 스냅샷
Action 실제 입력이 수행된 순간의 스냅샷. Playwright가 정확히 어디를 클릭했는지 볼 때 특히 유용해요
After 액션 이후의 스냅샷

Source

사이드바에서 액션을 클릭하면 해당 액션의 코드 줄이 소스 패널에서 강조돼요.

Call

Call 탭은 시간, 사용된 로케이터, 엄격 모드 여부, 사용된 키 같은 액션 정보를 보여줘요.

Log

테스트의 전체 로그를 보면 Playwright가 뒤에서 무엇을 하는지 이해할 수 있어요. 스크롤로 뷰에 가져오기, 요소가 보일·활성화·안정될 때까지 대기, click·fill·press 같은 액션 수행 등이 로그에 남아요.

Errors

테스트가 실패하면 Errors 탭에 각 테스트의 오류 메시지가 표시되고, 타임라인에도 오류가 발생한 지점에 빨간 줄이 나타나요. Source 탭에서 오류가 난 코드 줄도 확인할 수 있어요.

Console

브라우저와 테스트에서 나온 콘솔 로그를 모두 볼 수 있어요. 아이콘으로 브라우저와 테스트 파일에서 온 로그를 구분해 줘요. 액션 사이드바에서 액션을 더블 클릭하면 그 액션 동안 발생한 로그만 필터링되고, Show all 버튼으로 다시 전체를 볼 수 있어요.

Network

Network 탭은 테스트 중 발생한 모든 네트워크 요청을 보여줘요. 요청 유형, 상태 코드, 메서드, 콘텐츠 타입, 지속 시간, 크기 등으로 정렬할 수 있고, 요청을 클릭하면 요청·응답 헤더와 본문까지 확인해요.

Metadata

Actions 탭 옆 Metadata 탭에서는 브라우저, 뷰포트 크기, 테스트 지속 시간 같은 테스트 정보를 보여줘요.

Attachments

Attachments 탭에서는 첨부 파일을 탐색할 수 있어요. 시각적 회귀 테스트를 하고 있다면 이미지 diff, 실제 이미지, 기대 이미지를 비교해 스크린샷 차이를 확인할 수 있고, 슬라이더로 두 이미지를 겹쳐 보며 차이를 파악할 수 있어요.

더 알아보기