Cypress 란? (feat. Selenium)

웹 테스트 자동화에 관심이 생겼고, 어떤 상용화 된 툴이 좋을 지 장/단점을 미리 조사하고 학습하는 편이기 때문에 실행 및 회사 사이트에 적용해보았던 내용을 포스팅한다. 실제 사용한 캡처 이미지는 아쉽게도 날라가서 정보 전달 위주로 작성되었다.

---

배경 및 목적

단순, 반복 테스트를 줄이며, 사용자 입장에서 workflow와 laytency를 측정하여 사용자 경험을 고민할 수 있다.

요약

• 웹용으로 설계된 프론트엔드 테스트 도구이며 javascript를 사용하여 프론트 개발자 및 QA 엔지니어를 대상으로 함. E2E, 통합, 단위 테스트가 가능함.
• 사전 지식: javascript 개발 경험, Mocha 프레임워크 경험

---

설치 및 실행 방법(Based on Windows)

• 설치방법:

Mac, Linux(Ubuntu, CentOS), window, docker 설치가 가능하며, nodejs 사전 설치가 요구된다.

npm install cypress --save-dev (version: 7.5로 설치)

노드 모듈 설치 완료 후 cypress 실행

• 실행방법

1)./node_modules/.bin/cypress open

2)package.json을 수정후 npm run cypress:open

//{working directory}/package.json have to modify
{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

3)npx를 이용한 실행:

npx cypress open #GUI

npx cypress run --env configFile=test --spec cypress\integration\matchmaker_spec.js

실행은 GUI 모드와 CMD를 통한 두가지 방법이 있다. CMD를 이용할 경우 특정 파일 및 configuration으로 실행, 병행 수행 등 다양한 옵션이 있다. GUI는 처음 사용할 때 학습 용도로만 사용하고 응용 단계에서는 1 cycle 도는데 테스트 소요 시간, 컴퓨팅 자원, 확장성 고려 시 커맨드 라인에 익숙해지는게 좋다.

Command Line | Cypress Documentation

Command Line | Cypress Documentation

---

사용 방법

Javascirpt와 Web 소스 분석 역량이 사전에 요구되며 GUI 모드로 실행 시 기본 샘플 예제가 있다. 기본적인 사용법 터득에 유용하다. GUI 모드로 실행 시 웹 visit 하게 되는 케이스의 경우 직접 눈으로 확인할 수 있으며, 에디터를 이용하여 편집하면 바로 적용되어 자동으로 실행된다.

---

장/단점

• GUI를 사용해 테스트 실행 상태를 확인하고 디버깅 가능
• 명령이 실행횔 때 UI를 스냅샷 형태로 저장 가능 - css, 텍스트 검증
• 전체 과정을 레코딩 가능
• github 에서의 PR 등을 Webhook Trigger를 이용하면 테스트가 자동으로 가동 가능.
• 테스트가 실패 했을때 효율적으로 대응하기 위해 Slack과 같은 커뮤니케이션 툴과 연동 가능.
• 디버깅: https://vimeo.com/242961930#t=264s
• http api 호출하여 리턴값을 이용한 케이스 가능. ex)url, status code

단점

• multi tab: 미지원. 새로운 탭으로 redirecting하는 경우 테스트 불가.
• popup: 미지원
• Cypress 내부 에러 핸들링이 쉽지 않다.
• *Selenium 대비 지원되는 브라우저가 적다
• 요소를 가져오는 것이 까다롭다. contains를 실제로 사용하지 못하는 경우가 있고, DOM 구조에 의존적이지 않으며 selector를 작성이 어렵다.

---

타 툴과의 비교

Selenium : 다양한 언어 및 브라우저를 지원하기 때문에 크로스 브라우징에 따른 랜더링이 중요하다면 섬세한 테스트가 가능하다. 하지만 빠르고 간편한 측면에서는 cypress가 사용성이 좋다는 평.

---

느낀점

• 프론트 개발 시 선택하라면 cypress를 고를 것 같다. 원하는 BDD/TDD 방법론에 맞춰 테스트 가능하다. 하지만 Mocha 기반이기 때문에 방식은 비슷한데, 정확히 비교는 할 수 없었던 게 아쉬웠다. (https://365kim.tistory.com/70)
• 웹 표준을 지키지 않았던 혹은 ES5 문법 위주로 작성된 웹은 랜더링 시간이 오래 걸렸다. 테스트해봤던 웹 서버의 로그인해서 홈 부분을 띄우는데 까지 시간이 1분 / 5분 이상 차이가 났다. 동일 웹을 셀레늄으로 시도했을 때 오히려 훨씬 짧았다.
• 영어로 인기 도구 구글링 시 cypress는 한참 아래 순위의 도구였다. 많은 사람을 통해 검증된, 인기있는 도구를 도입하는 것이 어느 회사에서 적용하더라도 협업/관리 측면에서 좋지 않을까 싶었다. 그래서 다음 포스팅은 Selenium을 public 웹 테스트한 내용을 포스팅할 예정!

---

참고링크

• https://docs.cypress.io/guides/overview/why-cypress#Who-uses-Cypresshttps://ko.javascript.info/object (공식 javascript)
• https://runebook.dev/ko/docs/cypress/-index- api 한국어 정리
• https://testautomationu.applitools.com/advanced-cypress-tutorial/chapter5.html 튜토리얼
• https://github.com/imakerjun/cypress-basic
• https://365kim.tistory.com/70 (개발 스타일에 따른 예제)
• https://class101.dev/ko/blog/2020/06/24/han/