본문으로 건너뛰기

설치

플레이라이트 테스트는 종단 간 테스트의 요구를 수용하기 위해 특별히 만들어졌습니다. 플레이라이트는 크로미움, 웹킷, 파이어폭스를 비롯한 모든 모던 렌더링 엔진을 지원합니다. 안드로이드용 구글 크롬과 모바일 사파리의 네이티브 모바일 에뮬레이션을 사용하여, 헤드리스 또는 헤드가 있는 윈도우, 리눅스, 맥OS에서 로컬 또는 CI에서 테스트합니다.

이곳에서 배우는 것은 다음과 같습니다.

플레이라이트 설치​

npm 또는 얀으로 플레이라이트를 설치하여 시작하세요. 또는 VS 코드 확장을 사용하여 테스트를 시작하고 실행할 수도 있습니다.

bash
yarn create playwright
bash
yarn create playwright

설치 명령을 실행하고 다음을 선택하여 시작합니다.

  • 타입스크립트 또는 자바스크립트 중에서 선택하기 (기본값은 타입스크립트)
  • 테스트 폴더의 이름 짓기 (기본값은 tests 또는 프로젝트에 이미 해당 폴더가 있는 경우 e2e)
  • CI에서 테스트를 쉽게 실행할 수 있도록 깃허브 액션 작업 흐름 추가하기
  • 플레이라이트 브라우저 설치하기 (기본값은 true)

설치되는 것​

플레이라이트는 필요한 브라우저를 다운로드하고 다음 파일을 생성합니다.

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts
playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

playwright.config는 플레이라이트 실행 브라우저를 수정하는 것을 비롯한 플레이라이트 설정이 가능한 곳입니다. 해당 파일이 이미 존재하는 프로젝트 내에서 테스트를 실행하면 종속성이 package.json에 직접 추가됩니다.

tests 폴더에는 테스트를 시작하는 데 도움이 되는 기본 예시 테스트가 포함되어 있습니다. 더 자세한 예시는 할 일 앱의 테스트가 포함된 tests-examples 폴더를 확인하세요.

예시 테스트 실행​

기본적으로 테스트는 3개의 작업자를 사용하여 크로미움, 파이어폭스, 웹킷, 3개의 브라우저에서 모두 실행됩니다. 이는 playwright.config 파일에서 설정할 수 있습니다. 테스트는 헤드리스 모드에서 실행되므로 테스트를 실행할 때 브라우저가 열리지 않습니다. 테스트 결과 및 테스트 로그가 터미널에 표시됩니다.

bash
npx playwright test
bash
npx playwright test

헤드 모드에서 테스트 실행, 여러 테스트 실행, 특정 테스트 실행 등에 대한 자세한 내용은 테스트 실행 문서를 참고하세요.

HTML 테스트 보고서​

테스트 실행이 완료되면 테스트의 전체 보고서를 보여주는 HTML 보고서가 생성됩니다. 이를 이용해 보고서를 브라우저, 통과한 테스트, 실패한 테스트, 건너뛴 테스트, 불안정한 테스트별로 필터링할 수 있습니다. 각 테스트를 클릭하고 테스트의 오류와 테스트의 각 단계를 탐색할 수 있습니다. 기본적으로 일부 테스트가 실패하면 HTML 보고서가 자동으로 열립니다.

bash
npx playwright show-report
bash
npx playwright show-report