본문으로 건너뛰기

추적 뷰어

플레이라이트 추적 뷰어(Trace Viewer)는 테스트의 기록된 추적을 탐색할 수 있는 GUI 도구입니다. 테스트에서 각 동작의 앞뒤로 이동하고 동작 중에 발생한 일을 시각적으로 확인할 수 있습니다.

이곳에서 배우는 것은 다음과 같습니다.

추적 기록​

기본적으로 playwright.config 파일에는 각 테스트에 대한 trace.zip 파일을 만드는 데 필요한 설정이 포함됩니다. 추적은 실패한 테스트의 첫 번째 재시도에서 실행되는 on-first-retry로 설정됩니다. 또한 retries는 CI에서 실행될 때 2로 설정되고 로컬에서 0으로 설정됩니다. 이는 실패한 테스트의 첫 번째 재시도에서는 추적이 기록되지만, 첫 번째 실행과 두 번째 재시도에서는 기록되지 않음을 의미합니다.

js
import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: process.env.CI ? 2 : 0, // CI에서 실행 시 2로 설정합니다.
  ...
  use: {
    trace: 'on-first-retry', // 각 테스트의 첫 번째 재시도에서 추적을 기록합니다.
  },
});
js
import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: process.env.CI ? 2 : 0, // CI에서 실행 시 2로 설정합니다.
  ...
  use: {
    trace: 'on-first-retry', // 각 테스트의 첫 번째 재시도에서 추적을 기록합니다.
  },
});

추적 기록에서 사용할 수 있는 옵션의 자세한 안내서는 추적 뷰어를 확인하세요.

로컬에서는 디버깅을 사용하여 테스트를 디버그할 수 있으므로 추적은 일반적으로 CI(Continuous Integration, 지속적인 통합) 환경에서 실행됩니다. 그러나 추적을 로컬에서 실행하려면 --trace on을 사용하여 추적을 강제로 설정할 수 있습니다.

bash
npx playwright test --trace on
bash
npx playwright test --trace on
참고

trace-on 플래그는 플레이라이트 v1.25에서 도입되었습니다. package.json에서 플레이라이트의 버전이 만족되는지 확인하세요.

HTML 보고서 열기​

HTML 보고서는 실행된 모든 테스트, 실행 브라우저, 소요 시간에 대한 보고서를 보여줍니다. 테스트는 통과, 실패, 불안정, 건너뛴 테스트로 필터링할 수 있습니다. 특정 테스트를 검색할 수도 있습니다. 테스트를 클릭하면 오류, 테스트 단계, 추적과 같은 자세한 정보를 볼 수 있는 상세 보기가 열립니다.

bash
npx playwright show-report
bash
npx playwright show-report

HTML 보고서에서 테스트 이름의 파일 이름 옆에 있는 추적 아이콘을 클릭하여 필요한 테스트의 추적을 직접 엽니다.

또한 테스트의 상세 보기를 클릭하여 열고, Traces 탭의 추적 스크린숏을 클릭하여 추적을 열 수 있습니다.

보고서에 대한 자세한 내용은 HTML 보고서를 포함한 보고서 상세 안내서를 확인하세요.

추적 보기​

각 동작을 클릭하거나 마우스를 타임라인으로 이동시켜, 테스트 추적을 보고 동작 전후의 페이지 상태를 확인합니다. 테스트의 각 단계에서 로그, 소스, 네트워크를 검사합니다. 추적 뷰어는 DOM 스냅숏을 생성하므로 완전한 상호 작용이 가능하고 개발자 도구를 여는 등의 작업이 가능합니다.

추적의 자세한 안내서는 추적 뷰어를 확인하세요.