cypress & cypress studio 사용하기 (e2e 테스트)

e2e 테스트는 End to End 테스트로, 유닛 단위 테스트와는 정 반대로 전체적인 테스트를 의미한다.

웹페이지는 자주 수정이 일어날 수 있기 때문에 이런 전체적인 테스트가 어렵다고 생각했었는데, 이번에 Cypress와 Cypress Studio를 사용해보고 생각이 바뀌었다.

이렇게 손쉽게 테스트를 작성할 수 있다면, 몇 번이라도 테스트를 세팅할 수 있을 것 같다!

 

🌧️ Cypress 설치하기

npm i -D cypress

🌧️ Cypress 실행하기

npx cypress open

 

설치와 실행 모두 위와 같이 간단하게 할 수 있다.

실행을 따라가면, spec을 생성하고 이곳에서 직접 화면을 보며 테스팅을 진행할 수 있다.

 

그렇지만, 테스트 코드는 직접 작성해야 한다.

그러나, Cypress에서는 HTML을 살피며 코드를 작성하는 번거로움을 해소하는 옵션이 있다.

Cypress Studio를 설정하면, 직접 웹 페이지에서 조작하는 대로 테스트 코드를 자동으로 생성해주기 때문이다.

 

 

👏 Cypress Studio 설정 공식문서

https://docs.cypress.io/guides/references/cypress-studio

Cypress Studio | Cypress Documentation

공식문서의 가이드를 따라서, 간단하게 Cypress 테스트 코드를 동작에 따라 자동으로 생성할 수 있다.