극작가 보고서 및 추적

Playwright는 로컬 서버에서 HTML 보고서를 제공하므로 테스트 단계를 쉽게 진행할 수 있습니다. 또한 테스트 보기, 보고, 상호 작용 및 디버깅에 대한 훨씬 더 강력한 옵션을 제공하는 추적 파일을 열 수 있습니다.

HTML 보고서 제공

다음 명령을 실행하여 테스트의 전체 보고서를 볼 수 있습니다.

npx playwright show-report

그러면 테스트 보고서가 있는 브라우저 창이 열립니다. 테스트를 실행하는 데 사용된 브라우저, 각 테스트에 소요된 시간, 테스트의 각 단계를 보고합니다. 단계는 접을 수 있습니다. 즉, 클릭하고 확장하여 테스트의 특정 부분에 대해 실행된 코드를 볼 수 있습니다.

트레이스 뷰어

이것은 내가 Playwright에서 가장 좋아하는 기능 중 하나입니다. 테스트의 추적 파일을 보고 상호 작용할 수 있습니다.

Playwright Config에서 추적 설정

추적 파일을 실행하려면 먼저 playwright.config.ts 파일을 수정해야 합니다. 아래에 나열된 몇 가지 옵션이 있습니다.

'off' - 추적을 기록하지 않습니다

'on' - 각 테스트에 대한 추적을 기록합니다

'retain-on-failure' - 각 테스트에 대한 추적을 기록하지만 성공적인 테스트 실행에서는 제거합니다

'on-first-retry' - 테스트를 처음으로 재시도할 때만 추적을 기록합니다

.

이 예제에서는 추적을 'on'으로 설정하여 항상 테스트를 위한 추적 파일을 가져옵니다.

const config: PlaywrightTestConfig = {
  ...
  use: {
    trace: 'on'
  }
  ...
}
export default config

보고서 재실행

아직 html 보고서가 열려 있으면 Ctrl+C 로 보고서를 닫을 수 있습니다. 이제 추적 파일이 포함된 새 보고서를 만들어야 합니다.

npx playwright show-report

이전과 마찬가지로 테스트 보고서와 함께 html 보고서가 열립니다. 하지만 이제 맨 아래에 이미지와 트레이스에 대한 링크가 있는 트레이스 섹션이 표시됩니다. 이 링크를 클릭하면 추적이 열립니다.

추적 파일 보기

추적 링크를 클릭하면 테스트 추적이 포함된 새 브라우저 창이 표시됩니다. 이것은 테스트 추적을 가지고 놀 수 있는 로컬에서 호스팅되는 PWA입니다.

맨 위에는 스크롤할 수 있고 작업에 따라 다른 상태에서 페이지를 볼 수 있는 타임라인이 있습니다. 클릭은 녹색, 선택은 빨간색과 같이 각 작업의 색상이 다릅니다.

왼쪽에는 테스트의 각 작업을 볼 수 있는 작업 및 메타데이터가 있습니다. 작업을 클릭하면 중간 부분에 해당 작업의 결과가 표시됩니다.

중간 부분은 작업이 강조 표시된 사이트의 DOM 스냅샷을 보여줍니다. 이전 탭은 작업 이전 페이지의 모습을 보여주고 이후 탭은 작업을 클릭한 후의 페이지 모습을 보여줍니다.

오른쪽에는 선택기가 무엇인지, 엄격 모드에 있는지 등을 보여주는 이 작업에 대한 호출, 콘솔 메시지 또는 오류가 있는 경우 콘솔 로그, 모든 네트워크 요청을 볼 수 있는 네트워크 및 소스를 볼 수 있습니다. 테스트.

동영상을 확인하여 작동하는 모습을 확인하세요.

DOM 스냅샷 검사

이것에 대한 정말 멋진 점은 중간에 있는 사이트의 스냅샷이 실제로는 완전히 상호 작용하는 DOM 스냅샷이라는 것입니다. 스크롤하고 사용자 이벤트를 클릭하고 이 개발 도구 내에서 브라우저 개발 도구를 열 수도 있습니다. 아주 멋지다.

결론

트레이스 뷰어는 테스트를 진행하고 추가로 검사할 수 있는 정말 멋진 방법입니다. 이것은 로컬 호스트에서 PWA로 제공되므로 모든 데이터가 컴퓨터에만 있으므로 완전히 안전합니다.

Playwright로 할 수 있는 멋진 일이 훨씬 더 많습니다. 특히 Playwright가 오픈 소스이므로 무료로 사용할 수 있는지 확인해 보시기 바랍니다. 회전을 위해 그것을 가지고 가십시오. 재미있게 놀고 테스트를 받자!