Manjunath — Начало работы со сквозными тестами в React с использованием Cypress

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

В этой статье основное внимание будет уделено сквозному тестированию. Мы рассмотрим, почему неплохо написать сквозные тесты в React, а затем познакомим вас с инструментами для этого.

Чем хороши сквозные тесты?

Сквозное тестирование — это тестирование всего приложения от начала до конца. Это включает в себя проверку того, что все интегрированные аспекты приложения функционируют вместе, как и ожидалось.

Сквозные тесты пытаются имитировать реальные действия пользователя и, следовательно, проверить, как реальный пользователь будет использовать приложение.

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

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

Сквозные тесты в основном используются для:

  1. Укажите систему, которую мы используем
  2. Предотвращение регрессии и ошибок
  3. Выполнять постоянную и непрерывную интеграцию.

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

Основная идея проведения E2E-тестов — дополнительный уровень полностью автоматизированного набора тестов. Эти преимущества включают увеличение скорости разработки и другие.

Сравнение Cypress с другими платформами автоматизации в React

Фреймворк автоматизации браузера — это больше, чем простая симуляция веб-браузера. Начнем с того, что эти фреймворки могут запускать как полноценный, так и безголовый браузер.

Безголовый браузер — это браузер без графического пользовательского интерфейса или графического интерфейса. Как правило, они быстрее и легче обычных браузеров и являются идеальным инструментом для автоматизированного тестирования разработчиков. Они также поставляются с API, который можно использовать в пользовательском тестовом коде.

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

Селен веб-драйвер

Селен веб-драйвер лучший вариант при поиске самого безопасного выбора. Из трех обсуждаемых здесь вариантов фреймворка Selenium Webdriver присутствует на рынке дольше всего. Будучи проектом с открытым исходным кодом, он имеет исключительно активную поддержку и сообщество разработчиков.

Возможно, лучшим аспектом в пользу Selenium Webdriver является тот факт, что он является частью более широкой экосистемы Selenium. Это гарантирует, что он предоставляет привязки разработчика не только для JavaScript, но и для языков Java, Python, C#, Ruby, Pearl и PHP.

Учитывая продолжительное время существования Selenium Webdriver, он собрал воедино весь спектр функций и является единственным из трех, обсуждаемых здесь, который поддерживает все основные веб-браузеры — IE, Chrome, Firefox, Safari и Edge.

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

Несмотря на то, что Selenium Webdriver обладает значительной универсальностью, функциями и интеграцией, его популярность снижается, учитывая, что он работает намного медленнее по сравнению с аналогами — Puppeteer и Cypress.io.

Кукольник

Кукольник входит в число новых фреймворков автоматизации браузера. Он отлично зарекомендовал себя при имитации человеческого взаимодействия с браузером. Подобно Selenium Webdriver, Puppeteer также имитирует взаимодействие браузера с пользователем.

Puppeteer может делать скриншоты, а также создавать PDF-файлы определенных экранов. Этот факт делает его отличным выбором для пользователей, которым необходимо использовать его для визуального тестирования. Его скорость — еще одно преимущество, которым могут воспользоваться разработчики при выборе инструмента тестирования.

Еще одним важным преимуществом Puppeteer является его тесная интеграция с браузером Chrome и всеми его инструментами разработки и отладки. Это можно объяснить тем, что, как и в Chrome; Puppeteer был разработан Google и активно поддерживается технологическим гигантом.

С другой стороны, если вы в конечном итоге будете разрабатывать или тестировать Safari, Firefox или Edge, Puppeteer вам не подойдет, и вам придется использовать Cypress.

Cypress.io

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

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

Cypress.io не обязан поддерживать какие-либо протоколы управления, которые могут потребоваться для межпроцессного взаимодействия. Это помогает устранить задержку сети или системы, которая может замедлить отправку и получение команд и ответов.

Однако при критическом анализе Cypress.io выявляются три очевидных аспекта:

  1. Метод работы Cypress.io значительно усложняет связь с внутренними серверами. Это означает, что пользователям может потребоваться установка дополнительных модулей при использовании Cypress.io.
  2. Cypress.io не поддерживает тестирование нескольких вкладок браузера.
  3. Cypress.io может одновременно управлять только одним экземпляром браузера.

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

Настройка Кипарис

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

Следующие шаги помогут вам настроить Cypress на вашем компьютере:

Внутри корневой папки приложения нам нужно добавить Cypress в качестве зависимости от разработчиков —

$ npm install --save cypress

Также можно использовать пряжу. Мы предпочитаем использовать NPM, а не пряжу из-за возможности аудита и проверки безопасности, предлагаемых NPM. Некоторые из недавно обнаруженные уязвимости предполагают, что пакеты с открытым исходным кодом могут быть подвержены проблемам безопасности. Npm начиная с версии 6 по умолчанию предлагает проверку уязвимостей. Если вы беспокоитесь о безопасность ваших зависимостей с открытым исходным кодомвы можете попробовать программное обеспечение для анализа кода, такое как WhiteSource, Snyk, Sonatype Nexus и т. д.

Измените запись «скрипты» в «package.json» —

"scripts": {
       ...
       "cypress:open": "cypress open"
}

Затем вам нужно запустить свой сервер локально, как при обычной разработке. После этого вы можете открыть Cypress в новом окне терминала —

$ yarn run cypress: open

Через некоторое время Cypress откроет всплывающее окно. Здесь мы сможем получить доступ ко всем нашим тестам.

Вы увидите, что Cypress создал новый каталог под названием «cypress», в котором есть подпапки «fixtures», «integration» и «support». Вы также заметите, что Cypress добавил пустой файл конфигурации cypres.json.

Поскольку нам, вероятно, потребуется часто обращаться к корневому пути во время тестов, рекомендуется абстрагировать его в файл настроек. Для этого вы можете открыть файл «cypress.json» и включить новую запись, содержащую ключ «baseUrl» и URL-адрес в качестве значения —

{
  "baseUrl": "
}

Вывод

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *