Cypress로 e2e 테스트 코드 작성하기

Cypress

Hyeonlog 2022. 9. 30. 14:07

728x90

api 코드를 테스트 할때는 mocha, jest 로 진행을 해본 적이 있는데 프론트에서는 매번 테스트를 직접 진행했었다.

사실 테스트 코드를 짤만큼의 여유가 없기도 했지만,,변명 ㅎ

회사 프로젝트를 진행하면서 생각보다 빨리 작업이 끝나서 남는 시간에 드디어 테스트 코드를 작성해 볼 수 있었다.

사실 테스트 코드도 개발 진행사항에 포함되어야한다고 생각한다. 조금 더 완성도 높은 코드가 작성 될 수 있다.

앞으로는 테스트 코드 완료 일정까지 태스크 관리를 할 예정이다.

End to End 테스트로 사용자 입장에서 해당 소프트웨어를 테스트 하는 방법이다.

즉, ui/ux 기반의 테스트가 될 수 있다.

e2e 프레임워크로는 cypress / selenium / testCafe / nightwatch 등이 있다.

npm trends에서 1년간 가장 많이 사용한 프레임워크로는 cypress가 압도적으로 많았기에 cypress로 개발을 진행하기로 선택했다.

해당 프레임워크는 사용하고자 하는 프로젝트에 바로 연동하여 개발 진행도 가능하고 분리하여 진행도 가능하다.

우선은 분리하여 진행해보려고한다.

cypress getting-started

yarn을 사용하여 진행하였다.

설치 : yarn add cypress --dev

실행 : yarn run cypress open

script에 추가

"scripts": {
    "cypress:open": "cypress open"
	  }

여기까지 진행하면 cypress 의 기본 셋팅은 완료!

실행하면 하단과 같은 화면이 뜬다.

E2E 테스트를 진행할 예정이므로 E2E 테스팅을 클릭

continue를 클릭하면 기본 프로젝트 셋팅은 완료

원하는 브라우저를 클릭하여 테스트를 진행하면된다.

우선은 가장 기본인 크롬으로 진행을 하엿다. 추후에 파이어폭스도 진행은 해봐야 할 듯 싶다.

scaffold를 실행하면 example code 확인이 가능하므로 테스터 코드작성 할 때 참고하면서 하기 좋다.

우선은 new empty spec으로 첫 테스팅 코드를 작성해보자

파일명은 우선 바꾸지 않고 진행

해당 샘플 코드를 사용하여 테스트를 진행 해보자

따란- 완료!

단순 visit 테스팅이라 별건 없지만 직접 내가 테스트를 하는 것보다 훨씬 빠른 것을 알 수 있다.

모든 페이지 방문 테스트 역시 필요하기 때문에 이러한 간단 반복 작업시에 훨씬 테스팅 시간을 줄여줄 수 있다.

이렇게 사용된 코드는 프로젝트에 자동으로 삽입이 되어있다.

여기서 코드를 수정하는 것이 편하기 때문에 앞으로 code에서 수정할 예정이다.

728x90