Тестируйте Frontend и API вместе с Cypress

Использование Cypress на практике для комбинированных сценариев тестирования для повышения производительности

Вступление

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

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

Совместное тестирование интерфейса и API - одна из таких стратегий, которые я нашел весьма полезной.

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

Предварительное условие: базовые знания о Cypress и о том, как писать тесты на Cypress.

Что такое сквозное тестирование?

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

Cypress - это фреймворк для тестирования JavaScript E2E, популярность которого растет в последние несколько лет.

Я считаю, что Cypress.io - лучшая замена Selenium.

Кроме того, он построен на основе Mocha и запускается в браузере, что позволяет выполнять асинхронное тестирование.

Как Cypress поддерживает тестирование E2E?

Программа запуска тестов Cypress - позволяет настраивать и писать тесты и наблюдать за их выполнением в режиме реального времени.
Панель управления Cypress - позволяет запускать тесты, отлаживать тесты в CI и записывать данные тестирования CI, снимки экрана и видео.

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

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

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

Кроме того, кроссбраузерное тестирование больше не проблема! 😃

Cypress выполняет тесты в Firefox, браузерах семейства Chrome, Edge и Electron локально.

Я считаю, что у большинства из вас есть базовое представление о настройке Cypress и написании теста Cypress. Поэтому я не буду вдаваться в подробные объяснения основ Cypress в этой статье. Чтобы получить фору, давайте рассмотрим образец теста для моего примера формы, упомянутого ранее.

Если вы посмотрите на код до строки 16, он проверяет входные данные в форме на предмет проверки. Это подпадает под тестирование внешнего интерфейса. Затем с cy.intercept() тест фокусируется на заглушке запроса XHR для отправки формы. Это подпадает под тестирование API.

Аналогичным образом, тест Cypress можно использовать для обоих сценариев тестирования, в которых может быть протестирован весь пользовательский поток конкретной функции. Однако важно отметить, что cy.intercept был выпущен вместе с Cypress 4.x. Более ранние выпуски Cypress требовали cy.server() и cy.route(), чтобы заглушить запрос XHR.

Кроме того, запрос XHR запускается Cypress Test Runner (в Node.js). Следовательно, вы не сможете увидеть запрос в Инструментах разработчика.

Использование Cypress дает множество преимуществ от совместной автоматизации тестирования интерфейсов и API. Давайте посмотрим на несколько.

Преимущества одновременного тестирования внешнего интерфейса и API

Все тесты могут быть разветвлены и версированы вместе.
Экономит время, так как когда все находится в одном месте, обслуживание сокращается.
Позволяет выполнять сквозные (функциональные) пользовательские поточные (функциональные) тесты, которые гарантируют стабильность приложения.
Обеспечивает более быстрое выполнение тестов, поскольку существует только один набор тестов для интерфейса и API.
Позволяет тестировать приложение в определенном состоянии с использованием кеширования API перед тестированием e2e.
Поскольку Cypress работает в браузере, все тесты выполняются очень близко к приложению. Таким образом, Cypress может даже кэшировать API-интерфейсы и повторно использовать их, чтобы ускорить переход к компонентам при тестировании e2e. Это значительно улучшает производительность тестирования.

Специальные возможности, доступные при использовании Cypress на практике

Тестовая отладка

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

Код теста Cypress выполняется в том же цикле выполнения, что и приложение.

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

Есть несколько способов отладить тест.

Использование отладчика в DevTools.
Использование debugger внутри тестов.
Использование .debug() - это сокращение, предоставленное Cypress для отображения интересующего элемента в консоли. Пользователь может взаимодействовать с ним и отлаживать его с помощью консоли.
Пошаговое выполнение тестов команда за командой с использованием .pause() - позволяет проверять DOM, сеть и т. Д. После каждой команды.

Повторные попытки теста

Большинство инструментов тестирования не позволяют выполнять автоматический повторный запуск теста. Однако при простой конфигурации Cypress поддерживает повторные запуски тестов X раз. Конфигурация следующая.

{
   "retries": {
      // Configure retry attempts for `cypress run` (default: 0)
      "runMode": 2,
      // Configure retry attempts for `cypress open` (default: 0)
      "openMode": 0
    }
}

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

Ожидает элементы DOM

В отличие от Selenium, Cypress ожидает появления элементов DOM перед запуском тестов. Вам больше не нужно использовать такие механизмы, как thread.sleep или waitForTheMoon помощники.

Недостатки Cypress

Для тестов E2E могут потребоваться тесты бизнес-уровня, поскольку при одновременном тестировании как интерфейсной части, так и API могут потребоваться настраиваемые функции. Однако создание команд бизнес-уровня в Cypress с использованием пользовательских команд затруднено.
Не имеет встроенной поддержки объектной модели страницы (POM). Cypress не поощряет разделение локаторов элементов на другой слой объектов страницы. Следовательно, простое изменение внешнего интерфейса приведет к поломке всех связанных с ним автоматизированных тестов e2e.
Ограниченная поддержка браузеров - в настоящее время Cypress поддерживает только браузеры семейства Chrome (включая Microsoft Edge на базе Electron и Chromium) и Firefox.
Не удается сохранить локальное хранилище - после каждого запуска теста локальное хранилище и файлы cookie очищаются
Поддержка распараллеливания - требуется несколько компьютеров для параллельного выполнения тестов.
Нет встроенных возможностей обработки событий - Нет поддержки загрузки, скачивания файла, клавиши табуляции и т. Д. (Однако это есть в их дорожной карте)

Резюме

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

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

Документация Cypress также очень обширна, что облегчает разработчикам изучение и адаптацию к ней. Он быстро растет, поскольку последний выпуск 5.x поддерживает Shadow DOM, поддержку экспериментальных сетевых заглушек и т. Д. Я чувствую, что будущие выпуски также дадут решения для текущих недостатков инструмента. Поэтому о нем однозначно стоит узнать. Не забудьте также ознакомиться с лучшими практиками использования Cypress.

Дайте мне знать, что вы думаете о тестировании ваших приложений с помощью Cypress. Спасибо за прочтение!

Создавайте отличные дизайнерские системы и микро-интерфейсы

Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.

Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.

Попробуйте →