Добро пожаловать в мою серию статей о Веб-тестировании с использованием Selenium Webdriver. После рассмотрения некоторых базовых, а затем немного более сложных примеров в предыдущих частях, пришло время посмотреть, как можно использовать Selenium в сочетании с языком JavaScript благодаря движку Node.JS и фреймворку Mocha.

Я пройдусь по первоначальной настройке среды, поскольку она сильно отличается от той, что была у нас, когда мы использовали Java и Maven. Затем я продемонстрирую тест, который можно довольно просто написать, используя простой старый JavaScript, а затем немного более сложный, но бесконечно более мощный, с помощью фреймворка Mocha.

Настройка Selenium с помощью JavaScript и Node.JS

Во-первых, если у вас нет среды разработки, ориентированной на Интернет, вам необходимо установить некоторые основные инструменты:

  • Node.JS - движок, позволяющий запускать JavaScript-приложения без браузера. Он поставляется вместе с npm, также известным как диспетчер пакетов узлов (подумайте о нем как о чем-то вроде Maven, если вы работаете с Java). Npm позволяет нам устанавливать другие пакеты, включая сам Selenium.
  • IDE - я рекомендую отличный Visual Studio Code.

После этого создайте новую папку для ваших файлов. Теперь пришло время взаимодействовать с Node путем инициализации проекта: сделайте это, открыв новую командную строку / окно терминала в этой папке и набрав npm init

Затем Node проведет вас через создание файла package.json, который похож на pom.xml от Maven. Он содержит такую ​​информацию, как название вашего проекта, версия, описание и многое другое. Если вы не знаете, что писать для каждого запроса, просто нажмите Enter, чтобы продолжить.

После того, как вы начали проект, пора установить Selenium и фреймворк Mocha. Подобно тому, как у Maven были репозитории, из которых вы могли загружать библиотеки для использования в ваших проектах Java, Node.JS использует npm для достижения этой цели, хотя и с одним репозиторием. Вы можете просмотреть все возможные пакеты в Интернете и получить более подробные сведения об их использовании.

Чтобы получить Selenium, просто откройте командную строку / терминал в папке проекта и введите npm install selenium-webdriver

Эта команда сообщает npm об установке пакета с именем selenium-webdriver, который можно просмотреть в Интернете здесь. На этой странице вы также можете получить ссылки для загрузки фактических драйверов, которые Selenium использует для управления различными браузерами.

Рекомендую скачать те, которые вам интересны (например, Chrome и Firefox). Сохраните их в отдельной папке в отдельных каталогах, а затем добавьте эти папки в системный PATH. Как только это будет сделано, Selenium сможет запустить браузер, который вы ему укажете, используя эти исполняемые файлы.

Еще один пакет, который нам нужно установить, - это Mocha. Думайте об этом как о аналоге TestNG из мира Java. Он позволяет использовать различные функции, которые уже присутствуют в пакете selenium-webdriver. Сделайте это, набрав в командной строке / терминале npm install mocha

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

После того, как вы установили все вышеперечисленное, самое время написать тест.

Запустите свою IDE, в моем случае Visual Studio Code, и перейдите к File > Open Folder. Затем выберите папку с вашим проектом. Имейте в виду, что Node.JS уже создал несколько файлов и папок во время инициализации. Создайте новый под названием simpleTest.js

В этом тесте мы проделаем следующие шаги:

  • Запустите браузер с помощью Webdriver
  • Доступ к странице, в данном случае к моему портфолио
  • Найдите ссылку, в данном случае мой первый проект в портфолио
  • Нажмите здесь
  • Убедитесь, что заголовок новой страницы совпадает с ожидаемым.
  • Закройте браузер

Чтобы запустить тест, сохраните файл и нажмите кнопку воспроизведения в правом верхнем углу Visual Studio Code или нажмите Ctrl + Alt + N. Должна появиться консоль вывода и, если повезет, запустить тест. Кроме того, вы можете открыть командную строку / терминал в своей папке и ввести команду: node simpleTest.js

Как видите, этот тест очень похож на тест, написанный на Java, с той лишь разницей, что большие отличия связаны с созданием экземпляра драйвера. Вам нужно инициировать несколько констант, чтобы потребовать пакет selenium-webdriver, чтобы получить доступ к их фактическим функциям и функциям.

Добавление мокко в микс

Конечно, как мы видели в предыдущих статьях, мы можем расширить наши тесты Selenium с помощью таких инструментов, как TestNG. То же самое и с версией JavaScript, только сейчас мы используем фреймворк Mocha.

Чтобы использовать его, как и Selenium, нам нужно установить его с помощью npm, как упоминалось выше. В отличие от TestNG, Mocha имеет гораздо более глубокую интеграцию с Selenium, поскольку большая часть его функций уже присутствует в пакете selenium-webdriver в папке тестирования.

Mocha позволяет нам определять функции до и после, а также организовывать тесты с именами и описаниями.

Шаги тестирования этого нового файла mochaTest.js:

  • Определите переменные, которым требуется selenium-webdriver
  • Определите переменную test, которая требует тестовой части selenium-webdriver и будет управляться с помощью Mocha
  • Определите переменную assert, которая использует встроенный пакет assert из Node.JS. В качестве альтернативы вы также можете использовать такие пакеты, как Chai, которые также хорошо поддерживаются Mocha.
  • Объявите переменную драйвера.
  • Создайте тестовую группу с описанием и ее основной функцией.
  • Создайте перед функцию генератора, которая создает новый объект драйвера в браузере по нашему выбору.
  • Создайте настоящий тест с именем и функцией.
  • Откройте страницу портфолио, найдите ссылку на первый проект, использующий XPath, и щелкните по нему.
  • Здесь все становится немного сложнее из-за того, что Selenium полагается на обещания JavaScript. В Java вы просто использовали бы метод driver.getTitle() в утверждении с ожидаемым заголовком, зная, что строка с заголовком текущей страницы браузера будет возвращена немедленно. Однако в JS getTitle() возвращает обещание. Таким образом, вам нужно запустить функцию, а затем использовать ключевое слово then для запуска другой функции с фактическим утверждением. Утверждение будет запущено только после того, как обещание будет выполнено. Пока он не будет готов, getTitle() будет включать объект, который нельзя использовать в утверждении.
  • Выполните указанное выше утверждение, чтобы убедиться, что заголовок новой страницы соответствует ожидаемому значению.
  • Закройте браузер.

В то время как обычный тест можно запустить просто с помощью Node.JS, тесты, основанные на Mocha, должны запускаться с их собственной командой: mocha -t 5000 mochaTest.js

Параметры -t 5000 устанавливают тайм-аут, который немного превышает значение по умолчанию 2000 мс и помогает предотвратить ошибки из-за медленной работы браузеров или времени загрузки.

Асинхронность и ожидание с Selenium JS

Прочитав эту замечательную статью об использовании async и await в Selenium для JavaScript, я хотел добавить измененный пример, который полагается на эти довольно мощные функции.

Короче говоря, как вы можете видеть в предыдущем разделе, где мой код основывался на обещаниях JavaScript, его может быть немного сложно понять, особенно для тех, кто работает с Selenium Java, например, я.

К счастью, асинхронный характер JavaScript можно обуздать с помощью некоторых новых функций, предоставляемых ключевыми словами async и await. Функции могут быть определены как асинхронные, и внутри них вы можете поместить ожидание перед объявлениями или вызовами, эффективно сообщая JS, чтобы он дождался выполнения этого конкретного обещания, прежде чем двигаться вперед.

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

Заключение

Как видите, несмотря на то, что есть некоторые особенности, которые необходимо изучить благодаря средам JavaScript и Node.JS, веб-тестирование с использованием Selenium Webdriver в основном остается прежним. Ожидайте услышать немного больше об этой комбинации в будущих статьях.