Тестирование программного обеспечения играет решающую роль в процессе разработки программного обеспечения. Мне нравится эта цитата великого Аристотеля, которая применима к нам, в современном мире, как разработчикам программного обеспечения.

«Качество - это не действие, это привычка» - Аристотель

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

Что такое сквозные тесты?

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

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

У хороших автоматизированных сквозных тестов много преимуществ. Некоторые из них перечислены ниже:

  • Выявляет ошибку на ранней стадии
  • Экономит часы, потраченные на ручное тестирование
  • Качественное программное обеспечение

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

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

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

Преимущества Cypress:

  • Быстрее
  • Легкая установка
  • Легко писать и запускать тесты
  • В целом, для команд разработчиков дешевле писать сквозные тесты.

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

Установите и запустите Cypress Tests

Установить и начать работу с Cypress довольно просто. Чтобы Cypress был интегрирован в ваш проект, вы можете установить его, используя команду ниже. Вы можете использовать Cypress с любым из ваших фронтенд-проектов, это может быть React, Angular, Vue или просто JavaScript. В зависимости от того, используете ли вы npm или yarn, вы можете использовать любую команду для установки.

npm install cypress --save-dev

or

yarn add cypress --dev

В VS Code есть замечательный плагин для Cypress под названием Cypress Snippets. Обязательно установите его, и он может предоставить фрагменты кода для вашего кода Cypress в VS Code.

По умолчанию, если вы интегрируете Cypress в существующий проект, он создает подпапки в основной папке cypress . Структура папок показана на рисунке ниже с папками для устройств, интеграции, плагинов и поддержки.

В папку интеграции вы добавите свои тестовые файлы Cypress.

Написание своего первого теста

В папке интеграции создайте новый тестовый файл с расширением .js. Назовем его first_spec.js. Я собираюсь написать простой тест, чтобы убедиться, что клиент работает по определенному URL-адресу. Допустим, ваше веб-приложение работает по адресу http: localhost: 4100. Мы собираемся написать быстрый тест, чтобы убедиться, что приложение действительно загружается по этому URL-адресу.

/// <reference types="Cypress"/>
describe ('My First Test Suite', () => {
    it('test url works', () => {
        cy.visit('http://localhost:4100')
    });
})

Мы можем включить IntelliSense в VS Code, используя первую строку во фрагменте кода выше. Это заставляет нашу IDE предоставлять интеллектуальные предложения кода. Обратите внимание, что в тесте используются такие ключевые слова, как description и it. Возможно, они вам знакомы по другим средам тестирования. Они взяты из Mocha, еще одного популярного фреймворка для тестирования.

Мы используем команду Cypress visit для посещения заданного URL. Cypress поставляется с множеством команд, которые облегчат вам тестирование вашего приложения. Все команды Cypress начинаются с cy., за которым следует имя команды. Команда visit принимает в качестве аргумента URL-адрес.

Наш тестовый файл готов, пора его запускать.

Запуск вашего теста

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

npm run cypress:open

Эта команда открывает средство запуска тестов, как показано ниже:

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

Вы заметите, насколько быстро выполняется тест Cypress, а также сможете увидеть, как Cypress взаимодействует с приложением, как это делает настоящий пользователь. Слева вы можете видеть выполняющиеся тесты и отображать каждую команду и утверждение, а справа вы можете видеть, что браузер открывается и запускает приложение. Cypress посещает URL-адрес localhost: 4100, и веб-приложение запускается локально. Это означает, что наш начальный сквозной тест пройден! Ура!

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

Следующие шаги

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

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



Cypress: Сквозное тестирование JavaScript
В этом курсе вы узнаете, как тестирование Cypress может стать фреймворком для сквозного тестирования вашего веб-приложения. Вы… app.pluralsight.com



Другие ресурсы:

Https://www.cypress.io/

Надеюсь, вам понравилась эта статья. Если вам понравился этот пост, не забудьте поделиться им со своей сетью. Вы можете подписаться на меня в Twitter @AdhithiRavi или на adhithiravi.medium.com, чтобы получать от меня обновления.

Эта статья изначально была опубликована на https://programmingwithmosh.com/