Как выполнить автоматическое тестирование с помощью Cucumber и Nightwatch JS?

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

В этом руководстве по автоматизации тестирования Cucumber мы исследуем Nightwatch.js, одну из широко используемых платформ автоматизации на основе JavaScript. Мы также подробно рассмотрим Cucumber, широко распространенный инструмент автоматизации, поддерживающий BDD (Behavior Driven Development). К концу этого руководства вы сможете легко интегрировать Cucumber в Nightwatch.js framework и создать надежную структуру BDD для выполнения автоматического тестирования Selenium.

Итак, приступим!

Зачем использовать Nightwatch.js для тестирования автоматизации?

Nightwatch.js - это популярная платформа автоматизации тестирования на основе Selenium JavaScript с открытым исходным кодом для автоматизации веб-приложений и веб-сайтов на основе браузера. Он написан в среде выполнения Node.js и использует API W3C WebDriver (ранее Selenium WebDriver) для взаимодействия с различными браузерами для выполнения команд и утверждений для элементов DOM.

Это среда для сквозного тестирования (E2E), цель которой - упростить процесс написания сценариев тестирования автоматизации.

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

Простота использования. Напишите эффективный код с чистым и простым синтаксисом.
Встроенное средство запуска тестов - поставляется со встроенным набором средств запуска тестов для командной строки с поддержкой стиля Grunt для выполнения автоматического тестирования Selenium.
Встроенное средство запуска тестов - поставляется со встроенным набором средств запуска тестов в командной строке с поддержкой стиля Grunt для выполнения автоматического тестирования Selenium.
Объектная модель страницы - поддерживает CSS и указатели XPath, чтобы сделать автоматизацию браузера более управляемой. Вы можете прочитать наш блог, чтобы узнать больше об автоматизации тестирования Selenium с использованием объектной модели страницы (POM).
Гибкость - позволяет модульное тестирование, интеграцию, а также сквозное тестирование. Надежный автоматизированный приемочный тест можно написать с помощью настройки Cucumber на основе Gherkin.
Интеграции - предоставляет единое интегрированное решение для тестирования приложений, тем самым устраняя зависимость от стороннего программного обеспечения. Это делает фреймворк чрезвычайно легким.
Поддержка облачных сервисов. Совместимость с облачными платформами тестирования, такими как LambdaTest, позволяет выполнять автоматическое тестирование Selenium в гигантских масштабах.
Непрерывная интеграция (CI) - поддерживает такие инструменты, как Jenkins, TeamCity и т. д., чтобы помочь разработчикам в непрерывном создании и тестировании программного обеспечения.

Как установить и настроить Nightwatch.js

В этой части руководства по автоматизации тестирования Cucumber мы сначала приступаем к установке и настройке среды для Nightwatch.js. Перед установкой nightwatch.js убедитесь, что ваша система предварительно оснащена следующим:

Предварительные требования для Nightwatch.js:

Java

Убедитесь, что Java уже установлена в вашей системе, используя следующую команду:

java -version

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

2. NodeJS и NPM

Убедитесь, что Node.js уже установлен в вашей системе, используя следующую команду:

node -v

Если нет, скачайте последнюю версию LTS с официального сайта Node.js.

Примечание. NPM будет установлен вместе с Node.js. Таким образом, нет необходимости в отдельной установке.

3. IDE по вашему выбору.

Здесь мы будем использовать код Visual Studio. Вы можете скачать VSC с официального сайта Visual Studio.

Как установить и настроить проекты с Nightwatch.js:

После того, как на машине установлены предварительные условия для Nightwatch.js, пора установить эту мощную среду автоматизации. Выполните следующие шаги для установки и настройки проектов с Nightwatch.js:

Шаг 1. Создайте папку для вашего проекта в желаемом месте вашей системы. Откройте папку в предпочитаемой IDE.

Шаг 2. Инициализируйте проект с помощью файла package.json.

Откройте терминал в VS Code.
Убедитесь, что он указывает на папку проекта.
Запустите следующую команду на терминале, чтобы инициализировать проект:

npm init

Заполните детали проекта или оставьте их пустыми.

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

npm init -y

Здесь -y означает «да».

Таким образом, мы успешно создали файл package.json.

Шаг 3: выполните следующую команду в терминале, чтобы установить Nightwatch.js в текущий проект.

npm install --save-dev nightwatch

Эта команда добавит папку «node_modules» в ваш каталог и загрузит nightwatch.js как devDependency в package.json.

Вы также заметите файл «package-lock.json» в папке проекта. Этот файл используется для блокировки всех зависимостей с помощью номера версии, что упрощает установку кода в другой системе.

Шаг 4: Наконец, давайте установим веб-драйверы для нашего браузера (например, ChromeDriver и GeckoDriver).

npm install --save-dev chromedriver geckodriver

Selenium Server требовался для более старых версий Nightwatch («v0.9» и ранее), начиная с версии «1.0» Selenium больше не нужен.

На этом мы закончили установку Nightwatch.js. Пора поработать руками над реализацией 🙂

Запускаем свой первый тест с NightWatch.js

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

Конфигурация для автоматического тестирования с Nightwatch.js

Наша цель - запустить наши тестовые файлы с помощью команды «npm test» из базового каталога проекта. Кроме того, мы устанавливаем Chrome в качестве браузера по умолчанию. Вы можете использовать любой браузер, пожалуйста, загрузите соответствующий драйвер браузера перед написанием теста.

Шаг 1. Создайте две папки в корневом каталоге:

«Тесты» для хранения тестовых файлов
«Отчеты» для сохранения отчетов после каждого тестового прогона.

Вы можете указать любое имя папки по вашему выбору; однако он должен быть правильно отображен в файле nightwatch.json, который мы обсудим на шаге 3.

Шаг 2. В файле package.json замените «scripts -› test »на« nightwatch ».

“scripts”: {
  “test”: “nightwatch”
}

Вот так выглядит файл package.json:

Шаг 3. Создайте в корне файл nightwatch.json и вставьте следующий фрагмент.

{
    "src_folders" : "tests",
    "output_folder" : "reports",
 
    "webdriver" : {
        "start_process": true,
        "server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver.exe",
        "host": "localhost",
        "port": 4444
      },
      "test_settings" : {
        "default" : {
            "desiredCapabilities" : {
                "browserName" : "chrome"            
              }           
          }
      }
}

«Nightwatch.json» - это файл конфигурации, который требуется для запуска тестов Nightwatch.

Давайте внимательно рассмотрим приведенную выше структуру кода nightwatch.json.

src_folders: содержит наборы тестов. Вы также можете предоставить массив папок.
output_folder: отчеты об испытаниях сохраняются в этом месте (т. е. файлы отчетов JUnit, отчеты XML, журналы тестирования, журнал селена, снимки экрана, видеожурналы, сетевые журналы и т. д.).
webdriver: объект, содержащий конфигурации, относящиеся к Selenium WebDriver.
test-settings: определяет браузер, который мы хотим использовать.

Вы также можете создать nightwatch.conf.js для настройки. Если оба этих файла присутствуют в проекте, файлу nightwatch.conf.js будет присвоен больший приоритет по сравнению с nightwatch.json (т.е. настройки, упомянутые в nightwatch.conf.js, будут иметь приоритет над теми, которые упомянуты в nightwatch.json).

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

Написание тестов Nightwatch.js для автоматического тестирования

В предыдущем разделе этого руководства по автоматизации тестирования Cucumber мы создали папку «tests». Теперь мы будем создавать тестовые файлы внутри этой папки. Каждый файл будет загружен как набор тестов средством запуска тестов Nightwatch.

Шаг 1. Создайте тестовый файл и назовите его - testfile1.js.

Шаг 2. Создадим тестовую структуру.

module.exports = {
 
}

Шаг 3. В каждом файле средство выполнения тестов будет искать ключи, которые экспортируются для использования другими модулями. Ключ - это имя тестового примера. Каждый ключ сопоставляется с функцией, в которой экземпляр браузера будет передан в качестве аргумента.

module.exports = {
    "Step one: Navigate to google and verify URL and title" : function(browser){
  
    }

Шаг 4: внутри этой функции мы пишем наш тестовый код. Давайте рассмотрим приведенный ниже фрагмент:

Это простой и понятный сценарий тестирования. Код написан в два этапа.

Код запустит браузер Chrome, перейдет на google.com и проверит URL-адрес и заголовок страницы с ожидаемым результатом.
В поле поиска вводится «nightwatch» и проверяются результаты поиска на соответствие тексту «nightwatch».

Вот основные аспекты реализации:

url () - переход к определенному URL-адресу.
urlContains () - проверяет, содержит ли текущий URL заданное значение.
title () - проверяет, соответствует ли заголовок страницы заданному значению.
containsText () - проверяет, содержит ли данный элемент указанный текст.
setValue () - устанавливает значение элемента DOM как заданное значение.
pause () - приостанавливает тест на заданное время в миллисекундах.
assert - когда утверждение не выполняется, тест завершается, пропуская все остальные утверждения.

Шаг 5. Чтобы запустить код, перейдите в терминал и перейдите в базовый каталог проекта. Как только вы окажетесь в этом каталоге, выполните следующую команду:

npm test

Тест начнется, и браузер будет запущен.

Все утверждения приняты !! Мы успешно написали наш первый тестовый код с Nightwatch.js.

Шаг 6. Просмотрите отчеты, созданные в папке «отчеты».

Зачем использовать Cucumber.js для тестирования автоматизации Selenium?

Разработка, управляемая поведением (BDD) - это подход, в котором поведение функции определяется с помощью простого предметно-ориентированного языка (DSL). Основным преимуществом является то, что требования легко понятны любому (в том числе нетехническому сообществу). DSL широко используется для написания тестовых сценариев.

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

Вот основные преимущества фреймворка Cucumber BDD:

Он действует как мост между технической командой (разработчики, QA и т. Д.) И нетехнической командой (бизнес-аналитики, заинтересованные стороны и т. Д.), Поскольку функции написаны простым языком (например, Gherkin).
Он больше ориентирован на пользовательский опыт.
У него простой процесс установки и настройки.
Огромное внимание уделяется возможности повторного использования и улучшению обслуживания тестового кода.

Как работает автоматизация теста Cucumber?

Как упоминалось в предыдущем разделе этого руководства по автоматизации тестирования Cucumber, мы можем использовать Cucumber для написания сценариев в виде простого текста с использованием синтаксиса Gherkin. Некоторые часто используемые ключевые слова Gherkin: Feature, Scenario, Given, When, Then, And и т. Д.

Функция представляет собой высокоуровневое описание функциональности, которая используется для группировки связанных сценариев. Сценарий - это набор шагов, которые нужно выполнить для Cucumber. Шаги построены с использованием ключевых слов «Дано», «Когда», «И», «Тогда» и т. Д., Каждое из которых служит определенной цели. Документ Gherkin хранится в файле, который называется файлом функций и имеет расширение .feature.

Типичный файл функций для входа в систему будет выглядеть следующим образом:

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

Итак, давайте начнем с BDD-Cucumber.

Автоматическое тестирование с помощью Nightwatch.js и Cucumber.js

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

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

Как установить и настроить Cucumber

Начнем с установки и настройки фреймворка Cucumber.

Шаг 1. Установка зависимостей:

Вы можете пропустить ранее установленные зависимости, такие как nightwatch и chromedriver.

npm install --save-dev nightwatch-api nightwatch @cucumber/cucumber chromedriver

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

Шаг 2. Настройка Nightwatch.js:

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

Единственное отличие здесь от предыдущей настройки состоит в том, что мы удалили «src_folder», поскольку тесты выполняются с использованием Cucumber.

const chromedriver = require('chromedriver');
 
module.exports = {
  test_settings: {
    default: {
      webdriver: {
        start_process: true,
        server_path: chromedriver.path,
        port: 4444,
      },
      desiredCapabilities: {
        browserName: 'chrome'
      }
    }
  }
};

Для автоматизации тестирования Cucumber требуются файлы трех типов:

Файл конфигурации огурца
Файл функций
Файл определения шага

Шаг 3. Настройка огурца.

Пришло время настроить Cucumber. Создайте файл с именем cucumber.conf.js в корневой папке корня проекта и вставьте следующий фрагмент.

Этот файл отвечает за установку тайм-аута по умолчанию, запуск WebDriver и создание сеанса браузера.

Шаг 4. Создание файла функции.

Создайте папку с именем «features» в корневой папке проекта. Все файлы функций хранятся в этой папке.

Создайте файл функции с именем google.feature. Мы продолжим использовать тот же пример, который мы использовали для установки Nightwatch.js.

Шаг 5. Написание определений шагов:

Как упоминалось в предыдущем разделе этого руководства по автоматизации тестирования Cucumber, каждый шаг функции должен быть связан с соответствующим определением шага, на котором написан исполняемый код.

Создайте файл определения шага с именем google.js в папке step-definitions.

Не знаете, как писать определения шагов?

Просто выполните код с помощью команды run (которую мы настроим на шаге 6). Из-за шаблонов проектирования Cucumber вам будет отображаться предложение, как показано ниже, в терминале для невыполненных шагов. Затем скопируйте и вставьте код в файл определения шага и заполните его своими утверждениями.

Шаг 6. Создание сценария npm:

В package.json определите любую короткую команду для выполнения тестов Cucumber. Здесь мы провели «e2e-тест». У вас есть возможность выбрать для него любое имя.

"scripts": {
    "e2e-test": "cucumber-js --require cucumber.conf.js --require step-definitions"
  },

Шаг 7. Запустите тесты.

Запустите следующую команду на терминале для запуска тестов:

npm run e2e-test

Тест проходит успешно, все утверждения пройдены!

Настройка тестовых прогонов в Cucumber

Используйте следующие команды для настройки тестовых запусков в Cucumber:

Для запуска одного файла функции:

npm run e2e-test -- features/google.feature

2. Для запуска нескольких файлов функций:

npm run e2e-test -- features/google.feature -- features/firefox.feature

3. Для использования шаблонов глобусов:

npm run e2e-test -- features/**/*.feature

4. Для запуска каталога функций:

npm run e2e-test -- features/dir

5. Для запуска сценария по номеру строки:

npm run e2e-test -- features/my_feature.feature:3

6. Для запуска сценария по его имени, которое соответствует регулярному выражению:

npm run e2e-test -- --name "topic 1"

7. Для использования тегов (@) для выборочного прогона:

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

Как создавать собственные репортеры в Nightwatch.js и Cucumber

Cucumber предоставляет несколько вариантов создания отчетов. Отчет - очень ценный инструмент при отладке. Кроме того, он обеспечивает немедленную визуальную обратную связь для анализа потенциальных проблем.

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

Выполните следующие шаги для создания отчетов в Cucumber и Nightwatch.js:

Шаг 1. Установка зависимостей:

npm install --save-dev cucumber-html-reporter mkdirp

Шаг 2. Настройка Nightwatch.js:

Включите снимки экрана в настройках по умолчанию файла nightwatch.config.json.

default: {
      screenshots: {
        enabled: true,
        path: 'screenshots'
      },

Шаг 3. Настройка файла конфигурации Cucumber:

Реализуйте ловушку «После», добавив код для обработки снимков экрана и прикрепив их к отчету.

Шаг 4. Обновление скриптов npm:

В файле package.json обновите скрипты, чтобы учесть функцию отчета. Здесь mkdirp используется, чтобы убедиться, что папка отчета существует перед запуском теста.

Средство форматирования JSON генерирует отчет JSON, который затем используется cucumber-html-reporter для создания отчета HTML.

"scripts": {
    "e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require step-definitions --format json:report/cucumber_report.json"
  },

Шаг 5. Запуск тестов.

npm запустить e2e-test

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

Автоматическое тестирование с помощью Cucumber и Nightwatch.js в облачной Selenium Grid

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

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

Это может быть достигнуто путем создания внутренней инфраструктуры или использования сторонней облачной платформы, такой как LambdaTest. Автоматическое тестирование (или кроссбраузерное тестирование) в облачной Selenium Grid позволяет запускать тесты в ускоренном темпе в разных браузерах, платформах и устройствах. Ваши тесты автоматизации могут использовать преимущества параллельного тестирования в Selenium для выполнения тестов автоматизации в сверхбыстром темпе.

Использование комбинации удаленного Selenium Grid с подходящим поставщиком облачных решений, таким как LambdaTest, для тестирования кроссбраузерной совместимости - оптимальная стратегия для масштабного запуска тестов автоматизации. LambdaTest предоставляет вам доступ к более чем 2000 браузерам для мобильных и настольных компьютеров, чтобы помочь вам получить максимальное покрытие браузера во время процесса автоматического тестирования браузера.

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

Шаг 1: войдите в LambdaTest или Создайте бесплатную учетную запись LambdaTest. После создания учетной записи запишите имя пользователя и токен доступа из раздела профиля LambdaTest.

Шаг 2. Используйте генератор Желаемых возможностей LambdaTest для создания возможностей браузера и платформы в соответствии с вашими требованиями к тесту.

desiredCapabilities: {
            build:"Nightwatch-Cucumber-Test",
            platform : "Windows 10",
            browserName : "chrome",
            version : "87.0",
            selenium_version: "3.13.0"
}

Шаг 3. Теперь пора внести необходимые изменения в конфигурацию файла nightwatch.conf.js. Давайте изучим приведенный ниже код.

Ниже приведены дополнения, внесенные в файл конфигурации:

Передайте свой токен доступа и данные пользователя (полученные на шаге 1).
Обеспечьте желаемые возможности для браузера (полученные из шага 2).
Задайте имя хоста, соответствующее LambdaTest.
Включите запись видео, консоль, сетевые журналы и т. Д. В желаемых возможностях.

Мы использовали следующие дополнительные параметры для настройки nightwatch.config.js для кросс-браузерного тестирования в облаке:

selenium - это объект, содержащий параметры, связанные с Selenium Server. Если «селен» не используется, вместо него следует установить параметры «webdriver» (как мы это делали при локальной настройке). Начиная с Nightwatch 1.0, Selenium требуется только в том случае, если тестирование выполняется с использованием настройки Grid или облачной Selenium Grid, такой как LambdaTest.
cli_args - содержит список аргументов CLI, передаваемых процессу Selenium (т. е. драйверам браузера).
test_settings:
без звука - используется для отображения расширенных журналов команд HTTP-трафика с сервера WebDriver или Selenium.
desireCapabilities - это объект для указания различных возможностей, таких как имя браузера, версия браузера и т. д.
username и access_key - необходимы для доступа к облачной Grid.

Шаг 4. Добавьте новое значение аргумента «сценарии» в package.json.

Здесь мы добавили «удаленное тестирование», которое характерно для облачного тестирования Selenium. Мы удалили параметры настраиваемого HTML-отчета, связанные с локальным выполнением.

"scripts": {
    "e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require step-definitions --format json:report/cucumber_report.json",
    "remote-test": "cucumber-js  --require cucumber.conf.js --require step-definitions"
  },

Шаг 5: запустите тест с помощью следующей команды.

npm run remote-test

Код запускается, и логи можно наблюдать в терминале.

Перейдите в Панель управления автоматизацией в LambdaTest, чтобы следить за статусом выполнения теста.

Как показано ниже, тест был успешно выполнен:

Мы можем анализировать отдельные отчеты о тестовых запусках из журналов автоматизации.

Мы успешно выполнили наши тестовые примеры с помощью автоматизированного решения для кросс-браузерного тестирования, предоставленного LambdaTest, благодаря беспроблемному опыту!

Если вы ищете видеоресурсы по тестированию автоматизации Selenium с помощью JavaScript, обязательно загляните на YouTube Channel LambdaTest. Видео, показанное ниже, является отличным ресурсом по автоматизации тестирования с помощью JavaScript:

Заключение

Nightwatch.js - одна из самых популярных сред автоматизации Selenium на основе JavaScript, а Cucumber - один из лучших инструментов для реализации BDD. Cucumber можно интегрировать с Nightwatch.js для создания надежной среды тестирования автоматизации. Вместе они позволяют создавать настраиваемые тестовые сценарии, а также легко читаемую документацию и дополнительные функции, такие как создание настраиваемых отчетов в формате HTML.

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

Удачного тестирования!