Внешняя веб-разработка быстро развивалась за последнее десятилетие, что привело к тому, что одностраничные приложения стали стандартом для обслуживания веб-приложений для конечного пользователя. В результате фреймворки JavaScript, такие как Angular и React, приобрели огромную популярность для разработки клиентских веб-приложений. Большая часть ресурсоемких вычислений и сложных логических реализаций переместилась из серверной части в браузер, что привело к растущей потребности в интеграционных тестах для наших приложений.
В прошлом QA-инженеры выполняли роль тестирования недавно реализованных внешних функций, вручную тестируя приложение в браузере, и если все работало, функция принималась и была готова к отправке в производство. Для небольшого приложения это может показаться достаточным решением, однако по мере роста приложения такой подход к тестированию плохо масштабируется. Представьте себе приложение среднего или большого размера, в котором несколько разработчиков работают над несколькими различными функциями. Прежде чем новая разработанная функция будет отправлена в производственную среду, очень важно убедиться, что она не нарушает какие-либо ранее существовавшие функции приложения. Вручную тестировать все функции, чтобы гарантировать, что ни одна из них не будет затронута каждый раз, когда внедряется новая функция, практически невозможно, не говоря уже о том, что она подвержена человеческим ошибкам.
Как мы решаем эту проблему? Cypress.io — фреймворк сквозного тестирования — это новый стандарт в интерфейсном тестировании, который нужен каждому разработчику и QA-инженеру. Возможно, вы слышали о других решениях для сквозного тестирования, особенно о Selenium, который является одним из самых популярных фреймворков в последние годы. Тем не менее, разработчики часто уклонялись от написания тестов с использованием Selenium из-за сложности его настройки, не говоря уже о написании тестов. Одна из основных целей Cypress — обеспечить простоту настройки, написания, запуска и отладки тестов.
Итак, давайте начнем и напишем наш первый тест с использованием Cypress!
Примечание. Поскольку цель этой записи в блоге — научить вас понимать Cypress, я не буду вдаваться в подробности того, как я настроил пример приложения. Вы можете получить исходный код из моего репозитория на GitHub. Как только вы получите общее представление о том, как работает Cypress, вы сможете использовать его для написания тестов для своих собственных приложений.
Приложение, которое мы будем тестировать, представляет собой простое приложение прогноза погоды, которое получает информацию о погоде для определенного города. Для простоты я создал mock API с использованием json-сервера с фиксированной базой данных из трех городов. Данные о погоде получены из OpenWeatherAPI. Все приложение написано на React.
Настройка приложения
Примечание. Чтобы следовать этому руководству, вам необходимо установить Node.js. Скачать последнюю стабильную версию можно здесь.
# Clone the github repo to your local machine git clone https://github.com/DennisDurairaj/react-weather-cypress.git # Switch to the app directory cd react-weather-cypress # Install npm dependencies npm install
После того, как вы выполните описанные выше шаги, откройте его в редакторе кода, и вы должны увидеть структуру папок, как показано ниже — мой предпочтительный редактор кода — Visual Studio Code.
Краткое объяснение файлов, которые имеют отношение к нам -
- index.js — это точка входа нашего приложения React.
- App.js — компонент-контейнер для нашего приложения. Это компонент, отображаемый файлом index.js.
- db.json — используется json-server для имитации внутреннего сервера API, который содержит информацию о погоде для трех городов.
- api.js — файл, в котором находятся вызовы нашего API.
- package.json — содержит список зависимостей нашего приложения и различные сценарии, которые можно запустить для нашего приложения.
Давайте запустим приложение, чтобы убедиться, что оно работает правильно. В вашем терминале выполните следующую команду —
Если вы посмотрите на конфигурацию скриптов в файле package.json, то увидите, что эта команда запускает две другие команды — npm run mockAPI и react-scripts start. npm run mockAPI, как следует из названия, запускает наш фиктивный внутренний сервер API на порту 3050. react-scripts start запускает наше приложение прогноза погоды на порту 3000.
Как только приложение загрузится в браузере, вы должны увидеть домашнюю страницу, которая выглядит так:
Очень минималистичный. Для простоты приложение поддерживает получение информации только для трех предопределенных городов внутри нашего файла db.json. Лондон, Париж и Амстердам.
При запросе любого другого города отображается сообщение о том, что город не найден в базе данных.
Итак, мы настроили и запустили наше приложение, теперь как его протестировать? Давайте начнем с настройки Cypress, чтобы мы могли начать писать наши тесты автоматизации.
Системные Требования
Cypress — это настольное приложение, которое устанавливается на ваш компьютер. Настольное приложение поддерживает следующие операционные системы:
- macOS 10.9 и выше (только 64-разрядная версия)
- Linux Ubuntu 12.04 и выше, Fedora 21 и Debian 8 (только 64-разрядная версия)
- Windows 7 и выше
Давайте установим cypress для нашего приложения в качестве dev-зависимости -
npm install cypress --save-dev
Вот и все, Cypress теперь установлен и готов к использованию! Легкий.
Прежде чем мы напишем наши тесты, нам нужно решить, каковы спецификации для теста. Если вы знакомы с методологией Agile, история пользователя имеет следующий формат: Как пользователь я хочу выполнитьдействие, которое дает определенный результат.
Это может послужить хорошей основой для построения сквозных тестов. Тест должен имитировать действие, которое должен выполнить пользователь, и утверждать, что состояние приложения после действия соответствует ожидаемому результату.
Как правило, большинство интерфейсных тестов можно разбить на следующие этапы:
- Посетите URL-адрес приложения
- Запрос элемента на странице, это может быть поле ввода, ссылка, кнопка и т. д.
- Взаимодействуйте с элементом, например. введите текст в поле ввода, нажмите кнопку и т. д.
- Убедитесь, что новое состояние приложения соответствует ожидаемому
Имея это в виду, давайте проанализируем наше приложение и перечислим все сценарии, в которых пользователь может взаимодействовать с нашим приложением. В нашем приложении есть две функции:
- Пользователь вводит название города во входные данные, и если город присутствует в базе данных, он возвращает погоду для этого города.
- Пользователь вводит название города, которого нет в базе данных, в результате чего на экране отображается сообщение «Город не найден в базе данных».
Теперь, когда у нас есть сценарии, давайте напишем наш первый тест!
Создайте папку, в которой будут находиться все наши тесты Cypress -
mkdir cypress && cd cypress mkdir integration && cd integration
Наши тесты Cypress будут жить в папке /integration.
Для запуска Cypress требуется файл конфигурации cypress.json в корне каталога приложения, так что давайте добавим его. На данный момент наш файл cypress.json возвращает пустой объект с настройками по умолчанию.
Тестовый сценарий 1
Когда пользователь заходит в приложение и вводит в поле поиска допустимое название города, он должен увидеть информацию о погоде для этого города.
Внутри папки /integration давайте создадим новый файл с именем weather_search.spec.js.
Сравнивая с шагами, которые мы определили ранее, давайте пройдем вышеуказанный тест и посмотрим, насколько он соответствует.
- Строка 3: посетите URL-адрес приложения.
- Строка 4: Запросить элемент на странице, взаимодействовать с ним (вводить)
- Строка 5: Запросите элемент на странице, взаимодействуйте с ним (щелкайте)
- Строка 6: проверьте, соответствует ли новое состояние приложения ожидаемому.
Вы могли заметить, что мы говорим Cypress получить элемент с атрибутом [data-cy='attributeName']. Если вы посмотрите на наш файл App.js, вы увидите, что наши элементы селектора имеют атрибуты data-cy. Считается лучшей практикой использовать атрибуты data-*, чтобы предоставить контекст нашим селекторам и изолировать их от изменений CSS или JS. Вы можете прочитать больше об этом здесь".
В наш файл package.json добавим два скрипта для запуска наших тестов.
e2e-test- запускает наши тесты в безголовом режимеcypress:open- запускает наши тесты внутри браузера
Запустим тест. В терминале запустите npm run e2e-test. Cypress просматривает папку /integration и запускает все тесты внутри папки. Пока у нас есть один файл weather_search.spec.js
Как видите, Cypress провел наш тест, и он прошел успешно.
Однако есть и другой способ запустить наши тесты. Их можно запускать внутри пользовательского интерфейса, который запускает браузер, чтобы получить представление о тестируемом приложении в режиме реального времени.
Если вы запустите скрипт npm run cypress:open, откроется пользовательский интерфейс Cypress —
Нажмите «Выполнить все спецификации» или название конкретной спецификации, чтобы открыть тестовый браузер, в нашем случае у нас есть один тест с именем weather_search.spec.js.
Слева вы можете просмотреть все тесты, которые прошли или не прошли в вашем наборе тестов. В то время как справа вы можете просматривать состояние приложения, когда Cypress выполняет каждый из наших тестов.
С помощью этого теста мы смогли утверждать, что когда пользователь ищет действительный город, ожидаемый результат отображается на экране.
Тестовый сценарий 2
Когда пользователь заходит в приложение и вводит в поле поиска недопустимое название города, пользователь должен увидеть сообщение "Город отсутствует в базе данных"
Давайте создадим еще один тестовый файл внутри нашей папки cypress/integration, назовем его weather_search_invalid.spec.js
Как только мы его сохраним, новый тест автоматически появится в нашем наборе тестов пользовательского интерфейса Cypress.
И когда вы запустите тест, вы должны увидеть, что он проходит -
И вот как легко начать писать тесты для ваших интерфейсных приложений!
Вывод
Вы видели, как Cypress упрощает процесс написания тестов для наших приложений, упрощая их реализацию как для разработчиков, так и для QA-инженеров. Мы едва изучили мощь Cypress и некоторые из предоставляемых им функций.
Например, Cypress делает снимки и видео процесса тестирования, создает заглушки для имитации ответов API, хуки для запуска до и после наших тестов для очистки состояния нашего приложения и т. д.
Хорошо написанные сквозные тесты могут сэкономить часы разработки и помочь обнаружить неожиданные ошибки, возникающие в рабочей среде. Вы можете начать свое путешествие с Cypress, изучая документацию, пока не почувствуете себя достаточно комфортно, чтобы начать писать собственные тесты.
Первоначально опубликовано на https://programmerden.com 13 февраля 2020 г.
