Cypress를 사용한 자동화 테스트 구현하기 (소개 및 설치 방법)

Cypress

Cypress는 웹 애플리케이션의 테스트를 쉽고 빠르게 수행할 수 있도록 설계된 JavaScript기반의 E2E 테스트 프레임워크이다. React, Angular, Vue.js 등과 같은 최신 프론트엔드 프레임워크와 원활하게 통합되며, 개발자와 QA 엔지니어가 웹 애플리케이션의 모든 기능을 실제 브라우저 환경에서 테스트할 수 있도록 돕는다.

Cypress의 특징

Time Travel : Cypress는 테스트가 실행되는 동안 각 단계마다 스냅샷을 저장하고 있어 명령 로그에서 마우스를 올리면, 그 단계에서 어떤 일이 일어났는지 확인할 수 있다. 

Automatic Waiting: Cypress는 명령어와 어설션이 완료될 때까지 자동으로 기다린 후 다음 단계로 넘어간다.

Debuggability: 브라우저에서 Cypress가 실행되기 때문에 브라우저의 Dev Tools를 사용할 수 있다.

Spy, Stubs, Clocks 함수 지원 : 함수, 서버응답, setTimeOut에 대한 검증이 가능하다.

Consistent Results: Cypress는 Selenium과 WebDriver를 사용하지 않아 일관되고  빠른 테스트가 가능하다.

다른 자동화 Tool과 비교

	Cypress	Selenium	Play
브라우저	Chrome, Edge, FireFox	Chrome, Firefox, Edge, Safari, IE	Chrome, Firefox, Edge, Safari,
언어	JavaScript/Typescript	Java, Python, C#, JavaScript/Typescript , Ruby, Perl, PHP	Java, Python, C#, JavaScript/Typescript
모바일 브라우저	지원하지 않음	Appium을 사용	실험적 기능으로 지원

디테일한 비교

Cypress 설치, 기본 설정, 기본 예제 파일 실행하기

설치하기

#package.json 생성
npm init -y

#cypress 설치
npm install cypress --save-dev

Cypress 실행

npx cypress open

package.json에 넣고 실행하기

package.json 설정

{
  "name": "",
  "version": "1.0.0",
  "main": "",
  "scripts": {
    "cy:open": "cypress open" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "cypress": "^13.15.0"
  }
}

실행

npm run cy:open

기본예제 실행하기

Cypress 설정 파일 및 폴더별 역할

위 기본 예제를 실행하면 IDE에서 다음 폴더와 js파일이 생성된 것을 확인할 수 있다.

설정 파일 및 폴더별 역할에 대해서 알아보자.

cypress/dowloads 

• 테스트가 실행중 다운로드한 파일이 저장된 폴더의 경로

cypress/e2e

• E2E 테스트 코드를 작성하는 경로

cypress/fixtures (정적 데이터 사용하기)

• 테스트에서 사용되는 정적인 데이터를 저장하는 폴더 

cypress/support (공통 로직 만들기)

• 테스트에 사용되는 공통 로직을 함수로 만들어서 저장하는 폴더

cypress.config.js

• cypress의 설정을 정의하는 폴더 (설정옵션 보러가기)

기본 문법

테스트 그룹화

테스트를 구조화하고 그룹화하는 데 사용되는 문법으로 Mocha 프레임워크에서 차용되었다.

• describe(string, function) : 여러 개의 테스트 케이스(it)를 하나의 그룹으로 묶어 관리할 수 있는 가장 큰 단위이다.
• context(string, function)[선택적 사용] : describe()와 거의 동일하게 동작하지만 좀 더 명확하고 구체적인 상황을 나타낼 때 사용한다.
• it(string, function) : 실제 테스트 케이스를 정의하는 함수이다.

예제

//장바구니 기능 테스트를 위한 테스트 그룹을 정의
describe('장바구니 기능 테스트', () => {
  
  //로그인된 사용자에 대한 케이스 분리
  context('로그인된 사용자', () => {
    beforeEach(() => {
      // 로그인 처리
      cy.login('user@example.com', 'password123');
    });

    it('상품을 장바구니에 추가할 수 있어야 함', () => {
      cy.visit('/products');
      cy.get('.product').first().find('.add-to-cart').click();
      cy.get('.cart').should('contain', '1 item');
    });

    it('장바구니에서 상품을 제거할 수 있어야 함', () => {
      cy.visit('/cart');
      cy.get('.cart-item').first().find('.remove').click();
      cy.get('.cart').should('not.contain', '1 item');
    });
  });
  
  //비 로그인된 유저에 대한 케이스 분리
  context('로그인하지 않은 사용자', () => {
    it('상품을 장바구니에 추가할 수 없어야 함', () => {
      cy.visit('/products');
      cy.get('.product').first().find('.add-to-cart').click();
      cy.get('.cart').should('not.contain', '1 item');
      cy.get('.login-prompt').should('be.visible');
    });

    it('장바구니 페이지에 접근 시 로그인 페이지로 리다이렉트 되어야 함', () => {
      cy.visit('/cart');
      cy.url().should('include', '/login');
    });
  });

});

Hooks

테스트 케이스 실행 전/후 특정 작업을 수행하는 메서드다.

• before(function) : 전체 테스트(describe, context)에서 한 번만 실행되며, 첫 번째 테스트 케이스(it) 실행 전에 수행
• beforeEach(function) : 각 테스트 케이스(it)가 실행되기 전에 매번 실행
• after(function) : 전체 테스트(describe, context)에서 한 번만 실행되며, 마지막 테스트 케이스(it)가 끝난 후 한번만 수행
• afterEach(function) : 각 테스트 케이스(it)가 끝난 후 매번 실행

그 외 주요문법

문법 보러 가기