Тестируем интерфейсы с Cypress.io
Все программисты сталкиваются с багами. Если не тестировать код, ошибок в проекте с течением времени становится больше. Поэтому во многих командах есть тестировщик, который ловит баги и сообщает о них команде.
Последние 6 месяцев мы работали над панелью управления электронными ящиками для автоматической доставки посылок. Проект имеет сложную клиент-серверную архитектуру, построенную на фреймворках React и Node.js. В команде на тот момент не было тестировщика, а дополнительно тестировать код своими силами не доходили руки. Отсюда появилось большое количество багов и необходимость тратить время на фиксы и доработки.
Мы не хотели испытывать доверие нашего клиента и внедрили платформу для автоматического тестирования Сypress.io, чтобы своевременно находить и исправлять ошибки. Дополнительно мы воспользовались системой непрерывной интеграции CircleCI.
Несколько слов о тестировании
Существует много способов тестирования, но в рамках этой статьи мы бы хотели ограничиться тремя основными из них.
- Модульные тесты просты в написании, и в проекте их должно быть большее количество. Их цель — проверить компонент, модуль или функцию изолированно;
- Интеграционные тесты требуют больших трудозатрат. Они проверяют, как два или более компонентов или модулей взаимодействуют друг с другом;
- Сквозные (e2e) тесты проверяют систему полностью и развернуто. Если они обнаруживают ошибку, это означает, что какой-то из других тестов не сработал или отсутствует.
Cypress.io
Для тестирования интерфейсов веб-приложений отлично подходит платформа Сypress.io. Её основная задача — проверить, как взаимодействует клиентская часть с серверной (сквозные тесты) и отдельные компоненты страницы друг с другом (интеграционные тесты).
За что мы полюбили платформу:
- Cypress работает на сетевом уровне и способен управлять трафиком приложения;
- Легко встраивается в проект;
- Имеет отдельный браузер Google Chrome;
- Объединяет другие виды тестирования в одной платформе;
- Способен обратиться к каждому объекту веб-страницы в DOM.
Cypress работает по заранее заданному сценарию. Даже если вам раньше не приходилось писать тесты, вы сможете разобраться благодаря понятной документации. Алгоритм отражает обычную последовательность из команд. Например, “Слушай, Cypress. Перейди на главную страницу приложения, на ней отобразятся компоненты страницы «Авторизация». В два поля нужно ввести данные пользователя. Их нужно отправить на сервер, тебя должно перебросить на следующую страницу”. Именно так выглядит типичный тест на Cypress:
Чтобы продемонстрировать Cypress.io в действии, мы выпустили простое веб-приложение на React.js, где данная платформа уже внедрена. Для этого перейдите по ссылке и следуйте инструкциям.
Интерфейс Cypress имеет простой вид, в котором отображается список из тестов, которые располагаются в каталоге по адресу:
cypress/integration/examples
Чтобы разработать тестовый сценарий, потребуется разместить его именно в этом каталоге, и в будущем тест можно использовать по своему назначению. Каждый из приведенных тестовых примеров уже можно запустить из коробки, и чтобы сделать это, потребуется выполнить команды:
git clone https://github.com/egiv/react-cypress-demo.git
npm i
npm run cypress
Отобразится вот такой интерфейс:
После этого можно выбрать и запустить все или некоторые из тестов— откроется окно отдельного браузера. Все примеры показывают взаимодействие системы с элементами DOM: при помощи сценариев Cypress способен автоматически вводить информацию в текстовые поля, очищать данные и нажимать на кнопки. Эти операции можно применять в вашем проекте, чтобы тестировать функционал страниц. Мы записали видеоролик, демонстрирующий, как это происходит:
Ответы с сервера на отправленные данные отслеживаются во вкладке слева. Если что-то пошло не так, Cypress об этом сообщит: сколько тестов было выполнено, какое действие совершено и что содержится в логах. Cypress также может ждать ответ на некоторые события — например, пока на серверной стороне обновляется информация после отправки POST-запроса.
В результате отобразится соответствующая информация:
Cypress работает с любыми сайтами и встраивается во фреймворки, написанными на Javascript: React, Vue, Elm, Angular и другие. В этом и заключается его главное преимущество, за которое мы его оценили.
CircleCI
В дополнение к Cypress, мы используем облачную систему непрерывной интеграции Circle.ci. Она работает с GitHub и автоматически запускает различные проверки. В нашем случае при отправке коммита в репозиторий, проект заново разворачивается в тестовой среде и запускает все сценарии Cypress. Внутри самой платформы имеется любимая нами командная строка, виртуальная машина на Linux и интуитивный интерфейс. Для некоммерческого использования платформа бесплатна.
Подведем итоги
Как показала наша практика, проверять проект могут и разработчики при помощи инструментария для создания тестовых сценариев. Платформы Cypress и CircleCI как нельзя лучше для этого подходят и предоставляет весь необходимый арсенал. А мы планируем и дальше уделять время тестированию и ежедневно работать над улучшением кода.
Нами не велся учет количества ошибок до и после внедрения, но с помощью новых инструментов команде удалось сэкономить время на проверках, сократить количество багов и улучшить качество кода на проекте. А месяц назад мы успешно запустили проект.
Нужен ли тестировщик вашей команде? Зависит от конкретного случая, навыков разработчиков и масштабов проекта. Если же вы используете популярный JS-фреймворк или только начинаете разрабатывать проект, рекомендуем внедрить у вас Cypress и CircleCI.
Удачи на проектах!
