Cypress란?

서론

프론트엔드 인턴으로 있을때, Cypress 를 적용하는 프로젝트를 진행했었는데 태어나서 처음으로 써보고 들어보는 Cypress를 혼자서 공부하고 적용해가면서 적어둔 내용들을 작은 시리즈로 작성하고자 한다.

완벽하지는 않지만, 누군가에게 도움이 되는 시리즈가 되길 바랍니다 👀

다행히 영어라도 할줄알아서 해외 사이트들을 탈탈털었던 기억과 글 coming soon...! 👻

Cypress

cypress는 자바스크립트 E2E 테스트 프레임워크입니다.

• https://www.cypress.io/
• cypress가 무엇인가? 에 대한 영상 https://player.vimeo.com/video/237527670

QA 전문가와 웹개발자를 위한 모던 자바스크립트 테스팅 프레임 워크로 다음과 같은 타입의 테스트들을 할 수 있습니다.

• End-to-end tests
• Integration tests
• Unit tests

특히, 브라우저와 통합된 형태의 구조를 사용해서 브라우저와 동시에 작동하기에 셀레니움에 비해 훨씬 빠른 속도를 제공하고 Agile 환경에 적합하다고 평가를 받습니다. 또한 개인적인 사용 경험상 프론트엔드 개발자들이 개발 중간중간 빠르게 테스트 하는 용도로 적합한 것 같습니다.
이에 대해서는 나중에 포스트를 하나 따로 빼서 제가 느꼈던것, 조사했던 장단점들을 공유해보도록 하겠습니다.

Game Changer? Cypress 장점 / 쓰는이유?

Cypress 공식홈페이지에서는 다음의 이유들로 Game Changer라고 합니다

시간여행기능은 각 실행을 스냅샷으로 촬영하고 각 시점으로 이동이 가능합니다. GUI 인터페이스를 사용해서 클릭만으로 각 시점으로 이동해서 개인적으로 만족하면서 사용했던 기능이고 이거 하나만으로도 충분한 장점이 된다고 생각했습니다.

디버그, 리얼타입 리로드, automatic waiting(async hell이 없긴한데 때로는 async가 그립기도 했습니다.), 인증관련 기능, 네트워크 트래픽컨트롤 (사용을 하지 않아서 모르겠네요), Consistent results, Screenshot and vidioes (테스트가 종료되면 저장이 되고 커버리지 리포트도 생성가능합니다.)

그외에도 여러 확장기능들이 있어 입맛대로 커스텀할 수 있고 공식 홈페이지도 굉장히 상세하게, 또한 여러 예시들을 알려줍니다.