testengineer.ru

Домой Обучение Автоматизированное тестирование Что такое Cypress: Введение и архитектура

Что такое Cypress: Введение и архитектура

Автор

Дата

Категория

Этой статьей мы начинаем большой цикл по cypress.io.

Тестирование веб-приложений является одной из важнейших составляющих разработки, и в связи с высокими требованиями к качеству выпускаемых продуктов потребность в стабильных инструментах автоматизации тестирования растет с каждым днем. На рынке сегодня большое количество инструментов и фреймворков автоматизации с открытым исходным кодом. Cypress — один из таких инструментов, который быстро завоевал признание и сегодня пользуется огромной популярностью при автоматизации инеграционного и сквозного (End to End) тестирования пользовательского интерфейса.

В нашем цикле статей вы узнаете обо всех тонкостях 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 введение и архитектура

При этом, конечно, у 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:

архитектура cypress

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

архитектура 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, на которые мы должны обратить внимание при выполнении тестов.

cypress test runner
  • Статус теста (Test Status Menu): Меню показывает сводку о количестве выполненных, успешных, проваленных или незавершенных тестов, а также время, затраченное на тест.
  • URL Preview: показывает URL теста, помогает отследить URL.
  • Размер viewport-а (области видимости): установите размер viewport-а вашего приложения для тестирования responsive (отзывчивых) веб-приложений.
  • Журнал команд (Command Log): показывает журналы команд по мере выполнения для всех тестов.
  • Экран просмотра приложения (App Preview): вы можете увидеть приложение прямо во время выполнения теста.

Cypress Dashboard: сервис, который предоставляет вам доступ к записанным тестам — обычно при запуске тестов Cypress из CI/CD. Dashboard дает вам представление о том, что происходило во время выполнения ваших тестов.

cypress 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:

отличие между cypress и selenium

Выводы:

Это next-gen инструмент для тестирования UI, созданный для современного веба. Он выполняет тесты непосредственно в браузере.

Кроме того, Cypress предоставляет встроенный Test Runner, с помощью которой можно запускать тесты непосредственно из Cypress UI.

Он предоставляет доступ к Cypress Dashboard, где показаны результаты всех запусков тестов.

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

Какой была ваша первая зарплата в QA и как вы искали первую работу?

Мега обсуждение в нашем телеграм-канале о поиске первой работы. Обмен опытом и мнения.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

$1100*
медианная зарплата в QA в ноябре

*по результатам опроса QA-инженеров в нашем телеграм-канале

Последние публикации

Последние комментарии