Cypress - 클라이언트 테스트 자동화란? + env 동적 전달

출처(https://docs.cypress.io/)

설치

Requirement

• NPM >= 5.2.0

Ubuntu / Debian

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

CentOS

yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib

>_ npm install

cd /your/project/path

npm install cypress --save-dev

실행

Browser Mode

./node_modules/cypress/bin/cypress open

Browser install (ubuntu)

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb

Command Line Interface Mode

npx cypress run

CLI Arguments 전달

./node_modules/cypress/bin/cypress open --env test={test},test1={test1}

• 코드에 Agrs 들을 전달하는 방식

vi cypress.config.js

const { defineConfig } = require('cypress')
const fs = require('fs-extra')
const path = require('path')

async function getConfigurationByFile(test, test1) {

    const pathToConfigFile = path.resolve('/cypress', 'config', `${file}.json`);

    let readJson =  await fs.readJson(pathToConfigFile).then((config) => {
        config.env.test = test;
        config.env.test1 = test1;
        
        return config;
    });
    
    return readJson;
}

module.exports = defineConfig({
    e2e: {
        experimentalSessionAndOrigin: true,
        setupNodeEvents(on, config) {
            const test = config.env.test;
            const test1 = config.env.test1;
            return getConfigurationByFile(test, test1);
        },
        video: false,
        screenshotOnRunFailure: false,
    },
})

• module.exports = defineConfig에서 setupNodeEvents 함수 내 config 데이터를 통해 args 값 GET
• getConfigurationByFile 함수를 통해 args 값 전달
•  

// 전달 받은 args 값 TEST 에서 사용할 수 있도록 env 세팅
let readJson =  await fs.readJson(pathToConfigFile).then((config) => {
    config.env.test = test;
    // 전달할 env 값에 args 세팅 ..add
    return config;
});

전달받은 Args 테스트에서 사용

describe('############# { 즐거운 테스트 } #############', () => {
    it('TEST', () => {
        cy.request({
            method: 'GET',
            url: 'localhost/',
            headers: {
                'accept': 'application/json;charset=UTF-8',  
                'authorize': 'TEST '+Cypress.env('test'),
            },
            ...
    });
});

• Cypress.env('test') 처럼 Cypress 객체를 통해 env 값 사용

TEST TIP

FailOnStatusCode

describe('############# { 즐거운 테스트 } #############', () => {
    it('TEST', () => {
        cy.request({
            method: 'GET',
            url: 'localhost/',
            headers: {
                'accept': 'application/json;charset=UTF-8',  
                'authorize': 'TEST '+Cypress.env('test'),
            },
            failOnStatusCode:false, // 값을 false 로 준다.
            ...
    }).then((response) => {
        expect(response.body.status).to.eq('422');
    });
});

 

• 해당 값을 false 로 주지 않으면, 4xx error 관련 then 으로 넘어오지 않아 Debugging 이 어려움
• 따라서 false 를 주면 then 으로 넘어와 error response 를 확인할 수 있다.