Playwright에서 테스트 디버깅

Playwright 스크립트는 Node.js 디버거 및 브라우저 개발자 도구와 같은 기존 디버깅 도구와 함께 작동합니다. Playwright는 브라우저 자동화를 위한 새로운 디버깅 기능도 도입했습니다.

테스트가 실패할 경우 테스트를 디버그할 수 있는 몇 가지 방법을 살펴보겠습니다.

테스트 실행

VS 코드

codegen을 사용하여 코드를 생성하고 VS Code의 테스트 파일에 붙여 넣으면 테스트가 시작되는 줄 옆에 있는 녹색 삼각형을 눌러 테스트를 실행할 수 있습니다. Playwright는 테스트의 각 단계를 실행하고 테스트가 통과했음을 보여줍니다.

CLI

또는 헤드 모드에서 테스트를 실행하는 다음 명령을 사용하여 테스트를 실행할 수 있습니다. 즉, 터미널에서만 테스트 출력을 볼 수 있습니다.

npx playwright test

헤드 모드에서 테스트를 실행하려면 명령에 '--headed' 플래그를 추가할 수 있습니다. 이렇게 하면 테스트의 각 단계에서 Playwright가 실행되는 것을 볼 수 있는 브라우저 창이 열립니다. 테스트가 매우 빠르므로 문자 그대로 눈 앞에서 번쩍이기 때문에 주의하십시오. 나중에 브라우저 창이 계속 열려 있도록 테스트를 중지하는 방법을 살펴보겠습니다.

npx playwright test --headed

브레이킹 테스트

완벽한 테스트를 작성했기 때문에 테스트가 통과되면 재미가 없습니다. 디버그할 수 있도록 테스트가 실패하도록 합시다. 이 예에서는 로케이터 텍스트를 Women에서 Men으로 변경합니다. 이 예제를 만들 때 테스트가 잘못된 경로를 찾아야 하는 9번 라인에서 중단될 것으로 예상했지만 실제로는 해당 라인에 도달하기 전에 테스트가 중단되었습니다. 한 번 살펴보고 직접 확인하십시오.

VS Code의 오류 메시지는 매우 명확하며 오류가 발생한 이유를 정확히 알려줍니다.

그 이유는 previous post 에서 살펴본 엄격 모드 때문입니다. 엄격 모드에서는 하나의 인스턴스만 가질 수 있으며 Men이라는 단어는 Women이라는 단어에서도 찾을 수 있습니다. 극작가는 어떤 것을 선택해야 할지 모르기 때문에 실패합니다.

VS Code는 이 문제를 해결할 수 있는 두 가지 옵션을 제공합니다. 즉, Women이라는 단어를 사용하거나 선택자를 사용하고 텍스트 Men이 있는 요소의 첫 번째 자식을 선택하는 것입니다. 우리의 경우 Text 남자는 탐색 모음의 첫 번째 인스턴스이므로 선택합니다.

await page.locator('Text=Men >> nth=0').click()

이것을 추가하면 테스트를 다시 실행할 수 있으며 이제 예상대로 URL에서 실패합니다.

디버깅 테스트

테스트 실패 시 진행 상황을 시각화하려면 VS Code 자체에 바로 중단점을 추가할 수 있습니다. 중단점을 추가하려는 줄 옆을 클릭하여 이 작업을 수행할 수 있습니다. 중단점이 추가되면 빨간색 점이 표시됩니다. 그런 다음 녹색 삼각형을 마우스 오른쪽 버튼으로 클릭하고 '디버그 모드에서 실행'을 선택합니다. 그러면 브라우저 창이 열리고 해당 중단점에서 무슨 일이 일어나고 있는지 보여줍니다.

이 예에서는 테스트에서 'Men'과 'Women' 모두에 나타나는 'Men' 텍스트에 문제가 있음을 보여줍니다. 편집기에 'hello'라는 단어를 추가하면 페이지에 'hello'라는 단어가 없기 때문에 브라우저에 강조 표시된 내용이 표시되지 않습니다. 그러나 '어린이'라는 단어로 변경하면 브라우저에서 어린이가 선택되었음을 알 수 있습니다.