Кипарис

Это инструмент автоматизации тестирования, похожий на Selenium WebDriver, WebDriverIO, TestCafe и другие.

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

1. Настройте тесты

2. Скрипт тестов

3. Пробный запуск

4. Отладка тестов.

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

  1. Модульное тестирование

2. Интеграционное тестирование

3. Сквозное тестирование

Почему этот инструмент вызывает такой интерес?

1. Cypress также является инструментом автоматизации тестирования с открытым исходным кодом для тестирования веб-приложений.

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

3. Cypress помогает разработчикам и тестировщикам создавать сценарии веб-автоматизации с использованием JavaScript.

Архитектура

Инструменты автоматизации, такие как Selenium, работают вне браузера. Однако у Cypress другая архитектура. Он работает в браузере. Cypress базируется на сервере — Node.js.

Существует постоянное взаимодействие Cypress с Node.js, и они работают в координации друг с другом. В результате Cypress можно использовать для тестирования как внешнего, так и внутреннего интерфейса приложения.

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

Причины использовать кипарис

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

2. Cypress имеет функцию захвата скриншота во время выполнения теста. Он также может записывать видео набора тестов, если он запускается из интерфейса командной строки.

3. В разделе «Инструменты разработчика» предоставляется опция отладки, которая помогает разработчикам быстро и легко отлаживать.

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

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

6. Cypress можно использовать с инструментами CI [Continues Integration tools-Jenkins].

7. С помощью функции изменения размера окна просмотра Cypress может проверить скорость отклика веб-страницы.

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

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

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

Преимущества кипариса

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

2. Не нужно добавлять явные или неявные команды ожидания в тестовые скрипты, в отличие от Selenium. Cypress автоматически ожидает команд и утверждений.

3. Разработчики или тестировщики могут использовать шпионы, заглушки и часы для проверки и контроля поведения ответов сервера, функций или таймеров.

4. Автоматическая операция прокрутки гарантирует, что элемент находится в поле зрения, прежде чем выполнять какое-либо действие (например, нажатие кнопки).

5. Ранее Cypress поддерживал только тестирование Chrome. Однако с недавними обновлениями Cypress теперь обеспечивает поддержку браузеров Firefox и Edge.

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

7. У Cypress отличная документация.

Ограничения Кипариса

  1. Нельзя использовать Cypress для управления двумя браузерами одновременно

2. Не поддерживает мульти-табы

3. Cypress поддерживает только JavaScript для создания тестовых случаев.

4. Cypress больше не поддерживает такие браузеры, как Safari и IE.

5. Ограниченная поддержка iFrames

Настройка среды Cypress

Для настройки среды Cypress выполните следующие действия.

Шаг 1. Установите node.js

перейдите по ссылке: https://nodejs.org/ru/download/

Экран, который появится, приведен ниже.

Должны быть установщики как для Windows, так и для macOS. Мы должны получить пакет в соответствии с локальной операционной системой.

Для 64-разрядной конфигурации Windows появляется следующее всплывающее окно для сохранения установщика.

После завершения установки в Program Files создается файл NodeJS. Следует отметить путь к этому файлу. Затем введите путь в переменных среды.

Как только путь к файлу node.js установлен.

Вы можете проверить версию узла и версию npm в командной строке.

Далее нам понадобится редактор JavaScript для написания кода для Cypress.

Шаг 2. Установите код Visual Studio

Перейдите по ссылке для загрузки кода Visual Studio — https://code.visualstudio.com/download

Оттуда вы можете выбрать пакет в зависимости от операционной системы.

После загрузки исполняемого файла и выполнения всех шагов установки запускается код Visual Studio.

Шаг 3. Создайте новую папку для проекта Cypress Automation

мы создадим пустую папку (скажем, кипарис) в любом желаемом месте.

Шаг 4. Откройте папку в коде Visual Studio

Выберите опцию «Открыть папку» в меню «Файл». Затем добавьте папку Cypress (которую мы создали ранее) в Visual Studio Code.

Шаг 5. Откройте терминал кода VS и выполните команду npm init -y.

Эта команда является инициализацией и используется для создания файла package.json для интерфейса вашего проекта. Файл package.json — это файл, содержащий информацию о пакетах и ​​зависимостях проекта. Он также содержит метаданные для проекта, такие как номер версии, автор и описание.

После этого в папке проекта создается файл package.json с предоставленной нами информацией.

В package.json вы можете дать описание, например, Мой первый кипарисовый проект.

Шаг 6. Установите Cypress npm install cypress

Это установит Cypress локально как зависимость от разработчиков для вашего проекта. Во время установки мы можем игнорировать все предупреждения и уведомления, которые мы получаем. После успешной установки мы можем увидеть папку модулей узла и создаваемый файл package-lock.json.

Шаг 7. Вы можете проверить версию cypress с помощью команды npx cypress -v или npx cypress -version

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

Шаг 8. Откройте cypress с помощью npx cypress open

Эта команда откроет окно кипариса. Cypress автоматически найдет и позволит вам использовать браузеры, установленные в вашей системе. Если он найден, указанный браузер будет добавлен в список доступных браузеров в приложении Cypress.

С помощью кипарисового окна мы можем запускать скрипты.

Если у вас возникнут проблемы после использования команды npx cypress open. Используйте эту команду npx cypress verify, а затем используйте npx cypress open

Вы можете увидеть структуру проекта.

Структура папки Cypress:

После установки Cypress создаст для вас рекомендуемую структуру папок. Есть четыре важных папки:

1. Приспособления

2. Интеграция

3. Плагины

4. Поддержка

1. Папка с приборами Cypress

Мы используем эту папку для хранения объектов данных или внешних фрагментов статических данных, которые мы используем во время тестов; обычно вы будете использовать их с командой cy.fixture. Обычно данные хранятся в формате JSON.

Фикстуры — здесь хранятся тестовые данные в виде пар ключ-значение для тестов.

2. Папка интеграции Cypress

Следующая папка — интеграция; Это основная папка для хранения всех ваших тестов. Мы добавляем сюда базовый, сквозной тест, визуальный или огуречный тест. Все ваши файлы спецификаций будут здесь. Тестовый файл может быть записан как .js, .jsx, .coffee и .cjsx.

Ранее мы выполнили скрипт из папки с этим примером; Из папки с примерами вы можете обращаться к различным командам Cypress; это будет чрезвычайно полезно во время разработки нашего сценария.

Интеграция — здесь хранятся тестовые примеры для платформы.

3. Папка плагинов Cypress

У него есть собственный файл index.js. Поместите сюда код вашего пользовательского плагина. Вы можете найти различные плагины на сайте cypress.io. Файл плагина — это особый файл, который выполняется в Node перед загрузкой проекта, перед запуском браузера и во время выполнения теста.

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

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

Плагины — здесь хранятся события Cypress (предыдущие и последующие события, которые должны выполняться для теста).

4. Папка поддержки Cypress

В папке поддержки есть два файла: commands.js и index.js.

1.command.js: это файл, в который вы добавляете часто используемые функции и пользовательские команды. Он включает в себя функции, которые вы можете вызывать для использования в различных тестах, например, функцию входа в систему. Cypress создал для вас некоторые функции, и вы можете переопределить их здесь, если хотите.

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

Cypress рекомендует указанную выше папку. Однако вы можете изменить конфигурацию папки в файле конфигурации. cypress.json — основной файл конфигурации; здесь вы можете переопределить различные настройки по умолчанию для Cypress.

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

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

узловые модули — в этой папке хранятся зависимости проекта от npm. Это сердце реализации проекта Cypress.

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

package.json — в этой папке хранятся зависимости и сценарии для проектов.

Первый тест:

Cypress принял синтаксис Mocha для разработки тестовых случаев и использует все основные инструменты, которые предоставляет Mocha. Ниже приведены некоторые из основных конструкций, которые мы в основном используем при разработке тестов Cypress:

Основные команды:

1- cy.visit(): для перехода на определенный веб-сайт.

2 - cy.contains(): чтобы получить элемент dom, содержащий текст

3 - cy.log(): для отображения журналов консоли cypress во время выполнения.

4 - cy.get(): получить элемент dom в кипарисе

5 - cy.url(): получить текущий URL

6 — описать(): это просто способ сгруппировать наши тесты. Он принимает два аргумента, первый — это имя тестовой группы, а второй — функция обратного вызова.

7 — context(): это просто псевдоним для описания().

8 - it(): мы используем его для отдельного теста. Он принимает два аргумента, строку, объясняющую, что должен делать тест, и функцию обратного вызова, которая содержит наш фактический тест.

9 – .type(): введите элемент DOM.

10 - before(): выполняется один раз перед всеми тестами в блоке.

11 — after(): выполняется один раз после всех тестов в блоке.

12 — beforeEach(): запускается перед каждым тестом в блоке.

13 — afterEach(): запускается после каждого теста в блоке.

14 – cy.only(): чтобы запустить определенный пакет или тест, добавьте «. только» к функции.

15 – cy.skip(): чтобы пропустить указанный набор или тест, добавьте «. skip()» к функции.

Вы можете написать тест в папке Integration

Сначала добавьте новый файл с именем "FirstTest.js" в папку "advanced-examples", щелкнув папку правой кнопкой мыши и выбрав вариант " Новый файл»:

Выполнение теста:

После того, как вы откроете Cypress с помощью команды npx cypress open в терминале, откроется окно Test Runner, в котором будет показан тестовый пример «FirstTest.js», как показано ниже.

Cypress Test Runner пытается найти все совместимые браузеры на компьютере пользователя. Раскрывающийся список для выбора другого браузера находится в правом верхнем углу Test Runner.

Теперь, чтобы запустить тестовый пример, который мы создали в нашем предыдущем руководстве, который был FirstTest.js, просто щелкните тестовый пример в окне запуска, как показано на снимке экрана выше, он откроет браузер и выполнит все шаги в тестовом примере. Вы увидите экран ниже, показывающий выполнение тестового примера:

Второй тест:

Сценарий написан Положительный тестовый кейс с заполнением всех деталей в контакте с нами.

Ниже приведен вывод тестового скрипта, заполняющего все детали в контакте с нами.

Третий тестовый пример:

Скрипт пишется Negative Test Case без заполнения поля email в контактах.

Ниже приведен вывод тестового сценария без заполнения поля электронной почты в контакте с нами.

Вывод:

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

Спасибо, и я надеюсь, что эта статья поможет вам.