Cypress에서 여러 환경 변수에 대한 구성 파일 사용

Cypress 프레임워크 확장과 관련하여 읽을 수 있고 변경하기 쉽고 독립적이며 생각할 수 있는 기타 최상급을 원한다면 configuration files 😎를 사용하는 것이 좋습니다. 실제로 environment variables 조작에 대한 다른 옵션이 할 수 있는 것만큼 어렵지 않습니다.

먼저 프로젝트의 루트 디렉터리 아래에 config 폴더를 만듭니다(cypress 폴더 외부에 있음). 당신의 극도의 인내심이 왜 그것을 거기에 두기를 원하는지에 대한 질문에 대답하는 데 필요합니다.
다음으로 두 개의 파일env.json을 만듭니다.local.env.json :

{
 "env": {
  "domain": "localhost:8080",
  "description": "This is my local machine!",
  "protocol": "http://",
  "subDirectory": "helloworld"
 }
}

test1.env.json :

{
 "env": {
  "domain": "test1.domain.com",
  "description": "This is awesome company's stage environment",
  "protocol": "https://",
  "subDirectory": "/helloworld"
 }
}

그런 다음 plugins/index.js로 이동하여 다음 스크립트를 삽입합니다.

const fs = require('fs-extra');
const path = require('path');

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

    return fs.readJson(pathToConfigFile)
}

// plugins file
module.exports = (on, config) => {
    // accept a configFile value or use local by default
    const file = config.env.configFile || 'local';

    return getConfigurationByFile(file)
};

내가 잊어버린 것: 패키지fs-extra를 전제 조건으로 설치해야 할 수도 있습니다(npm i --save-dev fs-extra )

마지막으로 integration 폴더 아래의 테스트에서 환경 변수를 호출할 수 있습니다.CheckTheUrl.js

const helloWorldUrl = Cypress.env('protocol') + Cypress.env('domain') + Cypress.env('subDirectory')
describe('Run this baby!', ()=> {
 it('Run this baby, I said!', ()=> {
  cy.visit(helloWorldUrl);
  cy.log('This is for demo purpose so I am not doing assertion!');
 });
});

그리고 마지막 단계는 아래 명령을 사용하여 CLI(IDE의 터미널이든 CI 파이프라인이든)를 통해 테스트를 실행하는 것입니다.npx cypress run --env configFile=local 그리고 괴상한 느낌이 든다면 하드 코딩을 제거하고 configFile의 값을 %envName%와 같은 것으로 매개변수화하십시오. 여기서 CI 구성/매개변수의 값을 항상 교환할 수 있습니다.

보너스로 다음 줄과 함께 이 스크립트를 package.json에 포함할 수도 있습니다.

"scripts": {
    "cy:run": "node scripts/cypress.js",
    "e2e:ci": "cypress run --env 'configFile=%envName%'"
}

그렇다면 config 하위 폴더를 cypress 폴더 외부에 배치한 이유는 무엇입니까? 안티 클라이맥스에 대해 유감스럽게 생각하지만 k6과 같은 다른 프레임워크에 대해 이러한 환경 변수를 재사용하고 싶기 때문입니다(이는 json 형식의 데이터일 뿐입니다). 다음과 같이 만들 수 있습니다.

import http from `k6/http`;
const config = JSON.parse(open('../config/local.env.json'));
import { sleep } from 'k6';

const helloWorldUrl = `${config.env.protocol}${config.env.domain}${config.env.subDirectory}`;

export let options = {
  vus: 50, // no. of virtual users
  duration: '30s',
};

export default function() {
  console.log(`Attacking the Hello World page, baby!`);
  http.get(`${helloWorldUrl}`);
  sleep(1);
}

게으른 엔지니어는 항상 cypress 폴더를 가리키도록 할 수 있지만 외부에 두는 것이 더 깔끔해집니다.