«Думаю, вы согласитесь со мной, когда я скажу… Проверяйте свой код, а не свое терпение»

Итак, я имею в виду, что мы живем в эпоху, когда Интернет стремительно развивается с развертыванием веб-сайтов на основе angular.js, react.js, Vue.js и p5.js. Приложения. Эти современные веб-приложения отзывчивы, коммуникативны (с использованием кошачьих ботов) и построены на основе материального дизайна.

Мы, инженеры по автоматизации программного обеспечения, традиционно придерживаемся подхода, начатого десять лет назад. Да, вы поняли! Я говорю о селене. Кроме того, десять лет назад Интернет был не таким, как сегодня.

С тех пор Интернет сильно изменился, поэтому и тестирование тоже должно!

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

Проблемы современного веб-тестирования -

  • Работа с вызовами XHR и веб-сервисами
  • Короткие спринты развертывания и много времени, затрачиваемого на тестирование
  • Безопасность данных
  • Очень дорого в обслуживании из-за отсутствия инфраструктуры для тестирования
  • Динамическое поведение приложения благодаря современным фреймворкам разработки
  • Еще многое предстоит сделать в будущем….

Это некоторые проблемы, связанные с селеном. Selenium уже десять лет играет важную роль в тестировании веб-приложений E2E. Но современная сеть сегодня изменилась, и чтобы преодолеть эти недостатки, здесь изображен селеновый кипарис.

Почему Кипарис?

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

Cypress также использует Chai, библиотеку утверждений BDD / TDD для node и браузер, который можно прекрасно сочетать с любой средой тестирования JavaScript.

Итак, разработчик Cypress.io Брайан Манн с помощью опроса собрал данные о проблемах тестирования и устранил большинство недостатков, разработав Cypress. Хотя у Cypress много полезных преимуществ, я хочу выделить только те, которые мне нравятся.

Автоматическое ожидание - Cypress автоматически ожидает - загрузка модели DOM, отображение элемента, завершение анимации, завершение вызовов XHR и AJAX и многое другое. . Следовательно, нет необходимости определять неявное и явное ожидание.

Перезагрузки в реальном времени - Cypress достаточно умен, чтобы знать, что после сохранения вашего тестового файла (файл xyz_spec.js) вы собираетесь запустить его снова. Таким образом, cypress автоматически запускает запуск рядом с вашим браузером, как только вы нажимаете CTRL+S, чтобы сохранить файл. Следовательно, нет необходимости запускать запуск вручную.

Возможность отладки - Cypress дает вам возможность напрямую отлаживать тестируемое приложение из Chrome Dev-tools. Он не только дает вам прямую сообщения об ошибках, но также подскажет, как к ним подойти.

Это еще несколько преимуществ кипарисовика -

Что отличает Cypress от других?

Архитектура. Большинство инструментов тестирования работают вне браузера и выполняют удаленные команды по сети. Cypress - полная противоположность. Cypress выполняется в том же цикле выполнения, что и ваше приложение.

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

Новый вид тестирования - Полный контроль над вашим приложением, сетевым трафиком и собственным доступом к каждому объекту хоста открывает новый способ тестирования, который раньше был невозможен. Вместо того, чтобы быть «заблокированным» для вашего приложения и не иметь возможности легко им управлять - Cypress вместо этого позволяет вам изменять любой аспект работы вашего приложения.

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

Ярлыки - Cypress предотвращает необходимость всегда «действовать как пользователь» для создания состояния данной ситуации. Это означает, что вам не нужно посещать страницу входа в систему, вводить имя пользователя и пароль и ждать загрузки страницы и / или перенаправления для каждого запускаемого вами теста. Cypress дает вам возможность использовать ярлыки и программно входить в систему.

Установка Cypress

Установка кипариса - довольно простая задача. Единственное, что вам нужно, это установить на вашем компьютере node.js, а затем все о двух командах npm -

1. npm init

2. npm install cypress --save-dev

Первая команда создаст файл package.json, а вторая команда установит cypress как массив devDependencies в файл дескриптора вашего пакета (package.json).

Установка Cypress займет от 2 до 3 минут в зависимости от скорости вашей сети

Cypress установлен в ваш ./node_modules каталог. После того, как вы закончите установку, вы впервые откроете cypress, выполнив эту команду в том месте, где у вас есть файл package.json -

./node_modules/.bin/cypress open

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

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

Мы храним наши тестовые данные в формате json внутри папки fixture и записываем тест внутри папки integration, следуя тому же соглашению об именах. Любая настраиваемая команда попадет в папку поддержки.

Написание своего первого теста

Давайте создадим новый файл kitchensink_spec.js в папке cypress/integration. Откройте свою любимую среду IDE и добавьте приведенный ниже код в наш kitchensink_spec.js тестовый файл.

Пояснение к коду -

Строка 7 создает набор тестов с названием «Мой первый тест». Строка 10 создает функцию, которая запускается перед каждым тестом. Строка 12 с простой командой cy.visit, передающей URL-адрес, который мы хотим посетить. В строке 16 мы фактически пишем тест с именем «Visits the Kitchen Sink», а внутри него, в строке 19, мы сначала делаем утверждение, а затем, если DOM содержит слово type в UI, оно запускает для него событие щелчка.

В строке 22 мы проверяем, что после нажатия новый URL-адрес должен содержать /commands/cations.. Наконец, в строках с 25 по 27 мы сначала находим элемент по имени его класса, набираем в нем [email protected] и, наконец, проверяем, что введено правильное значение.

Чтобы просмотреть короткое видео с кодом, нажмите здесь.

Вывод -

Вот это да!! Приложению потребовалось всего 7,89 секунды для загрузки, ввода значения и проверки утверждения. Это невероятно!!

используя кипарис, мы можем автоматически перемещаться в прошлое, просто наведя курсор на событие в нашем тестируемом приложении таким образом, чтобы он перенес вас в тот момент, когда приложение находилось во время срабатывания события. Но когда мы наводим курсор на CONTAINS, Cypress возвращается к URL-адресу, который присутствовал при создании нашего снимка.

Обратите внимание, что есть также забавно выглядящий Журнал с названием: (PAGE LOAD), за которым следует другая запись для (NEW URL). Ни одна из этих команд не была введена нами. Cypress сам будет отключать важные события из вашего приложения, когда они происходят.

Как вы можете видеть, это вид консоли внизу изображения (рис. 1.4), где вы можете найти всю информацию о событии, такую ​​как команда, селектор, значение, согласованные элементы и результат.

Поздравляем !!! Вы протестировали свое приложение на Cypress.

Заключение

Следовательно, мы могли бы подумать о смене нашей тактики и использовании Cypress в качестве основного инструмента E2E. Он работает так, как ожидалось, и делает нашу жизнь намного проще.

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

В любом случае попробуйте Cypress.

Чтобы узнать больше о кипарисовике, перейдите по ссылкам ниже -

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

Если вам понравилась эта история, нажмите кнопку 👏 и поделитесь ею, чтобы помочь другим найти ее! Не стесняйтесь, чтобы оставить комментарий ниже.

Сказать привет в Твиттере

Спасибо за интерес.

Привет! Меня зовут Шивам Бхарадвадж. Я инженер по автоматизации тестирования программного обеспечения в Thales Group, в настоящее время живу в Нойде, Индия. Я очень увлечен новыми инструментами и технологиями в области тестирования / разработки программного обеспечения. В свободное время я люблю играть в видеоигры ». - Шивам Бхарадвадж