1. 개요

UI 테스트 도구인 Cypress의 설치방법과 실행방법에 대해 소개한다.

2. Cypress 설치

프로젝트 폴더에서 npm이나 yarn을 사용하여 Cypress를 설치한다.

$ npm install cypress
$ yarn add cypress

Cypress를 GUI 형태로 실행하면 다음과 같이 cypress 설정 파일과 cypress 디렉터리가 생성된다. 디렉터리 하위에는 테스트 코드 예제가 들어있다.

# Cypress 실행
$ npx cypress open

$ ls -altr
...
-rw-r--r--    1 snowball  staff       3 12 18 19:56 cypress.json
drwxr-xr-x    6 snowball  staff     192 12 18 19:56 cypress 

$ tree cypress
.
├── fixtures
│   └── example.json
├── integration
│   └── examples
│       ├── actions.spec.js
│       ├── aliasing.spec.js
│       ├── assertions.spec.js
│       ├── connectors.spec.js
│       ├── cookies.spec.js
│       ├── cypress_api.spec.js
│       ├── files.spec.js
│       ├── local_storage.spec.js
│       ├── location.spec.js
│       ├── misc.spec.js
│       ├── navigation.spec.js
│       ├── network_requests.spec.js
│       ├── querying.spec.js
│       ├── spies_stubs_clocks.spec.js
│       ├── traversal.spec.js
│       ├── utilities.spec.js
│       ├── viewport.spec.js
│       ├── waiting.spec.js
│       └── window.spec.js
├── plugins
│   └── index.js
└── support
    ├── commands.js
    └── index.js

3. Cypress 실행하기

GUI로 Cypress를 실행하면 테스트가 어떻게 진행되는지 직접 확인할 수 있다는 장점이 있다.

하지만 테스트 자동화를 위해 CI 툴과 통합하여 사용하려면 GUI가 아닌 커맨드라인으로 실행하는 것이 유용하다.

# 테스트를 실행할 브라우저를 지정
$ npx cypress run --browser chrome

# 헤드리스로 테스트를 실행
$ npx cypress run --headless

4. Allure Plugin을 사용하여 리포트 생성하기

Cypress로 테스트를 수행한 결과를 Allure를 통해 리포트로 변환하여 확인할 수 있다.

1) cypress-allure 플러그인을 설치한다.

$ npm i -D @shelex/cypress-allure-plugin

2) cypress/plugins/index.js 파일에 아래 내용을 추가하여 allure plugin을 사용할 수 있도록 한다.

const allureWriter = require('@shelex/cypress-allure-plugin/writer');
...
module.exports = (on, config) => { 
...
   allureWriter(on, config); 
...
};

3) cypress/support/index.js 파일을 수정하여 allure plugin을 import한다.

import '@shelex/cypress-allure-plugin';

4) Allure 결과 파일을 저장할 디렉토리를 cypress.json 파일에 지정한다.

{ 
  "env": 
    { 
      "allureResultsPath": "allure/allure-results" 
    } 
}

5) Cypress를 headless로 실행한다.

$ npx cypress run --config video=false --env allure=true --headless

6) 생성된 allure 결과 파일을 기반으로 allure 리포트를 생성한다.

$ cd allure
$ allure generate
$ allure open