🦉 Использование фреймворка Nightwatch.js для автоматизации тестирования

Перед вами пошаговое руководство к Nightwatch.js для автоматизации браузерного тестирования. Мы разберем, как установить и настроить фреймворк, детально рассмотрим его конфигурацию, а также структуру важных файлов и папок. Позже изучим выполнение первого скрипта автоматизации тестирования, разберем некоторые проблемы и поищем пути их решения.

Что такое Nightwatch.js?

Nightwatch.js – написанный на Node.js открытый инструментарий, направленный на предоставление полноценного сквозного (end-to-end) тестирования веб-приложений, браузерных приложений и веб-сайтов с помощью Selenium и JavaScript. Он предоставляет несколько команд и утверждений для выполнения операций с элементами DOM.

Nightwatch.js использует API W3C WebDriver или Selenium WebDriver, и упрощает написание сквозных автоматических тестов в Node.js, а также легко настраивается для непрерывной интеграции.

Почему Nightwatch.js так популярен?

Основная цель Nightwatch.js – создание единого интегрированного решения для тестирования приложений. Поскольку фреймворк написан на Node.js, у него есть некоторые весомые преимущества перед любым другим инструментом Selenium.

Автоматизированное браузерное тестирование на базе Nightwatch.js устраняет фактор зависимости от стороннего программного обеспечения, что повышает целостность данных между различными системными компонентами.

Nightwatch.js предоставляет следующие возможности из коробки:

• Встроенный Test Runner: набор средств запуска тестирования из командной строки с поддержкой Grunt для выполнения автоматизированных тестов;
• Стратегия тестирования: поддерживаются различные способы запуска тестов (параллельно, последовательно или по группам и тегам).
• Облачные сервисы: поддержка интеграции с провайдерами облачного тестирования на Selenium, такими, как LambdaTest.
• Selenium Server: возможность автоматического управления автономным сервером Selenium с помощью встроенной отчетности JUnit XML.
• Утверждения, CSS и XPath: некоторые команды и утверждения для операций DOM, а также селекторы CSS и XPath, используемые для идентификации элементов на странице.
• Непрерывная интеграция: фреймворк может использоваться для интеграции тестов с системами автоматизации сборки (Jenkins, TeamCity и т.п.).

Помимо перечисленных выше функций, Nightwatch.js популярен благодаря чистому и простому синтаксису, упрощающему быстрое и эффективное написание тестов с использованием только CSS-селекторов Node.js и XPath локатора в Selenium.

Принцип работы Nightwatch.js

Nightwatch обменивается данными посредством RESTful API, который определяется W3C WebDriver API. Ему нужен RESTful HTTP API и сервер Selenium JavaScript WebDriver.

Для выполнения операции, будь то команда или утверждение, Nightwatch обычно требуется отправить минимум два запроса:

• Первый запрос находит требуемый элемент с заданным выражением XPath или CSS селектором.
• Второй принимает элемент и выполняет текущую операцию команды или утверждения.

Установка Nightwatch.js

Есть некоторые базовые условия, необходимые для начала работы с Nightwatch.js:

• Node.js: модуль Nightwatch написан на Node.js, значит потребуется серверная платформа.
• Пакетный менеджер Node (npm): как только Node.js установлен, Node package manager может использоваться для установки пакетов.

Чтобы инсталлировать последнюю версию инструментария, выполните следующую команду (здесь ‘g’ используется для глобальной установки):

        $ npm install -g nightwatch
    

Представленная ниже команда поместит исполняемый файл (‘--save-dev’) в папку ./node_modules/.bin

        $ npm install --save-dev nightwatch
    

• Java SDK: поскольку Nightwatch работает на Selenium WebDriver API и требует Selenium WebDriver Server, необходимо также установить Java Development Kit (JDK 7+) и настроить среду JAVA.
• Selenium Server: требуется автономный серверный пакет Selenium JAR, который можно скачать на странице загрузок Selenium. Затем его нужно поместить в папку bin проекта. Selenium Server запускается следующей командой:

        selenium-server-standalone-{version}.jar
    

• ChromeDriver: является автономным сервером, реализующим проводной протокол W3C Web Driver для Chromium. Этот исполняемый файл надо поместить в ту же папку bin.

        $ npm install --save-dev chromedriver</pre>
    

Настройка Nightwatch.js

Фреймворк предлагает встроенный Test Runner, который ожидает передачи файла конфигурации JSON. По умолчанию используется nightwatch.json, который должен находиться в корневом каталоге проекта.

В качестве альтернативы можно взять файл конфигурации nightwatch.conf.js, который будет загружен из корневого каталога проекта для тестирования на Nightwatch.

В конфигурационном файле объявить конкретные детали: среды тестирования, специфические настройки Selenium и т.д. Примерно выглядит файл nightwatch.json для тестирования с помощью Selenium и JavaScript.

        { "src_folders" : ["tests"], "output_folder" : "reports", "custom_commands_path" : "", "custom_assertions_path" : "", "page_objects_path" : "", "globals_path" : "", "test_workers": { "enabled": true, "workers": "auto" }, "selenium" : { "start_process" : true, "server_path" : "node_modules/selenium-standalone/.selenium/selenium-server/", "log_path" : "./reports", "host": "127.0.0.1", "port" : 4444, "cli_args" : { "webdriver.chrome.driver" : "", "webdriver.gecko.driver" : "", "webdriver.edge.driver" : "" } }, "test_settings" : { "default" : { "launch_url" : "http://localhost", "selenium_port" : 4444, "selenium_host" : "localhost", "silent": true, "screenshots" : { "enabled" : false, "path" : "" }, "desiredCapabilities": { "browserName": "firefox", "marionette": true, "javascriptEnabled": true, "acceptSslCerts": true } }, "chrome" : { "desiredCapabilities": { "browserName": "chrome" } }, "edge" : { "desiredCapabilities": { "browserName": "MicrosoftEdge" } } } }
    

Давайте подробнее рассмотрим его структуру:

• src_folders: указывающая на местоположение тестовых наборов директория.
• output_folder: здесь хранятся отчеты тестирования, например, файлы JUnit с результатами, отчеты в XML, логи, логи selenium, скриншоты, видео, сетевые логи и т.д.
• globals_path: указывает путь к файлу, в котором инициализируются все глобальные параметры тестового набора. Они загружаются и представляются в тестах, как глобальное значение, а также могут быть изменены в среде test_settings.
• test_workers: это свойство определяет, запускать тесты параллельно или нет. Если для параметра enabled установлено значение true, распараллеливание разрешено.
• page_objects_path: указывает место, откуда должен быть загружен объектный файл страницы.
• selenium: содержит всю информацию и настройки, относящиеся к конфигурации Selenium Server. Он также содержит server_path и webdriver.chrome.driver, которые указывают путь к Selenium Server и ChromeDriver. Если параметру start_process задано значение true, Selenium Server запускается автоматически.
• test_settings: содержит всю важную информацию о тестах и их параметрах. Это позволяет нам определять и настраивать тестовые среды.

Запуск первого скрипта на локальном Selenium WebDriver

Наш тестовый сценарий будет искать Nightwatch в Google, а затем проверит документацию nightwatch.js на веб-сайте.

        module.exports = { 'NW test on Google' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .setValue('input[type=text]', 'Nightwatch JS') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .pause(1000) .assert.containsText('ol#rso li:first-child', 'Nightwatch.js | Node.js powered End-to-End testing framework') .end() } }

    

Файл nightwatch.json (и глобальный файл модуля nightwatch.globals.js) можно редактировать, но он должен выглядеть примерно так:

        { "src_folders" : ["./tests"], "output_folder" : "./reports", "globals_path" : "nightwatch.globals.js", "test_workers": { "enabled": true, "workers": "auto" }, "selenium" : { "start_process" : true, "server_path" : "./node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-3.141.59.jar", "log_path" : "nw/logs", "host" : "127.0.0.1", "port" : 4444, "cli_args" : { "webdriver.chrome.driver" : "./node_modules/chromedriver/bin/chromedriver", "webdriver.ie.driver" : "" } }, "test_settings" : { "default" : { "launch_url" : "http://google.com", "selenium_port" : 4444, "selenium_host" : "localhost", "silent": true, "screenshots" : { "enabled" : true, "path" : "" }, "desiredCapabilities": { "browserName": "chrome", "javascriptEnabled": true, "acceptSslCerts": true } }, "french" : { "launch_url" : "http://google.fr", "desiredCapabilities": { "browserName": "firefox", "javascriptEnabled": true, "acceptSslCerts": true } } } }
    

Далее нужно выполнить тестирование Nightwatch из базовой директории проекта с помощью команды:

`npm test`

Эта команда проверяет тесты и зависимости, а затем выполняет тестовый набор, который открывает в Chrome заданную строку поиска.

Параллельное тестирование на локальном Selenium WebDriver

Настроим конфигурацию для параллельного выполнения тестирования, установив для test_workers значение true. В папку тестов потребуется добавить еще один, и фреймворк Nightwatch.js выполнит их параллельно.

Второй тест будет искать Node.js в Google и проверит документацию Node.js.

        module.exports = { 'NJS test on Google' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .setValue('input[type=text]', 'node.js') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .pause(1000) .assert.containsText('ol#rso li:first-child', 'Node.js') .end() } }
    

Оба теста выполнятся одновременно в двух разных браузерах Chrome.

Тестовое покрытие

Проводя тестирование веб-приложения на локальном хосте, мы стремимся устранить любые проблемы с пользовательским интерфейсом и можем внести определенные изменения, а затем перенести код на live-сервер для получения живого трафика. Тут возникает одна проблема – тестовое покрытие.

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

Затраты на локальную инфраструктуру

Выполнение определенных автоматических тестов и локальная настройка Selenium всегда сопровождается затратами на инфраструктуру.

• Для выполнения всех тестовых задач необходимо настроить отдельную среду;
• Требуются различные типы устройств: десктопы, ноутбуки, смартфоны и планшеты;
• Инвестиции в установку фермы устройств – не лучший выбор для стартапов и небольших организаций;
• Поскольку количество автоматизированных тестов может возрасти, нужна масштабируемая система.

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

Почему облачный Selenium Grid – хороший выбор?

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

Облако обладает высокой масштабируемостью и позволяет параллельно запускать любое количества тестов. Для принятия новой стратегии достаточно изменить тестовые скрипты, а настройка инфраструктуры останется прежней.

Какой Selenium Grid выбрать?

200 000 компаний по всему миру доверяют LambdaTest как надежному онлайн-провайдеру Selenium Grid. Сервис позволяет выполнить автоматизированное тестирование более чем 2000 реальных браузеров для мобильных и настольных компьютеров.

Облачный Selenium Grid позволяет выполнять скрипты автоматизации тестирования в Selenium на различных платформах программирования: Java, JavaScript, PHP, Python, Ruby, C # и других языках, которые обеспечивают привязку к Selenium.

Вы также можете выбрать интеграцию с различными инструментами CI/CD (Jenkins, Travis CI и другими) для непрерывного тестирования в DevOps.

Благодаря открытому Selenium API нетрудно извлечь отчеты о выполнении скрипта Selenium через LambdaTest. Давайте попробуем реализовать приведенный выше пример, используя удаленный WebDriver для LambdaTest Selenium Grid.

Выполнение скрипта на удаленном Selenium Grid

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

Затем определим среду браузера для выполнения тестов, передав данные в LambdaTest Selenium Grid через требуемый класс возможностей. Он предоставляет генератор возможностей (Desired Capabilities Generator) для выбора и передачи сведений о браузере и спецификаций среды с различными комбинациями.

Класс desiredCapabilities в конфигурационном файле nightwatch.json для тестирования Nightwatch будет выглядеть примерно так:

        "desiredCapabilities": { "build" : "Nightwatch-Selenium-Test", "name" : "Nightwatch-Selenium-Test", "platform" : "Windows 10", "browserName" : "Firefox", "version" : "71.0", "selenium_version" : "3.4.0", "geoLocation" : "IN" }

    

Нам также понадобится сгенерировать ключ доступа для подключения к платформе и выполнения тестирования. Он уникален и может быть скопирован из раздела профиля учетной записи.

Мы также можем получить ключ доступа, имя пользователя и сведения о хабе в разделе Automation.

Ниже приведен файл nightwatch.conf.js, в котором нужно объявить конфигурацию пользователя для ключа доступа, имени пользователя, хоста и порта для теста.

        module.exports = (function(settings) { console.log(settings["test_settings"]["default"]["username"]) if (process.env.LT_USERNAME) { settings["test_settings"]["default"]["username"] = process.env.LT_USERNAME; } if (process.env.LT_ACCESS_KEY) { settings["test_settings"]["default"]["access_key"] = process.env.LT_ACCESS_KEY; } if (process.env.SELENIUM_HOST) { settings.selenium.host = process.env.SELENIUM_HOST; } if (process.env.SELENIUM_PORT) { settings.selenium.host = process.env.SELENIUM_PORT; } return settings; })(require('./nightwatch.json'));

    

Стоит выполнить тесты в различных браузерах и операционных системах: мы использовали Microsoft Edge, Mozilla Firefox и Apple Safari на Windows 10 и OS X 10.13.

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

        { "src_folders" : ["./tests"], "output_folder" : "./reports", "globals_path" : "nightwatch.globals.js", "test_workers": { "enabled": true, "workers": "auto" }, "selenium" : { "start_process" : false, "server_path" : "", "log_path" : "", "host" : "hub.lambdatest.com", "port" : 80, "cli_args" : { "webdriver.chrome.driver" : "", "webdriver.ie.driver" : "", "webdriver.firefox.profile" : "" } }, "test_settings" : { "default" : { "launch_url" : "http://google.com", "selenium_port" : 80, "selenium_host" : "https://lambdatest.com", "silent": false, "screenshots" : { "enabled" : true, "path" : "" }, "username" : "irohitgoyal", "access_key" : "123456789", "skip_testcases_on_fail": false, "desiredCapabilities": { "build":"Nightwatch-Selenium--Test", "platform" : "Windows 10", "browserName" : "Chrome", "version" : "78.0", "selenium_version" : "3.13.0", "visual":true, "video":true, "console":true, "geoLocation" : "IN", "chrome.driver" : "78.0", "network":true } }, "chrome": { "desiredCapabilities": { "platform": "Windows 10", "browserName": "chrome", "version": "78.0" } }, "safari" : { "desiredCapabilities": { "platform": "macos 10.13", "browserName": "safari", "version": "11.0" } }, "firefox" : { "desiredCapabilities": { "platform": "win10", "browserName": "firefox", "version": "60" } }, "edge" : { "desiredCapabilities": { "platform": "Windows 10", "browserName": "MicrosoftEdge", "version": "17.0" } }, "french" : { "launch_url" : "http://google.fr", "desiredCapabilities": { "browserName": "firefox", "javascriptEnabled": true, "acceptSslCerts": true } } } }

    

Теперь важно добавить приведенный ниже раздел для тестирования Nightwatch в класс scripts в качестве аргументов в файле package.json, чтобы уточнить среды выполнения desired compabilities.

        scripts": { "test": "./node_modules/.bin/nightwatch -e firefox,edge,safari test" },
    

Осталось выполнить тесты из базовой директории проекта с помощью следующей команды:

npm test

Она выполняет проверку тестов и зависимостей, а затем запускает тесты и открывает браузеры Edge, Firefox и Safari в указанных средах и вводит строку поиска. На скриншоте показан код Nightwatch, работающий в LambdaTest Selenium Grid.

Скрипт запускается параллельно в Mozilla Firefox, Safari, Google Chrome и Edge, а результаты отображаются в командной строке и подробно фиксируются на интерактивной панели автоматизации LambdaTest. Панель инструментов LambdaTest позволяет просматривать логи, скриншоты и видеозаписи всех выполненных на Selenium тестов.

Заключение

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

Хочу научиться программировать с нуля, но не знаю, с чего начать. Что делать?

Можно учиться самостоятельно (долго) или пойти на курсы с преподавателями (быстро). Плюс нужно учитывать, что джунов много, конкуренция выше и работодатели повышают порог вхождения при найме на работу. Чтобы получить актуальные знания, мы в proglib.academy запустили курсы:

• Основы программирования на Python.
• Профессия Python-разработчик.
• Алгоритмы и структуры данных.
• Математика для Data Science.
• Профессия Data Science.
• Frontend Basic: принцип работы современного веба.
• Профессия Фронтенд-разработчик.
• Обработка естественного языка. Полный курс.

На подходе еще больше 10 курсов для взрослых и детей.