<style>.lazy{display:none}</style>Создание плагина конфигурации в Cypress

Создание плагина конфигурации в Cypress

Конфигурация различных сред — это сложная тема, особенно если речь идёт о Cypress. Эта статья расскажет о конфигурации, разбив её на последовательные небольшие шаги, которые помогут лучше ориентироваться в этой теме.

Содержание

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Основы конфигурации

У каждого проекта в Cypress есть файл cypress.json. В этом файле есть атрибут env, который обычно заполняется переменными окружения. Давайте добавим переменную app в этот атрибут следующим образом:

{
  "env": {
    "app": "local"
  }
}

Теперь при открытии Cypress в режиме GUI во вкладке настроек можно увидеть, что конфигурационный файл прочитан и выделен синим цветом.

Конфигурация в Cypress

Как видно на скриншоте, есть несколько способов добавить переменные окружения. Можно выделить их в файле cypress.env.json, добавить в окружение с префиксом CYPRESS_  или передать их как аргумент через интерфейс командной строки (CLI). В документации Cypress можно найти примеры всех этих способов.

Создание плагина

В более сложных системах может потребоваться комбинирование этих подходов. Допустим, есть несколько окружений, например, localstagingpreprod и prod. У каждого из них есть свой домашний URL, версия API и страница перенаправления. Такие конфигурации могут выглядеть следующим образом:

// local
baseUrl: 'http://localhost:3000'
api: 'development'
redirect: 'https://www.product-staging.com'

// staging
baseUrl: 'http://dashboard.product-staging.com'
api: 'development'
redirect: 'https://www.product-staging.com'

// preprod
baseUrl: 'http://dashboard-preprod.product.com'
api: 'v2'
redirect: 'https://www.product.com'

// prod
baseUrl: 'http://dashboard.product.com'
api: 'v1'
redirect: 'https://www.product.com'

Как видите, это немного запутано, но часто встречается в реальных ситуациях. У вас есть различные комбинации API и URL, которые отличаются для различных окружений. Кроме этого, может потребоваться добавить какой-нибудь ключ или секретные данные, которых не должно быть в базе кода. Рассмотрим, как можно решить эту проблему.

Прежде всего следует разобрать, как работает конфигурация. При добавлении этого кода в файл cypress/plugins/index.ts, можно увидеть, что переменные окружения записываются в лог. Если бы у нас всё ещё был прежний cypress.json, то в терминале можно было бы увидеть { app: 'local' } после открытия Cypress через npx cypress open.

module.exports = (on, config) => {

  console.log(config.env) // { app: 'local' }

}

Очистим наш cypress.json и вместо него передадим флаг version в окружение через CLI, вот так:

npx cypress open --env version="prod"

Открыв Cypress, можно будет увидеть { version: 'prod' } в терминале. Используя эту информацию, можно изменить конфигурационный файл в соответствии с тем, что мы передаём во флаге version.

module.exports = (on, config) => {

  if (config.env.version === "prod") {
    config.baseUrl = 'http://dashboard.product.com'
    config.env.api = 'v2'
    config.env.redirect = 'https://www.product.com'
  }

  return config

}

Теперь можно добавить другие переменные в окружение, используя плагин. В настройках Cypress CLI можно увидеть, что переменные окружения уже добавлены.

Конфигурация в Cypress

Предположим, что наши пути конфигурации хранятся в отдельных json-файлах, для которых была создана отдельная папка config в проекте Cypress:

cypress/
└── config/
    ├── local.json
    ├── staging.json
    ├── preprod.json
    └── prod.json

Представим, что для каждого флага version необходимо загружать отдельные файлы и передавать их в качестве конфигурации и окружения. Для этого можно переписать файл плагина так:

module.exports = (on, config) => {

  // if version not defined, use local
  const version = config.env.version || 'local'

  // load env from json
  config.env = require(`../config/${version}.json`);

  // change baseUrl
  config.baseUrl = config.env.baseUrl

  return config

}

Таким образом можно загрузить любой файл и добавить дополнительные json-файлы для различных конфигураций. Любой переданный в CLI файл будет прочитан. Теперь вместо использования флага CLI воспользуемся переменной окружения Cypress:

cypress_version=preprod npx cypress open

Всё, что передаётся в CLI с префиксом cypress_, будет добавлено в качестве переменной окружения.

Использование SECRET_KEY

Вероятно, у вас есть несколько ключей или иная информация, которую не следует хранить в базе кода. Обычно такая информация хранится в файлах .bashrc или .zshrc, в зависимости от используемой оболочки. Также можно воспользоваться плагином dotenv для хранения переменных проекта. Чтобы прочитать эти переменные и использовать их в тестах, нужно добавить в конфигурацию следующий код:

module.exports = (on, config) => {

  // if version not defined, use local
  const version = config.env.version || 'local'

  // load env from json
  config.env = require(`../config/${version}.json`);

  // change baseUrl
  config.baseUrl = config.env.baseUrl

  // add a secret key
  config.env.SECRET_KEY = process.env.SECRET_KEY

  return config

}

Теперь в настройках проекта будет отображаться SECRET_KEY.

Конфигурация в Cypress

Перевод статьи «Create a configuration plugin in Cypress».

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *