6.2 Trace, Screenshot, Video

Trace는 test action, DOM snapshot, network, console, source와 attachment를 시간순으로 보존합니다. CI에서만 발생하는 실패를 분석하는 기본 artifact입니다.

use: {
  trace: 'on-first-retry',
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
}

npx playwright show-trace test-results/.../trace.zip

첫 retry trace는 최초 실패 자체가 아니라 retry 실행을 기록합니다. 항상 최초 시도 trace가 필요하면 retain-on-failure 등 정책을 검토하지만 artifact size가 증가합니다.

Artifact 선택

• Trace: step과 DOM, network 상관관계
• Screenshot: 한 시점의 visual state
• Video: animation, timing 흐름
• HTML report: suite 전체 결과와 attachment
• Console, server log: browser 바깥 원인

Trace와 video에는 사용자 data, token, 입력값이 포함될 수 있습니다. CI artifact 접근 권한과 retention을 제한합니다. 외부 Trace Viewer에 올리기 전 data policy를 확인하며, local CLI viewer를 사용할 수 있습니다.

참고: Trace Viewer

Trace 읽는 순서

1. 실패 assertion과 error message를 확인합니다.
2. 직전 action의 before/after DOM snapshot을 비교합니다.
3. Locator call log와 actionability를 확인합니다.
4. 같은 시간대 request/response를 봅니다.
5. Console, page error를 연결합니다.
6. Source와 attachment에서 business ID를 찾습니다.

Artifact policy 예

use: {
  trace: 'on-first-retry',
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
}

on-first-retry는 최초 실패가 아니라 retry 실행을 기록합니다. 최초 시도의 exact trace가 반드시 필요하면 retain-on-failure를 검토하되 artifact volume을 측정합니다.

Attachment redaction

Network body를 attach할 때 allowlist field만 남깁니다. Trace 자체에 form input과 DOM text가 들어갈 수 있으므로 민감 화면 test는 별도 project와 retention을 둘 수 있습니다.

실습

1. Locator failure, 500 response, console error를 각각 만들고 trace에서 찾습니다.
2. Screenshot만으로 원인을 잘못 판단할 수 있는 사례를 기록합니다.
3. Artifact size와 retention 기간을 계산합니다.
4. External trace viewer upload가 허용되는지 data policy를 확인합니다.