Playwright는 웹 앱에 대한 프레임 워크 공유 엔드 투 엔드 테스트 (E2E 또는 통합 테스트) 도구입니다. Playwright는 훌륭한 개발자 경험을 보유하고 있으며 변화를 간단하게 변경하기에 좋은 글쓰기와 탄력적입니다.

1. 극작가를 설치하십시오

극작가를 설정하려면 다음 명령을 실행합니다.

npm init playwright@latest

터미널의 설정 마법사를 안내하게됩니다. "엔드 투 엔드 테스트를 어디에 두어야합니까?"

package.json에 스크립트를 추가하십시오

package.json에 극작가 테스트를 실행하기 위해 다음 두 스크립트를 추가하십시오 :

이것은 개발 및 CI 환경에서 테스트를 실행할 수 있습니다.

극작가 구성

Playwright.config.ts 파일은 다음과 같이 구성해야합니다.

구성의 주요 변경 사항 :

use.baseurl
• : 개발 서버의 기본 URL을 설정하므로 모든 테스트에서 작성할 필요가 없습니다.
WebServer
• :이 블록은 개발 서버를 시작하는 방법을 설명합니다. CI 환경에 있지 않으면 이미 실행중인 서버를 재사용 할 것입니다.
TestDir
• : 극작가가 E2E 테스트를 찾아야하는 디렉토리 (이 경우 SRC/TESTS/E2E).
2. 브라우저 테스트 용 MSW를 구성하십시오

지금까지 MSW는 Node.js 환경에서 API 응답을 조롱하기 위해 설정되었습니다. 그러나 극작가는 테스트를 위해 실제 브라우저를 사용하기 때문에 브라우저 환경에서 작동하도록 MSW를 구성해야합니다.

브라우저 기반 테스트 용 MSW 서비스 작업자를 등록 할 새 JavaScript 모듈을 만듭니다 :

3. 작업자를 개발 모드로 등록하십시오

앱이 개발 모드에서 실행될 때 MSW 작업자를 시작하려면 다음을 앱의 루트 모듈 (예 : SRC/Main.tsx)에 추가하십시오.

.env 파일에서 vite_api_mock 환경 변수를 설정하십시오 :

vite_api_mock = "true"

VITE_API_MOCK="true"

이제 앱의 흐름에 대한 E2E 테스트를 작성할 수 있습니다. 다음은 Playwright 테스트 예입니다.

5. 테스트 실행

E2E 테스트를 실행하려면 다음 명령을 사용하십시오.

NPM 실행 테스트 : E2E : CI

npm run test:e2e:ci