트레이스 로그를 이용한 디버깅

이 페이지에서는 Autify에서 취득한 디버그 트레이스 로그를 사용하여 Playwright Trace Viewer로 테스트를 분석하고 디버깅하는 방법에 대해 설명합니다.

Trace Viewer를 이용하려면, 먼저 Autify의 테스트 결과 페이지에서 디버그 트레이스(.zip 파일)를 다운로드해야 합니다. 이 파일은 설정에서 '디버그 트레이스'가 활성화된 경우 테스트 결과 화면에서 얻을 수 있습니다.
파일 취득 방법에 대한 자세한 내용은 다음을 참조하십시오: 고객 지원에 문의하는 방법

Playwright Trace Viewer란?

Playwright Trace Viewer는 Playwright에서 제공하는 도구로, 테스트 실행 과정을 단계별로 조사할 수 있습니다. Autify Nexus는 내부적으로 Playwright를 사용하기 때문에, 생성된 디버그 트레이스 로그를 이 뷰어에서 분석할 수 있습니다.

뷰어는 완전한 시각적 타임라인, 네트워크 로그, 콘솔 메시지 및 각 액션의 DOM 스냅샷을 제공하여 실패의 근본 원인을 파악하는 데 도움을 줍니다.

Trace Viewer 여는 방법

트레이스 파일을 여는 방법에는 웹 브라우저에서 직접 여는 방법과, 컴퓨터에서 명령어를 실행하여 여는 두 가지 방법이 있습니다.

브라우저에서 여는 방법

이것은 가장 간편한 방법입니다.

웹 브라우저에서 https://trace.playwright.dev/ 에 접속합니다.
페이지에 디버그 트레이스 .zip 파일을 드래그 앤 드롭하거나 파일 선택 대화상자에서 선택합니다.
뷰어가 브라우저 내에서 실행되며 트레이스 분석을 시작할 수 있습니다.

트레이스 파일에는 테스트 중에 표시된 화면이나 입력 데이터가 모두 포함됩니다.
trace.playwright.dev를 사용하는 경우, 파일은 사용자의 브라우저 내에서만 처리되며 서버에 업로드되지 않습니다. 하지만 민감한 정보가 포함된 트레이스를 분석하는 경우에는 다음에 설명하는 '로컬에서 여는 방법'도 함께 확인해 주십시오.

로컬에서 여는 방법

이 방법은 커맨드 라인 인터페이스(macOS의 터미널, Windows의 명령 프롬프트/PowerShell 등)를 사용합니다.

컴퓨터에 Node.js(npx 포함)가 설치되어 있어야 합니다.

뷰어를 로컬에서 실행하려면 다음 단계를 따르십시오:

컴퓨터의 터미널 애플리케이션을 엽니다.
.zip 형식의 디버그 트레이스 파일을 저장한 디렉토리로 이동합니다. cd (change directory) 명령어로 이동할 수 있습니다.
- 예: cd ~/Downloads
다음 명령어를 실행합니다. [your-file-name].zip은 실제 트레이스 파일명으로 변경하십시오.
```
npx playwright show-trace [your-file-name].zip
```

이 명령어를 실행하면 필요한 구성 요소가 다운로드(또는 로컬의 것이 사용)되며, 새 브라우저 창에서 Trace Viewer가 열립니다.

Trace Viewer 인터페이스에 대하여

뷰어는 몇 가지 주요 섹션으로 나뉘어 있습니다.

아래에서 소개하는 기능이나 내용은 실제 화면과 다를 수 있습니다.

스냅샷 (중앙 패널)

이것은 주요 시각적 구성 요소입니다. 테스트 실행 중 브라우저가 어떻게 보였는지 표시합니다.

Action: 기본 뷰로, 액션 대상 요소가 하이라이트된 상태의 페이지 스냅샷이 표시됩니다.
Before: 액션이 실행되기 전의 페이지 스냅샷입니다. 요소가 존재했는지, 올바른 상태였는지 확인하는 데 유용합니다.
After: 액션이 완료된 후의 페이지 스냅샷입니다.
Pick Locator: 스냅샷을 클릭하여 임의의 요소에 대한 Playwright 로케이터를 확인할 수 있는 대화형 도구입니다.
Open Snapshot: 패널의 오른쪽 상단에 있는 버튼을 클릭하면 스냅샷을 새 탭에서 열 수 있습니다. 열린 탭에서는 브라우저의 개발자 도구를 사용하여 DOM 구조와 상태를 확인할 수 있습니다.

액션 타임라인 (왼쪽 패널)

이 패널에는 클릭, 텍스트 입력, 페이지 내비게이션 등 테스트 중에 수행된 모든 액션이 나열됩니다.

실패한 액션은 빨간색으로 하이라이트됩니다.
임의의 액션을 클릭하면 해당 단계에 해당하는 스냅샷이 표시됩니다.
임의의 액션을 더블 클릭하면 타임라인이 해당 액션 구간과 연동되어 하이라이트되며, 상세 패널(Console, Network 등)도 해당 액션과 관련된 정보만 필터링되어 표시됩니다.

타임라인 (상단 패널)

이 패널에는 테스트 실행 전체의 타임라인이 표시됩니다.

타임라인의 임의의 지점을 클릭하면 해당 지점에 해당하는 스냅샷이 표시됩니다.
타임라인에서 임의의 구간을 선택하면 해당 구간의 액션 타임라인이 표시되며, 하단의 상세 패널(Log, Network 등)도 해당 구간과 관련된 정보만 필터링되어 표시됩니다.

상세 (하단 패널)

이 패널에는 선택한 액션이나 타임라인에 대한 상세한 기술 정보가 표시됩니다.

Call: 실행된 내부 Playwright 명령어를 표시합니다.
Log: 액션 실행 중 Playwright가 백그라운드에서 수행한 처리를 표시합니다.
- 예: 요소가 표시되기를 대기 중, 활성화되기를 대기 중, 안정화되기를 대기 중 등
Errors: 선택한 액션 실행 중에 발생한 오류를 표시합니다.
Console: 브라우저 콘솔 메시지(console.log, 오류, 경고)를 표시합니다.
Network: 네트워크 요청(XHR, Fetch)을 표시합니다. 요청을 클릭하면 헤더, 요청 본문, 응답을 조사할 수 있습니다.

테스트 실패 시 조사 절차

테스트가 실패한 경우, 다음과 같은 절차로 실패 원인을 조사합니다.

실패 액션 및 스냅샷 확인

먼저, 무슨 일이 일어났는지 시각적으로 확인합니다.

실패 액션 선택: 왼쪽 Actions 패널에서 빨간색으로 하이라이트된 단계를 클릭합니다.
스냅샷 확인: 중앙 패널에서 선택한 액션 부근의 스냅샷을 확인하여, 의도한 화면에서의 조작인지 확인합니다. 예상했던 페이지와 다른지, 예기치 않은 팝업이 표시되는지, 로딩 화면 상태로 멈춰 있는지 등을 확인합니다.
조작 대상 요소 확인: 스냅샷에서는 조작 대상 요소나 클릭 위치가 하이라이트됩니다. 의도한 요소에 대해 올바르게 액션이 실행되었는지 확인합니다.
또한, Pick Locator 탭을 사용하여 하이라이트된 요소의 로케이터가 테스트에서 예상했던 것과 일치하는지 확인합니다.

상세 정보 드릴다운

스냅샷으로 원인을 특정할 수 없는 경우, 상세 패널에서 원인을 찾습니다.

애플리케이션 오류 조사:
- Console 탭을 열어, 실패한 액션 직전에 애플리케이션에서 오류가 발생하지 않았는지 확인합니다.
Playwright 내부 동작 확인:
- Log 탭을 열어, 요소의 상태(조작성/가시성)가 액션을 방해하지 않았는지 등을 확인합니다.
네트워크 문제 조사:
- Network 탭을 열어, API 요청이 실패(상태 4xx 또는 5xx)하지 않았는지, 응답이 지연되지 않았는지 등 네트워크로 인한 문제가 없었는지 확인합니다. 요청을 클릭하면 서버로부터의 구체적인 응답 내용도 조사할 수 있습니다.
DOM 구조 조사:
- 대상 요소가 예상과 다른 경우, 중앙 패널 오른쪽 상단의 Open Snapshot 버튼을 클릭합니다.
- 스냅샷이 새 탭에서 열리므로, 브라우저의 개발자 도구를 실행하여 DOM 구조를 상세히 조사합니다.