Этой статьей мы начинаем большой цикл по cypress.io.
Тестирование веб-приложений является одной из важнейших составляющих разработки, и в связи с высокими требованиями к качеству выпускаемых продуктов потребность в стабильных инструментах автоматизации тестирования растет с каждым днем. На рынке сегодня большое количество инструментов и фреймворков автоматизации с открытым исходным кодом. Cypress — один из таких инструментов, который быстро завоевал признание и сегодня пользуется огромной популярностью при автоматизации инеграционного и сквозного (End to End) тестирования пользовательского интерфейса.
В нашем цикле статей вы узнаете обо всех тонкостях Cypress и получите пошаговое руководство по его настройке и использованию.
В нашей первой статье мы рассмотрим следующие темы:
- Что такое Cypress?
- Чем он лучше других инструментов?
- Архитектура Cypress
- Основные компоненты архитектуры
- Уникальные возможности Cypress
- Отличия между Selenium и Cypress?
Что такое Cypress?
Это next-gen инструмент для тестирования UI, созданный для современного веба. Он решает критические проблемы, с которыми сталкиваются разработчики и QA-инженеры при тестировании современных приложений, например, проблемы синхронизации, несоответствие тестов из-за того, что элементы не видны или недоступны.
Он построен на Node.js и поставляется в виде npm-модуля. Поскольку в основе cypress лежит Node.js, для написания тестов используется JavaScript. Но 90% кода может быть сгенерировано с помощью встроенных команд Cypress, которые легко освоить.
Cypress поставляется в комплекте с jQuery (библиотека Javascript) и наследует многие методы jQuery для поиска и управления UI-компонентами, обработки событий, CSS-анимации и работы Ajax.
Что делает Cypress уникальным инструментом?
Существует много уникальных особенностей Cypress, которые делают его одним из удобных вариантов для автоматизации тестирования веб-приложений. Вот некоторые из них:
- Архитектура Cypress обеспечивает быстрое, последовательное и надежное выполнение тестов по сравнению с другими инструментами автоматизации.
- Устойчивость к Flaky-тестам. Cypress автоматически ожидает выполнения команд, прежде чем двигаться дальше. Больше никаких проблем с асинхронностью.
- Возможность тестирования граничных кейсов с помощью имитации ответа сервера (создания мок-ответов сервера)
- Удобство отладки тестов. Cypress делает снапшоты во время выполнения тестов. В журнале команд всегда можно увидеть, что произошло на каждом шаге.
- Просмотр видеозаписей выполнения тестов при запуске из Cypress Dashboard.
Помимо всего вышеперечисленного, Cypress изменил представление о том, как происходила разработка системы автоматизации тестирования. На приведенном ниже рисунке это очень хорошо видно:
При этом, конечно, у Cypress есть и недостатки, и некоторые из них довольно существенны. Было бы упущением не перечислить их здесь.
- Он относительно новый и у него нет такого обширного сообщества, как, например, у Selenium. Но в последние годы Cypress набирает обороты, и сообщество растет большими темпами.
- Как уже говорилось ранее, в Cypress вы можете использовать только JavaScript. Вы не сможете писать тесты на Cypress на статически типизированных языках, таких как C# и Java. Но, поскольку в наши дни JavaScript является одним из самых популярных языков для разработки фронтенда, использование его для автоматизации тестирования устраняет разрыв между разработчиками и тестироващиками.
- Поскольку Cypress работает внутри браузера, в нем нет поддержки работы с внешней функциональностью: например, с всплывающими окнами, вкладками и т.п.
- До версии 4.0.0 он поддерживал только Chrome и Electron. Cypress 4.0.0 включает поддержку браузеров Mozilla Firefox (бета-поддержка) и Microsoft Edge (на базе Chromium), что является большим шагом вперед для кросс-браузерного тестирования.
- Отсутствие поддержки shadow DOM. Shadow DOM в двух словах — это «DOM-дерево поверх DOM-дерева». Это собственное изолированное дерево DOM со своими элементами и стилями, полностью изолированное от исходного DOM.
- Он не поддерживает нативные мобильные приложения, но в будущем планируется поддержка мобильных браузеров.
Архитектура Cypress
Большинство инструментов тестирования (например, Selenium) работают вне браузера. Движок Cypress работает непосредственно в браузере. Другими словами, именно браузер будет исполнять код ваших тестов.
Это позволяет Cypress отслеживать и менять поведение браузера прямо во время выполнения, манипулируя DOM-деревом и изменяя запросы и ответы сети на лету.
Это открывает возможность для нового вида тестирования наряду с абсолютным контролем над вашим приложением (фронт и бэк). Давайте посмотрим на разницу между архитектурой выполнения тестов Selenium и Cypress:
Как мы видим в случае с Selenium, каждый из браузеров предоставил свои драйверы, которые взаимодействуют с экземплярами браузера для выполнения команд. В отличие от этого, в Cypress все команды выполняются внутри браузера, как показано на изображении ниже:
Браузеры, которые поддерживает Cypress: Canary, Chrome, Electron(Default), Chromium, браузеры Mozilla Firefox (бета-поддержка) и браузеры Microsoft Edge (на базе Chromium).
С помощью Cypress можно проводить модульное, функциональное, интеграционное и сквозное (End to End) тестирование. Он подходит для всех уровней пирамиды тестирования.
Из каких компонентов состоит Cypress?
У Cypress есть два основных компонента, которые по умолчанию поставляются при установке — Cypress Test Runner и Cypress Dashboard. Один из них используется в качестве программы для запуска тестов Cypress на локальной машине, а другой нужен для отслежвания выполнения тестов из Automation Suite и их статусы.
Test Runner: запускает тесты в уникальной интерактивной программе, которая позволяет видеть состояние тестов во время их выполнения и одновременно просматривать тестируемое приложение. Ниже перечислены ключевые компоненты Test Runner, на которые мы должны обратить внимание при выполнении тестов.
- Статус теста (Test Status Menu): Меню показывает сводку о количестве выполненных, успешных, проваленных или незавершенных тестов, а также время, затраченное на тест.
- URL Preview: показывает URL теста, помогает отследить URL.
- Размер viewport-а (области видимости): установите размер viewport-а вашего приложения для тестирования responsive (отзывчивых) веб-приложений.
- Журнал команд (Command Log): показывает журналы команд по мере выполнения для всех тестов.
- Экран просмотра приложения (App Preview): вы можете увидеть приложение прямо во время выполнения теста.
Cypress Dashboard: сервис, который предоставляет вам доступ к записанным тестам — обычно при запуске тестов Cypress из CI/CD. Dashboard дает вам представление о том, что происходило во время выполнения ваших тестов.
Примечание: Мы рассмотрим детали работы Test Runner и Dashboard в следующих статьях.
Какие уникальные возможности предоставляет Cypress?
Cypress предоставляет множество функций, которые очень облегчают жизнь тестировщика:
Путешествие во времени: Cypress может делать снимки приложения во время выполнения тестов. После выполнения тестов можно навести курсор на каждую команду в панели Test Runner, чтобы увидеть, что происходило на каждом шаге.
Отладка: Cypress позволяет отлаживать тесты с помощью привычных инструментов, таких как Developer Tools. Читаемые ошибки и трассировка стека делают отладку очень удобной.
Автоматическое ожидание: С Cypress нет необходимости задавать явное ожидание для ваших тестов. Он автоматически ожидает команды и утверждения, прежде чем приступить к их выполнению.
Шпионы, заглушки и часы: Как и в Unit-тестах, вы можете контролировать поведение функций, ответы сервера с помощью spy-методов и функциональности стабов, которые предоставляет Cypress.
Контроль сетевого трафика: Используя Cypress, вы можете управлять сетевым трафиком по своему усмотрению и настраивать ответы на API-коллы в соответствии с вашими потребностями.
Последовательные результаты: Поскольку Cypress не использует Selenium или WebDriver и выполняет тесты непосредственно в браузере, это способствует быстрому, последовательному и надежному тестированию, в котором нет flaky-тестов.
Скриншоты и видео: Автоматически делает скриншоты при падении теста или записывает видео всего тест-сьюта при запуске из CLI.
Отличия между Selenium и Cypress
Приведенный ниже рисунок дает четкое представление о различиях между Selenium и Cypress:
Выводы:
Это next-gen инструмент для тестирования UI, созданный для современного веба. Он выполняет тесты непосредственно в браузере.
Кроме того, Cypress предоставляет встроенный Test Runner, с помощью которой можно запускать тесты непосредственно из Cypress UI.
Он предоставляет доступ к Cypress Dashboard, где показаны результаты всех запусков тестов.
Cypress UI предоставляет различные уникальные возможности, такие как путешествие во времени, автоматическое ожидание, стабы и т.д., что делает его уникальным среди других инструментов автоматизации тестирования.
