Specnote
블로그 목록으로
playwright trace viewerPlaywrightE2E 테스트개념Specnote

Playwright trace viewer란? 테스트가 실패했을 때 남는 것

By 원영2026년 8월 21일5분
이 글의 목차

테스트가 실패했습니다. 화면에는 실패했다는 사실과 오류 문구 몇 줄만 남습니다. 그것만으로 원인을 찾으려면 결국 사람이 같은 상황을 다시 만들어 눌러 봐야 합니다. Playwright trace viewer 는 이 재현 과정을 없애기 위해 만들어진 기능입니다. 테스트가 도는 동안 일어난 일을 통째로 기록해 두었다가, 실패한 뒤에 그 시점으로 되감아 볼 수 있게 합니다.

핵심 요약

Playwright trace viewer 는 테스트가 도는 동안의 동작·화면·네트워크·콘솔을 기록해 둡니다. 실패한 뒤 그 시점으로 되감을 수 있어서, 같은 상황을 다시 만들어 낼 필요가 없습니다. 다만 기록을 읽으려면 코드를 알아야 하고, 무엇을 실패로 볼지는 여전히 사람이 정합니다.

실패했다는 사실만으로는 고칠 수 없습니다

자동화된 테스트가 실패했을 때 실제로 필요한 정보는 이런 것들입니다.

  • 어느 단계에서 멈췄는가
  • 그 순간 화면은 어떤 상태였는가
  • 누르려던 요소는 화면에 있었는가
  • 서버가 응답을 제대로 보냈는가

로그 몇 줄로는 이 중 어느 것도 알기 어렵습니다. 그래서 실패한 테스트를 다시 돌려 보고, 화면을 열어 눌러 보고, 그래도 안 되면 코드에 출력문을 넣어 다시 돌립니다. 재현하는 데 드는 시간이 고치는 시간보다 긴 경우가 흔합니다.

이 문제는 로케이터 편에서 다룬 유지보수와도 이어집니다. 특히 자동 실행 환경에서 실패했을 때가 그렇습니다. 내 컴퓨터에서는 잘 되는데 그곳에서만 멈추면, 볼 수 있는 것이 로그뿐이라 손을 대기 어렵습니다.

Playwright trace viewer 가 기록하는 것

trace는 테스트가 실행되는 동안의 기록을 하나의 파일로 남깁니다. Playwright 공식 문서는 이 기록을 두고 "각 동작을 앞뒤로 오가며 그 순간에 무슨 일이 있었는지 눈으로 볼 수 있다"고 설명합니다.

기록되는 것은 이렇습니다.

기록무엇을 알 수 있나
동작 목록클릭·입력·이동이 순서대로
화면 상태각 동작 직전과 직후의 화면
소스그 동작이 코드의 몇 번째 줄인지
네트워크어떤 요청이 오갔고 무엇이 실패했는지
콘솔화면에서 난 오류 메시지
시간각 단계가 얼마나 걸렸는지

중요한 것은 화면 상태가 그림이 아니라는 점입니다. 그 시점의 화면 구조를 그대로 담고 있어서, 기록을 열어 놓고 요소를 눌러 보고 안쪽을 들여다볼 수 있습니다. 실패한 순간의 화면을 나중에 다시 조사할 수 있다는 뜻입니다.

Playwright trace viewer 가 남기는 6가지 기록trace viewer 는 동작·화면·소스·네트워크·콘솔·시간을 함께 남깁니다

켜는 법

기본 설정 파일에 한 줄로 들어 있습니다.

playwright.config.ts
export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
});

on-first-retry는 처음 실패해서 다시 시도할 때만 기록한다는 뜻입니다. 항상 기록하면 파일이 계속 쌓이고 테스트도 느려지기 때문에, 필요한 순간에만 켜지도록 기본값이 잡혀 있습니다.

지금 당장 기록을 남기고 싶으면 실행할 때 켭니다.

npx playwright test --trace on

여는 법

테스트가 끝난 뒤 결과 화면을 엽니다.

npx playwright show-report

실패한 테스트 옆에 기록 표시가 붙어 있고, 그것을 누르면 trace viewer가 열립니다. 왼쪽에 동작 목록이 순서대로 나오고, 하나를 고르면 그 순간의 화면이 가운데에 나타납니다. 위쪽 시간 띠에서는 어느 구간이 오래 걸렸는지 한눈에 보입니다.

자동 실행 환경에서 난 실패도 같은 방식으로 볼 수 있습니다. 결과물을 내려받아 압축을 풀고 같은 명령을 실행하면, 그 서버에서 일어난 일을 내 컴퓨터에서 되감아 볼 수 있습니다.

실패한 테스트 코드를 조사한다는 것

trace viewer가 바꾸는 것은 조사 방식입니다.

기존에는 실패를 다시 만들어 내야 조사할 수 있었습니다. 같은 조건을 갖추고, 같은 순서로 눌러 보고, 운이 나쁘면 그 상황이 다시 나오지 않아 포기했습니다. 특히 가끔씩만 실패하는 테스트가 그랬습니다.

trace가 있으면 실패는 이미 기록되어 있습니다. 다시 만들 필요가 없습니다. 기록을 열어 그 시점으로 가서, 화면에 무엇이 있었고 무엇이 없었는지 확인하면 됩니다.

기록이 없을 때와 있을 때의 실패 조사 절차 비교기록이 있으면 실패를 다시 만들어 내지 않아도 조사할 수 있습니다

이것은 Playwright가 특히 잘 만든 부분입니다. 테스트 도구가 흔히 남기는 것은 오류 문구와 화면 사진 한 장인데, 여기서는 그 순간의 화면을 조사할 수 있는 형태로 남깁니다.

그래도 남는 일

기록이 남는 것과, 그 기록을 누군가 읽는 것은 다른 일입니다.

첫째, 읽으려면 코드를 알아야 합니다. trace viewer는 코드의 몇 번째 줄에서 무슨 동작이 일어났는지 보여 주는 화면입니다. 코드를 읽지 못하면 동작 목록과 화면만 보게 되고, 그것으로 원인까지 가기는 어렵습니다.

둘째, 누가 언제 여는지가 정해져 있지 않습니다. 자동 실행 환경에서 밤사이 테스트가 실패했다면 기록은 남아 있습니다. 그런데 그 기록을 아침에 누가 열어 볼 것인지는 도구가 정해 주지 않습니다. 실패가 며칠씩 방치되는 팀에서 실제로 부족한 것은 기록이 아니라 그 뒤의 흐름입니다.

셋째, 무엇을 실패로 볼지는 여전히 사람이 정합니다. 기록은 일어난 일을 남길 뿐입니다. 그 화면이 의도한 상태인지 아닌지는 기록 안에 적혀 있지 않습니다.

이어서 읽기Playwright locators란? 화면이 바뀌어도 멈추지 않는 테스트 쓰는 법playwright locatorsPlaywright7분

Specnote는 이 자리를 다르게 채웁니다

Specnote는 실패했을 때 남는 것을 코드를 읽지 않아도 되는 형태로 만들었습니다. 어느 단계에서 멈췄는지, 그때 화면이 어땠는지를 영상으로 다시 보여 주고, 무엇이 어긋났는지 문장으로 정리합니다. 승인해 둔 확인 범위가 기준이라, 무엇을 실패로 볼지도 미리 정해져 있습니다.

코드를 읽고 고칠 수 있다면 trace viewer가 더 정밀합니다. 네트워크 요청 하나하나, 코드 줄 단위까지 볼 수 있는 도구는 이쪽입니다. 저희가 겨냥한 자리는 그 화면을 열어도 읽을 수 없는 쪽입니다.

이어서 읽기Playwright MCP란? 강점 7가지와 상황별 선택 3가지playwright mcpplaywright9분

이 글의 기술 내용은 Playwright 공식 문서 · Trace viewer를 기준으로 2026년 8월 21일에 확인했습니다.

자주 묻는 질문

  • Playwright trace viewer란 무엇인가요?

    테스트가 실행되는 동안의 동작·화면·네트워크·콘솔 기록을 하나로 모아 두었다가, 나중에 그 시점으로 되감아 볼 수 있게 해 주는 기능입니다. 실패를 다시 만들어 내지 않고도 조사할 수 있습니다.

  • 항상 켜 두면 안 되나요?

    켤 수는 있지만 기본값은 처음 실패해 다시 시도할 때만 기록하도록 되어 있습니다. 항상 기록하면 파일이 계속 쌓이고 테스트도 느려집니다. 원인을 쫓는 중이라면 --trace on으로 그때만 켜는 편이 낫습니다.

  • 화면 사진을 남기는 것과 무엇이 다른가요?

    사진은 그 순간의 그림 한 장입니다. trace의 화면 기록은 구조를 그대로 담고 있어서, 열어 놓고 요소를 눌러 보거나 안쪽을 들여다볼 수 있습니다. 실패한 화면을 나중에 조사할 수 있다는 점이 다릅니다.

  • 자동 실행 환경에서 난 실패도 볼 수 있나요?

    볼 수 있습니다. 실행 결과물을 내려받아 압축을 풀고 결과 화면을 열면, 그 서버에서 일어난 일을 그대로 되감을 수 있습니다. 기본 설정에서는 결과물이 30일간 보관됩니다.

  • 코드를 못 읽어도 쓸 수 있나요?

    동작 목록과 화면 상태는 볼 수 있습니다. 다만 원인을 찾는 단계에서는 코드의 어느 줄에서 무엇이 일어났는지 읽어야 해서, 코드를 다루지 않는 사람에게는 벽이 있습니다. > [!CTA] > 실패를 영상으로 받아 보세요 > > 어느 단계에서 멈췄는지 영상으로 다시 보여 드리고, 무엇이 어긋났는지 문장으로 정리해 드립니다. 코드를 읽지 않아도 됩니다. > > 무료로 시작하기

이어서 읽기

지금 읽은 글이 마음에 드셨다면