Всем привет! Тем не менее встретимся со мной еще раз, чтобы поделиться некоторым опытом или мнением о технологиях, связанных с областью разработки программного обеспечения. Сегодня я поделюсь своим опытом автоматизированного сквозного тестирования (E2E) с использованием Cypress для API и Интернета.
Некоторое время назад наш специалист по Frontend Engineer (Буди Пракоса) провел автоматическое тестирование своей функции в веб-приложении. Он очень уникальный человек, которому нравится исследовать что угодно, поэтому мои друзья назвали его профессором, лол! (Прости, Иёк!).
Меня заинтересовала идея, которую он принес нам, и я хочу узнать об этом больше. Фреймворк кипарисовый! Он основан на Javascript! Вы можете найти официальную страницу на https://www.cypress.io/
Узнав о Cypress, я понял, что мы также можем использовать его для E2E Testing API! И что самое интересное, мы можем записывать видео для каждого тестового примера, который мы сделали. Это круто! Потому что наша команда QA иногда делала видеозапись для каждого теста, чтобы подтвердить результат. И что важно, это то, что код Cypress прост для понимания.
Хорошо, приступим к технической части. Я покажу несколько примеров кода Cypress для API и веб-тестирования. На странице Cypress они поддерживают несколько ОС, убедитесь, что вы используете минимальные требования ниже:
- macOS 10.9 и выше (только 64-разрядная версия)
- Linux Ubuntu 12.04 и выше, Fedora 21 и Debian 8 (только 64-разрядная версия)
- Windows 7 и более поздних версий
Если для установки Cypress используется npm, они поддерживают:
- Node.js 8 и выше
После того, как вы выполнили эти требования, приступим к созданию проекта:
cd /your/project/path npm install cypress --save-dev
Попробуйте открыть пользовательский интерфейс cypress с помощью этой команды:
./node_modules/.bin/cypress open
Если вы получите тот же результат, что и на картинке выше, это означает, что вы успешно создали проект Cypress. Есть несколько тестовых примеров по умолчанию, вы можете запустить все спецификации или просто попробовать щелкнуть один из списка тестовых примеров, чтобы увидеть, как работает Cypress. По умолчанию мы должны поместить наш тестовый пример в папку интеграции. Он расположен по адресу:
/your/project/path/cypress/integration
Вы можете изменить расположение тестового примера, но вы должны создать файл JSON в корневом проекте с именем cypress.json, который содержал эту конфигурацию:
{
"integrationFolder": "your/custom/path"
}
Но в этом случае давайте сделаем это по пути по умолчанию!
Мы будем использовать мой простой API для этого тестового примера. Документацию по swagger можно найти по этому адресу: https://momo-book.herokuapp.com/api/documentation
Авторский API для создания данных кажется подходящим для этого раздела. Создайте файл тестового случая для примера с именем api_author.spec.js с кодом Cypress следующим образом:
Звучит легко и читабельно, правда? Мы постараемся разобрать код. Describe в начале будет группа нашего тестового примера. И it будет нашим тестовым примером, и мы можем указать имя для тестового примера. В этом примере мы пишем успешно созданные данные для автора. Const,, возможно, вы уже знакомы с этим типом, если работаете с Javascript. Это просто для определения переменной со значением. Наконец, мы вызываем API с помощью cy.request, заполняем метод, URL, тело, заголовки и подтверждаем результат в соответствии с вашими ожиданиями. Cypress уже обернул функцию ожидания, чтобы результат соответствовал вашим ожиданиям. Подробно какие еще функции вы можете увидеть на их официальной странице. А затем вы можете попробовать перезапустить пользовательский интерфейс и попробовать протестировать свой тестовый пример. Результат будет выглядеть как на рисунке 2 ниже.
Далее мы попробуем протестировать Интернет! Мы воспользуемся моим простым веб-приложением CRUD с этого URL-адреса https://momo-book.herokuapp.com/ и попробуем форму создания данных автора!
Создайте файл тестового случая для примера с именем web_author.spec.js с кодом Cypress следующим образом:
Как и в предыдущем объяснении, давайте просто разберем различные функции. Поскольку это веб-тест, мы устанавливаем поведение пользователя при доступе к веб-приложению. И мы должны понимать, как работает поток.
В этом случае с автором сначала мы должны открыть страницу списка, нажать кнопку добавления, заполнить форму, отправить данные, а затем мы будем перенаправлены в список. Таким образом, приведенный выше код Cypress представляет поток данных, такой как посещение, ожидание, получение с помощью щелчка, получение, с типом, URL-адрес с включением и получение с использованием.
Если вы запустите тестовый пример, результат будет выглядеть как на рисунке 3 ниже.
Наконец, мы закончили с API и веб-тестированием! Вы можете попробовать другие сценарии самостоятельно. Ах, для записи видео вы просто запускаете cypress с помощью этой команды:
./node_modules/.bin/cypress run
И автоматически вы можете найти видео по этому пути:
/your/project/path/cypress/videos
Удивительно, правда !! ?? Полный тестовых примеров для API и Интернета, доступных в моем репозитории github ниже, вы можете проверить это для получения подробной информации!
Надеюсь, вам понравится, и я буду рад, если эта статья будет вам полезна! Удачного автоматизированного тестирования!
Спасибо!
