Жизненный цикл тестирования программного обеспечения иногда становится двойной нагрузкой, когда мы все еще выполняем его с помощью ручного тестирования, потому что мы должны тестировать некоторые функции с тем же способом и с теми же данными, или иногда мы забываем с некоторыми этапами / потоком тестирования.
Лучший способ уменьшить количество избыточных тестов - использовать автоматические тесты. Прямо сейчас существует так много программ / инструментов, которые можно использовать в автоматическом тестировании, например, 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). В этом случае мы хотели бы создать тест для входа в систему с шагом:
- Доступ к странице входа
- Введите адрес электронной почты
- Введите пароль
- Нажмите кнопку входа в систему
- Успешный вход в систему
А вот код:
Исходя из кода, это можно объяснить:
- Контекст («название контекста»)
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!
использованная литература
- Https://docs.cypress.io/guides/references/configuration.html#Options
- Https://docs.cypress.io/api/commands/wait.html#Syntax
- Https://docs.cypress.io/guides/references/best-practices.html
Спасибо за ваше участие в моей статье, ваши предложения и комментарии очень ценны для меня.