공부/Vue.js

[Vue.js] E2E 테스트 - Cypress 설치 및 환경 구성

도리암 2022. 4. 21. 21:27

E2E테스트는 프로그램의 시작부터 끝까지의 흐름을 테스트하는 화면 위주의 테스트다.

즉, 우리가 만든 홈페이지가 의도대로 동작하는 지를 확인하는 테스트다.

 

참조) JavaScript End to End Testing Framework | cypress.io testing tools

 

JavaScript End to End Testing Framework

Fast, easy and reliable testing for anything that runs in a browser. Install Cypress in seconds and take the pain out of front-end testing.

www.cypress.io

npm i -D cypress eslint-plugin-cypress

package.json

 실행시켜보면 다음과 같은 프로그램이 실행된다.

테스트를 눌러보면

이런식으로 테스트가 자동 진행된다.

 

프로젝트를 살펴보면, cypress 폴더와 cypress.json 파일이 생성돼있다.

cypress 문법을 vs code가 인식해야하므로 .eslintrc.js에 표시해준다.