Как тестировать в нескольких средах в Cypress 10

Обзор

С выходом Cypress 10, config переместился в новый файл: cypress.config.ts (или .js, если вы еще не используете Typescript). Настройка нескольких окружений и понимание того, как установить такие значения, как baseUrl, чтобы можно было протестировать несколько окружений с помощью одного и того же тестового кода, может запутать. Также полезно запускать некоторые тесты только в некоторых окружениях. В этом эссе я расскажу о том, как моя команда добивается этого. Это далеко не единственный и не самый правильный способ, поэтому если вы увидите что-то, что, по вашему мнению, я должен изменить, пожалуйста, дайте мне знать об этом в Twitter. В этой статье рассматривается только реализация e2e тестирования и не учитываются новые возможности Cypress 10 по тестированию компонентов.

Мы используем Yarn в качестве менеджера пакетов, поэтому если вы используете NPM, когда я описываю, что я набираю в терминале, знайте, что вы можете заменить yarn на npx и получить похожие результаты.

У нас есть две среды, в которых мы тестируем, qa и master, и из-за некоторых различий в среде мы хотим запускать только те тесты, которые мы считаем дымовыми, в master, а более ориентированные на данные тесты запускать в qa. В вашей системе master может быть чем-то похожим на среду dev, подверженную большим изменениям и с меньшей предполагаемой надежностью. Важно знать, что мы считаем qa средой по умолчанию.

Скрипты

Все начинается с нашего файла package.json, где мы определили несколько тестовых сценариев в объекте scripts.

{
  "scripts": {
    "open:qa": "cypress open --e2e --browser chrome",
    "open:master": "cypress open --e2e --browser chrome --env master=1",
    "test:smoke": "cypress run --browser chrome --headless --env master=1 --spec 'cypress/e2e/**/*.smoke.cy.ts'",
    "test:regression": "cypress run --browser chrome --headless --spec 'cypress/e2e/**/*.ts'"
  },
}

Важно отметить, что оба скрипта open:master и test:smoke имеют --env master=1, что мы рассмотрим позже. По сути, это просто позволяет нашему конфигу отличать это окружение от окружения по умолчанию qa. Обратите внимание, что это полностью пользовательская переменная окружения, и вы можете создавать любые переменные окружения, которые вам нужны, передавая их в свой скрипт с флагом --env. Стоит также отметить, что скрипт test:smoke запускает только спецификации, имеющие схему имени *.smoke.cy.ts, тогда как test:regression будет запускать эти файлы плюс все, что имеет схему *.spec.cy.ts, другими словами, каждый файл спецификации.

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

В файле cypress.config.ts мы используем условную логику (if (config.env.master)), чтобы выбрать, какой конфиг запускать, основываясь на флаге --env master=1 (или мы по умолчанию используем qa конфиг окружения, если не видим его). Обратите внимание, что этот подход можно масштабировать до любого количества уникально названных окружений.

e2e: {
  setupNodeEvents(on, config) {
    if (config.env.master) {
      return {
        baseUrl: "<master env baseUrl>",
        env: {
          env: "master",
          auth_username: "<email>",
          auth_password: "<password>",
        },
      };
    } else
      return {
        baseUrl: "<qa env baseUrl>",
        env: {
          env: "qa",
          auth_username: "<email>",
          auth_password: "<password>",                  
        },
      };
  },
},

Обратите внимание, что мы проверяем только существование переменной окружения master. Ее значение не обязательно должно быть 1, оно может быть любым, мы просто проверяем, что она существует. Также обратите внимание, что baseUrl должен быть возвращен вне объекта env.

Время выполнения

В файле рабочего процесса Github Actions или из командной строки мы можем запускать тесты в любом выбранном нами окружении, выполняя такие действия, как:

yarn run open:qa

или

yarn run test:smoke

Вы помните, что эти команды вызывают скрипты, определенные в файле package.json, которые затем запускают весь описанный мной процесс установки флага окружения, а затем считывания этого флага для выбора конфигурации окружения для работы с файлом cypress.config.ts.

Надеюсь, это сделает чью-то жизнь немного проще. Как я уже сказал в самом начале, это не единственный способ сделать это, это просто способ, и он может быть полезен для вас.

Благодарности

Большое спасибо Глебу Бахмутову за всю работу, которую он делает для сообщества Cypress, и за его блог на эту тему. У него также есть отличное видео о том, как установить свойство baseUrl.