AngularInDepth уходит от Medium. Более свежие статьи размещаются на новой платформе inDepth.dev. Спасибо за то, что участвуете в глубоком движении!

Недавно я работал над внедрением e2e-тестирования Cypress для своего приложения overwatch-challenge. Я был очень впечатлен этим опытом и хотел написать о том, что я сделал, и почему это было так круто.

Этот пост будет посвящен высокому уровню объяснения того, что такое Cypress и почему он вам поможет. Чтобы получить отличное пошаговое руководство (с кодом), пожалуйста, ознакомьтесь с Как начать работу с Cypress от Michael Karén.

Что такое кипарис?

Cypress - это среда тестирования JavaScript с открытым исходным кодом. Cypress позволяет использовать e2e, интеграцию и модульные тесты в ваших проектах. Особенности e2e Cypress - это то, что в настоящее время привлекает наибольшее внимание, как из-за качества опыта, так и из-за большого количества преимуществ, которые он предоставляет.

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

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

Единственный недостаток в том, что в настоящее время он поддерживает только Chrome, но идет обсуждение будущего расширения браузера. Однако, если учесть огромную базу пользователей, которую поддерживает Chrome, вы поймете, что для многих приложений это не проблема.

Большинство разработчиков считают тестирование «неизбежным злом». С Cypress это полностью меняет это чувство, и разработчику становится интересно писать тесты вместе со своим кодом.

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

Как это работает?

Как я сказал в первом разделе, Cypress работает в том же цикле, что и приложение. Вместо этого вы можете указать свои тесты Cypress в среде, но большинство примеров, которые вы видите, запускают локальную копию вашего проекта вместе с Cypress Test Runner в той же среде.

Cypress работает как локальный сервер Node вместе с вашим приложением. Это сильно отличается от более традиционных тестов, выполняемых с помощью Selenium и Webdriver. Работая в качестве локального Node Server, вы можете взаимодействовать как с написанными вами тестами, так и с самим сервером.

Поскольку вы запускаете Cypress Test Runner как локальный сервер Node, для этого обычно нужно использовать какую-либо утилиту.

В своих тестах я использовал:

В документации Cypress рекомендуется использовать wait-on и start-server-and-test. Я обнаружил, что одновременно работает лучше, чем ждать. Для получения дополнительной информации ознакомьтесь с документацией здесь. Также, пожалуйста, посетите страницу одновременного использования NPM здесь.

Что касается фактического написания ваших тестов, кривая обучения очень мала, потому что Cypress находится на вершине технологий, с которыми знакомо большинство разработчиков. Cypress работает поверх следующих инструментов:

  • Мокко (тестовый фреймворк)
  • Чай (библиотека утверждений)
  • Синон (шпионы, заглушки и издевательства)

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

Большая часть синтаксиса Cypress начинается с префикса cy и очень похож на синтаксис Jasmine, который большинство разработчиков использовали в течение многих лет. Это сходство (и отличная документация) делают для Cypress очень маленькую кривую обучения.

Хорошо, давайте посмотрим, как он работает

Когда вы запускаете тесты локально, рядом с Cypress Test Runner отображается окно Chrome. В окне Chrome отображается консольный вывод каждого теста во время его выполнения. Консоль здесь также позволяет путешествовать во времени, где вы можете нажать на запущенный тест и посмотреть, как браузер выглядел на этом конкретном этапе. Это упрощает устранение ошибок и неработающих тестов.

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

Отчеты и панели мониторинга CI

Всякий раз, когда Cypress запускается в вашей среде CI, он создает отчет о тестах и ​​о том, как они выполнялись. Это очень похоже на отчеты, которые вы видите с другими фреймворками, такими как Karma.

Однако Cypress идет дальше и предлагает сервис Dashboard, где вы можете просматривать все запуски (и результаты) ваших тестов. Это особенно полезно, если вы хотите просмотреть историю или сравнить результаты неудачных тестов вашего конвейера.

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

Cypress предлагает огромное количество пользовательских параметров конфигурации. Как было сказано в предыдущих разделах, вы можете настроить как переднюю, так и внутреннюю часть вашего Cypress Test Runner.

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

Вы также можете просмотреть конфигурацию в графическом интерфейсе Test Runner, нажав кнопку настройки.

Сетевые запросы

Одна из действительно приятных особенностей Cypress - это способность перехватывать сетевые запросы. Это особенно ценно, если вы хотите проверить правильный ответ на вызов API.

Для этого вы просто добавляете beforeEach с экземпляром cy.server() с route, как вы видите здесь:

Затем в своем тесте вы просто добавляете cy.wait() и перехватываете ответ от созданного вами маршрута.

В открывшемся окне Chrome с программой Test Runner вы также увидите следующее:

Уменьшение Boilerplate

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

В папке Cypress support вы определяете команду, подобную следующей:

Затем в своем тесте вы можете вызвать команду напрямую, как вы видите здесь, в before с cy.login():

Это сокращает объем кода, который вам придется писать во всем приложении. Обычный вариант использования, в котором это очень помогает, - это тесты, требующие входа пользователей в систему. Вместо того, чтобы писать логику входа несколько раз, вы можете просто вызвать эту команду, и она покрывает весь этот шаблонный код за вас.

Заключительные мысли

Так что после работы с Cypress я действительно не могу сказать о нем достаточно хороших слов. Фреймворк сделал тестирование простым (и увлекательным). Он предоставил множество функций, которых не хватало старым фреймворкам. Также было очень легко интегрировать в мои проекты.

Чтобы повторить то, что я сделал ранее, реальная сила Cypress заключается в том, чтобы заставить разработчиков писать тесты. Написание тестов Cypress гораздо менее болезненно, чем я обычно видел в своей карьере. Тот факт, что разработчики могут получать удовольствие от написания тестов, является огромной победой как для программного обеспечения, которое они производят, так и для компаний, которые они представляют. Одно из самых больших препятствий, с которым сталкивается компания, - это поощрение разработчиков к написанию тестов для своего кода. Cypress предоставил основу, которая делает это весело и легко. Надеюсь, вы познакомитесь с Cypress и даже создадите тесты для своего собственного проекта. Не стесняйтесь оставлять комментарии. Спасибо за прочтение!

Первоначально опубликовано на https://rhythmandbinary.com 9 июня 2019 г.