Что такое кросс-браузерное тестирование🤔
Кросс-браузерное тестирование – это метод обеспечения качества веб-приложений, цель которого – убедиться, что веб-страница имеет одинаковое поведение в различных версиях браузеров и операционных систем, используемых на рынке, то есть гарантирует качество вашего сайта на разных экранах.
Как это сделать с помощью 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