Кросс-браузерное тестирование с помощью cypress✨


Что такое кросс-браузерное тестирование🤔

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

Как это сделать с помощью cypress🧐

Для проведения кроссбраузерного тестирования с помощью cypress есть два возможных подхода.

Первый — использование конфигурации самого cypress, чтобы тест выполнялся в различных браузерах, доступных на вашей локальной машине или в вашей среде CI.

Второй способ — использование какой-либо облачной тестовой среды, которая позволяет реализовать несколько браузеров с помощью cypress.

В этой публикации мы сделаем акцент на второй форме, однако в будущем я приведу пост о первой форме.

Предварительные требования📑

  • Создан аккаунт в browserstack
  • Установлен Node.js

Практическая работа👩💻

выбор облачного окружения

Для данного теста мы будем использовать тестовое облачное окружение Browserstack. Важно создать учетную запись browserstack, так как вам понадобится токен доступа к среде выполнения и панели результатов.

Для получения дополнительной информации о том, как создать учетную запись на browserstack

клонирование проекта для тестирования

В этом руководстве мы будем использовать для выполнения проект cypress serve rest. Для этого вам нужно будет клонировать проект на свою машину в соответствии с командой ниже:

git clone https://github.com/marlo2222/cypress-serve-rest.git
Войти в полноэкранный режим Выйти из полноэкранного режима

После клонирования проекта необходимо войти в клонированную директорию и установить зависимости для выполнения с помощью следующих команд:

cd cypress-serve-rest

npm install
Войти в полноэкранный режим Выйти из полноэкранного режима

настройка browserstack

Первым шагом настройки browserstack в вашем проекте cypress является установка Browserstack-Cypress CLI, для этого просто используйте следующую команду:

npm install -g browserstack-cypress-cli
Войти в полноэкранный режим Выйти из полноэкранного режима

После установки CLI нам нужно создать файл browserstack.json, который мы будем использовать для определения, например, учетных данных пользователя. Чтобы создать файл, используйте следующую команду:

browserstack-cypress init
Войти в полноэкранный режим Выйти из полноэкранного режима

В файле browserstack.json в разделе auth добавьте учетные данные для входа в Browserstack

{
  ...
  "auth": {
    "username": "YOUR_USERNAME",
    "access_key": "YOUR_ACCESS_KEY"
  }
  ...
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Список браузеров, на которых вы хотите запускать тесты, и версии для выбранных браузеров также должны быть сообщены в файле browserstack.json, в секции browsers. Обратите внимание, что мы можем иметь разные версии для одного и того же браузера, как показано ниже:

{
  ...
  "browsers": [{
      "os": "Windows 10",
      "browser": "chrome",
      "versions": ["69", "80", "81"]
    },
    {
      "os": "Windows 10",
      "browser": "edge",
      "versions": ["94", "95"]
    },
    {
      "os": "Windows 10",
      "browser": "firefox",
      "versions": ["97", "98"]
    },
    {
      "os": "Windows 10",
      "browser": "opera",
      "versions": ["83", "84"]
    },
    {
      "os": "OS X Catalina",
      "browser": "edge",
      "versions": ["94", "95"]
    }
  ]
  ...
}
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, нам просто нужно настроить run_settings проекта в файле browserstack.json. Ваш файл должен выглядеть примерно так, как показано ниже:

{
 ...
  "run_settings": {
    "cypress_proj_dir": "./",
    "build_name": "Cypress Build: 1556",
    "parallels": 5,
    "npm_dependencies": {}
  },
  "connection_settings": {
    "local": false,
    "local_identifier": null
  }
 ...
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание:

  • Поле build name будет использоваться в качестве имени сборки, которая будет выполняться в облачной среде.
  • Хотя файл определен для параллельного выполнения с 5 экземплярами, выполнение будет происходить только в одном экземпляре.

Запуск😎

Для запуска тестов в облачной среде необходимо использовать следующую команду:

browserstack-cypress run
Войти в полноэкранный режим Выйти из полноэкранного режима

Результаты😀

И вот оно!!! Если вы ввели правильного пользователя и токен в файле browserstack.json, за выполнением можно следить по ссылке, предоставленной в консоли, которая приведет вас прямо к выполнению.

Тесты будут сгруппированы по комбинациям Browser/OS, определенным в файле browserstack.json, как показано на изображении ниже:

Вывод с результатами также будет доступен в консоли после выполнения, как показано на изображении ниже:

Пожалуйста, не стесняйтесь подключаться по linked in для любых вопросов или просто для связи! 😀

📩 linkedin
🐱👤 github

Оцените статью
Procodings.ru
Добавить комментарий