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

Лучший способ уменьшить количество избыточных тестов - использовать автоматические тесты. Прямо сейчас существует так много программ / инструментов, которые можно использовать в автоматическом тестировании, например, Laravel Dusk, Codeception, Selenium, Katalon и т. Д. Одним из них является Cypress.

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

Установка Cypress

Чтобы использовать кипарис, и если вы уже настроили git на своем локальном компьютере, вы можете установить его в своем git bash или терминале с помощью этой команды

$ npm установить кипарис

или скачать с официального сайта кипариса.

Запустите Cypress

Если процесс установки прошел успешно, вы можете запустить кипарис с помощью этой команды.

./node_modules/.bin/cypress открыть

Окно вашего кипариса будет выглядеть так:

Настройте Cypress.json

Когда вы сможете запустить кипарис на своем компьютере, вы увидите две важные папки: Cypress и Node_modules, например:

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

Основываясь на этой конфигурации, базовый URL для этого проекта - «http: // localhost: 8000 /», а также часть конфигурации, используемой для тестирования. В этом файле вы можете установить любое значение, связанное с вашим автоматическим тестированием.

Начни свой тест

После настройки конфигурации в cypress.json создайте файл в подпапке Интеграция с типом файла JavaScript (.js). В этом случае мы хотели бы создать тест для входа в систему с шагом:

  1. Доступ к странице входа
  2. Введите адрес электронной почты
  3. Введите пароль
  4. Нажмите кнопку входа в систему
  5. Успешный вход в систему

А вот код:

Исходя из кода, это можно объяснить:

  • Контекст («название контекста»)

Context () использовался для выдачи идентичного вашему тесту. Вы можете дать вашему тесту любое имя в зависимости от того, что вам нужно.

  • beforeEach ()

beforeEach () используется для выполнения кода, в то время как условие «it» выполняется системой.

  • cy.visit (‘url name’)

cy.visit используется для доступа к странице на основе имени URL, указанного в параметре.

  • it («название сценария»)

он используется для выполнения сценария вашего теста. Вы можете указать название сценария в параметре «it». Внутри своего «it» вы можете написать свой код, основанный на процессе тестирования вашего сценария.

  • cy.get («компонент»)

cy.get используется для получения компонента на активной странице, пока мы обращаемся с некоторым условием. Если компонент и условие существуют, код выполнит какое-то действие. Например, в этом коде:

cy.get (‘button’). contains (‘Masuk’). click ()

На основе кода это означает, что система должна искать и получать кнопку компонента, имя / значение / текст которой / содержит «Masuk». Если этот компонент существует, система выполнит действие щелчка.

  • cy.wait (интервал)

cy.wait используется для указания интервала времени перед перемещением и выполнением следующего кода. Количество параметров интервала будет выполняться в миллисекундах.

Выполните свой тест

Если ваш код готов, вы можете открыть кипарис и выполнить тест, дважды щелкнув свой код.

Создайте собственную команду

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

Если ваша новая команда готова, вы можете выполнить ее, назвав свое имя команды, как показано в приведенном ниже коде.

Создать команду с параметром

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

А в файле Login.js пользовательская команда Login используется вот так. Но вы должны знать о своем параметре, если у вас есть 2 параметра в вашей пользовательской команде, это означает, что вы также должны указать 2 параметра при вызове своей команды.

Вы можете использовать свое значение в своем json, вызвав значение с помощью Cypress.config (‘value’). На основе приведенного ниже кода Cypress.config (‘baseurl’) используется для получения значения baseUrl и будет выполняться с помощью команды visit. Cypress.config (‘emailLogin’) используется для получения значения emailLogin и Cypress.config (‘passLogin’) используется для получения значения passLogin. Те значения, которые используются в параметре команды Login.

Заключительное слово

Автоматизированный тест с Cypress используется для теста E2E. Вы можете создать свой тест, создав файл с расширением Javascript (.js). В Cypress вы можете создавать собственные команды, используя параметр или нет.

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

Так чего же ты ждешь? Давайте писать код на Cypress!

использованная литература

  1. Https://docs.cypress.io/guides/references/configuration.html#Options
  2. Https://docs.cypress.io/api/commands/wait.html#Syntax
  3. Https://docs.cypress.io/guides/references/best-practices.html

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