2. Playwright 명령어

🎈 Codegen

Playwright에서는 codegen 명령어로 실행된 프로그램을 통해, 테스트하고자하는 웹사이트에서 간단한 UI 동작으로 자동으로 테스트를 생성해준다.

// codegen 실행
npx playwright codegen

// 원하는 주소로 바로 이동 후 codegen 실행
npx playwright codegen 주소

 

 

명령어 실행 시 아래와 같이 브라우저와 Playwright Inspector가 실행이 되는 것을 확인할 수 있다. 브라우저의 주소창에서 테스트하려는 주소로 페이지를 이동하면 된다.

 

 

👓 Inspector 알아보기

• Record : 레코드가 활성화되어 있다면 브라우저에서 상호작용 할 수 있다. 마우스를 엘리먼트에 가져다대면 셀렉터를 확인할 수 있고, 선택하면 Inspector에 선택 된 대상에 대한 locator를 생성해 준다.
• Pick Locator : Pick Locator가 활성화되어 있지 않은채 엘리먼트를 클릭 하면 테스트 코드에 바로 추가된다. Pick Locator가 활성화된 상태에서 클릭하면 Locator 탭에서 확인할 수 있다.
• Asset : Inspector에서 Assert도 추가할 수 있다. 대상은 Visibility, Text, Value, Snapshot이다.

 

 

📯 디버깅

Playwright는 노드환경에서 실행되기 때문에 vscode에서 확장 프로그램을 사용해서 디버깅할 수 있다.

 

만약 모든 테스트 실행 시에 디버깅모드로 실행하려면 다음 명령어로 실행하면 된다.

npx playwright test --debug

 

Playwright Inspector가 실행되고 해당 프로그램에서 디버깅을 진행할 수 있다.

✨ UI 모드를 통해서도 디버깅을 간편하게 진행할 수 있다.

 

 

🛒 기타

UI 모드로 확인하기

UI 상에서 테스트를 실행해볼 수 있다. 처리과정을 시각적으로 확인할 수 있기 때문에 테스트시에 많은 도움을 준다. 일반 테스트 실행시보다 더 많은 기능을 제공하기 때문에 디버깅에 용이하다.

npx playwright test --ui

 

 

headed 모드

Playwright가 브라우저에서 테스트 코드를 실행하는 과정을 시각적으로 볼 수 있다. headed 모드를 사용하지 않으면 터미널에서 테스트를 하고 종료된다. UI 모드랑은 다르다.

npx playwright test --headed

 

 

특정 파일만 실행

모든 테스트 코드를 실행하는 것이 아닌 특정 파일만 실행할 수 도 있다.

npx playwright test 파일명

 

여러파일을 한번에 실행할 수 도 있다.

npx playwright test 파일명1 파일명2

 

 

파일이름에 문자열이 포함되는 경우에 해당하는 파일만 테스트도 가능하다.

npx playwright test 문자열

 

 

실패한 테스트 실행

마지막 테스트에서 실패한 테스트만 실행할 수 도 있다.

npx playwright test --last-failed

 

 

리포트 확인

테스트 결과를 HTML 리포트로 확인할 수 있다. 어떤 테스트가 실패하였고, 어떤 지점에서 실패하였는지를 리포트 결과에서 확인할 수 있다.

npx playwright show-report

 

테스트 시에 --trace on 옵션을 사용하는 경우 결과 리포트에서 실행과정을 추적할 수 있다.