Cypress - 무료 Web 테스팅 도구

출처: Cypress Beginner Tutorials, Automation Step by Step, Raghav Pal(인도 테스트 엔지니어), 2021년 3월

 

---

 

Cypress는 웹 브라우저 상에서 실행되는 모든 것을 테스트할 수 있는 웹 프론트엔드 테스트 자동화 도구이다.
JavaScript 기반 오픈 소스 테스트 프레임워크이며 Mocha(테스팅 프레임워크)와 Chai(어써션 라이브러리)를 사용한다.  
Cypress는 셀레니엄이나 WebDriver를 사용하지 않고 브라우저와 직접 인터액션하여 빠르고 일관된 테스트 결과를 보장한다. 셀레니엄은 네트워크를 통해 리모트 커맨드를 실행하는 반면 Cypress는 테스트 대상 애플리케이션과 동일한 런 루프에서 실행되므로 아키텍쳐적으로 다르다.

 

지원 브라우저: Chrome, Firefox, Edge, Electron, Brave

OS 요구 사항:

• Window 7 이상
• macOS 10.9 이상 (64-bit only)
• Linux Ubuntu 12.04 이상, Fedora 21 and Debian 8(64-bit only)

 

 

프로젝트 셋업

Cypress는 일단 설치하고 나면 사용하기가 무척 쉽지만,
초보자에게는 처음 설치 및 셋업하기가 약간 번거롭다.

예를 들어, 윈도우 환경에서 Node.js를 사용하여 Cypress를 설치하는 과정이 아래와 같다. 

• 1단계 - Node.js 12 이상 설치
• 2단계 - Visual Studio Code 설치(테스트 스크립트를 작성할 IDE 또는 에디터가 필요함)
• 3단계 - 작업 컴퓨터의 원하는 위치에 새 폴더 생성(Cypress 프로젝트를 셋업하게 될 폴더)
• 4단계 - 생성한 폴더를 Visual Studio Code에서 열기
• 5단계 - Visual Studio Code에서 터미널을 열고, 터미널창에서 npm init -y 입력(Cypress 프로젝트 폴더에 package.json 파일이 자동 생성됨)
• 6단계 – Visual Studio Code의 터미널에서 npm install cypress 입력하여 Cypress를 설치한다. 터미널에서 npx cypress -v로 설치된 버전을 확인한다.
• 7단계 – Visual Studio Code 터미널에서 npx cypress open을 쳐서 Cypress GUI 창을 연다(Cypress 프로젝트 디렉토리 구조가 자동 생성됨).

 

더 자세한 건 아래 영상 참고(영어 설명이지만 화면 보고 설치 과정 그대로 따라하면 된다)

영상제목: Cypress Beginner Tutorial 4 - 1st Project Setup(영상길이: 14분38초)

https://www.youtube.com/watch?v=1wlK2WhpphY

 

 

Cypress에서 페이지 오브젝트 모델 구현 예

인기가 많은 도구이다 보니 Cypress에 대한 교육 자료나 튜토리얼 영상이 아주 많이 존재한다.

아래 영상은 기본적인 웹 로그인 기능을 예로 들어서 Cypress로 테스트 스크립트를 작성하는 것을 보여준다.

단순히 웹 엘리먼트를 찍고 커맨드를 복사해 테스트 코드를 짜는 원초적 방식에서 시작해서,
이 코드를 변경하여 페이지 오브젝트 모델 패턴의 테스트 스크립트로 점차 모듈화 하는 과정을
단계적으로 차근차근 설명한다.

 

Cypress Beginner Tutorial 10 - Page Object Model(영상길이: 19분16초)

https://www.youtube.com/watch?v=CVjd6emyoIA&list=PLhW3qG5bs-L9LTfxZ5LEBiM1WFfvX3dJo&index=10

 

페이지 오브젝트 모델(Page Object Model: POM)

페이지 오브젝트 모델은 테스트 유지보수를 강화하고 코드 중복을 줄이기 위해 테스트 자동화에서 널리 사용되는 설계 패턴이다. 

페이지 오브젝트는 테스트 대상 애플리케이션(AUT)의 페이지에 대한 인터페이스 역할을 하는 객체 지향 클래스이다. 페이지 오브젝트 모델에서는 애플리케이션의 각 웹 페이지에 대해 상응하는 페이지 클래스가 있어야 한다. 이 페이지 클래스는 해당 웹 페이지의 웹 엘리먼트(오브젝트 로케이터)를 애트리뷰트로 웹 엘리먼트에 대한 액션(오퍼레이션)을 메쏘드로 구현한다. 테스트는 해당 페이지의 UI와 인터액션 해야 할 때마다 이 페이지 오브젝트 클래스의 메쏘드를 사용한다. 

페이지 오브젝트 모델에서는 테스트 코드와 페이지에 특정한 코드(예, 로케이터 및 레이아웃) 사이가 깔끔하게 분리되어 있으므로, 페이지의 UI가 변경되는 경우 테스트 자체를 변경할 필요가 없고 오로지 페이지 오브젝트 내의 코드만 변경하면 된다는 장점이 있다(유지보수용이성과 재사용성이 높아짐).