В этой серии блогов я собираюсь показать вам, что я узнал об автоматизации с помощью NightwatchJs.

NightwatchJs — это среда тестирования E2E, используемая для автоматизации веб-приложений браузера. Он использует W3C WebDriver API в качестве основы для выполнения автоматизации.

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

По умолчанию он предоставляет XML-отчет JUnit, созданный после выполнения, который легко интегрируется с инструментами CI, такими как Jenkins, TeamCity и т. д.

Что будем автоматизировать?

Мы собираемся автоматизировать сайт Интернет. Выполняя автоматизацию, мы вместе решаем проблемы/вызовы.

Давайте начнем!

Предпосылки

  • Node с NPM (я использую Node v7.1.0 и npm v3.10.9)
  • (Необязательно) Yarn (я использую Yarn v0.17.6)
  • Браузер Chrome (у меня версия Chrome 57.0)

Образец кода

Это необязательный шаг. Пример, который мы увидим в этой статье, доступен на github. Следуйте инструкциям по клонированию и запуску:

git clone https://github.com/email2vimalraj/nightwatch-example.git cd nightwatch-example yarn

Настраивать

Создайте каталог:

mkdir nightwatch-example cd nightwatch-example

Запустите проект node js, используя:

yarn init

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

Установите NightwatchJS как зависимость от разработчиков, используя:

yarn add --dev nightwatch

Конфигурация

Средство выполнения тестов Nightwatch использует файл json, который используется в качестве конфигурации для средства выполнения тестов.

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

Давайте создадим следующий файл nightwatch.json в корневом каталоге проекта:

{
  "src_folders": ["tests"],
  "output_folder": "reports",

  "test_settings": {
    "default": {
      "launch_url": "http://the-internet.herokuapp.com/",
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    }
  }
}

src_folder — будет содержать список папок, в которых находятся тестовые скрипты. В этом примере мы будем хранить все наши тесты в каталоге tests.

output_folder — эта конфигурация позволяет размещать сгенерированные отчеты в указанном каталоге. Здесь отчеты будут создаваться в каталоге reports.

test_settings — здесь будут содержаться все настройки, связанные с тестированием, другими словами, у нас могут быть настройки для каждой отдельной среды. Значение по умолчанию является обязательным и используется в тестах по умолчанию.

launch_url — позволяет определить URL-адрес по умолчанию, который мы используем для автоматизации. Далее мы рассмотрим, как мы используем эту настройку.

желаемые возможности — это желаемая конфигурация возможностей веб-драйвера. Здесь мы используем Chrome в качестве браузера по умолчанию для нашей автоматизации.

Настройка драйвера Chrome

Есть два способа настроить Chromedriver для автоматизации в браузере Chrome. — Использование Selenium Server (требуется Java)

– Использование Standalone (без зависимости от Java)

В этом примере мы будем использовать автономное использование, поскольку оно не зависит от Java. Но для этого требуется одноразовая настройка. Давайте установим пакет npm ChromeDriver:

yarn add --dev chromedriver

Затем отключите сервер селена в файле nightwatch.json, добавив в конец следующую конфигурацию:

"selenium": { "start_process": false },

Затем в конфигурации test_settings нам нужно настроить порт и хост selenium, поскольку порт по умолчанию, используемый chromedriver, — 9515. Обновим конфигурацию test_settings:

"selenium_port": 9515, "selenium_host": "localhost", "default_path_prefix": ""

Нам нужно очистить префикс_пути_по_умолчанию, так как по умолчанию он установлен на /wd/hub, а chromedriver этого не требует.

Создайте глобальный файл драйвера Chrome

Глобальный файл — это файл js, который будет загружен исполнителем теста и станет доступным для теста. Мы будем использовать этот файл для запуска chromedriver перед запуском теста и выхода из chromedriver после того, как тест завершит свое выполнение.

Давайте создадим файл с именем chromedriver.global.js:

var chromedriver = require('chromedriver');

module.exports = {
  before: function (done) {
    chromedriver.start();
    done();
  },

  after: function (done) {
    chromedriver.stop();
    done();
  }
};

Теперь нам нужно загрузить этот файл через файл конфигурации. Добавьте следующую конфигурацию в конец файла nightwatch.json:

"globals_path": "./chromedriver.global.js"

Теперь наш nightwatch.json должен выглядеть так:

{
  "src_folders": ["tests"],
  "output_folder": "reports",

  "selenium": {
    "start_process": false
  },

  "test_settings": {
    "default": {
      "launch_url": "http://the-internet.herokuapp.com/",
      "selenium_port": 9515,
      "selenium_host": "localhost",
      "default_path_prefix": "",
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    }
  },

  "globals_path": "./chromedriver.global.js"
}

Создадим наш первый тест

Давайте создадим файл HomeTest.js в каталоге tests:

module.exports = {

  "Test Home Page": function (client) {
    client.init();
    client.waitForElementVisible("body", 1000);
    client.assert.title("The Internet");
    client.expect.element(".heading").text.to.equal("Welcome to the Internet");
    client.end();
  }

};

Каждый файл в каталоге tests считается набором тестов. Здесь в HomeTest.js мы создали один тест под названием Test Home Page. Каждая тестовая функция будет иметь один параметр, который содержит экземпляр веб-драйвера. Здесь мы вызываем этот экземпляр как client. Доступ ко всем командам веб-драйвера ночного дозора осуществляется через этот экземпляр.

client.init() запустит браузер с URL-адресом, настроенным в свойстве launch_url в nightwatch.json. В нашем случае он откроет браузер Chrome и запустит http://the-internet.herokuapp.com/.

Затем он будет ждать, пока тег body станет видимым, максимум 1 секунду.
После этого мы утверждаем, что заголовок равен Интернет. Затем мы ожидаем, что элемент с атрибутом класса .heading и с текстом будет равен Добро пожаловать в Интернет.

client.end() является обязательным для закрытия экземпляра браузера и остановки экземпляра сервера selenium.

Давайте выполним наш первый тест. Выключите терминал/командную строку и выполните тест следующим образом:

./node_modules/.bin/nightwatch

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

[Home Test] Test Suite
==========================

Running:  Test Home Page
 ✔ Element <body> was visible after 44 milliseconds.
 ✔ Testing if the page title equals "The Internet".
 ✔ Expected element <.heading> text to equal: "Welcome to the Internet"

OK. 3 assertions passed. (20.669s)

Отлично, мы успешно создали наш тест и выполнили его. Добавим еще один тест:

module.exports = {

  "Test Home Page": function (client) {
    client.init();
    client.waitForElementVisible("body", 1000);
    client.assert.title("The Internet");
    client.expect.element(".heading").text.to.equal("Welcome to the Internet");
  },

  "Navigate to Broken Images page": function (client) {
    client.click("a[href='/broken_images']");
    client.expect.element(".example > h3").text.to.equal("Broken Images");
    client.end();
  }

};

Здесь мы добавили еще один тест под названием Перейти к странице с неработающими изображениями, в котором мы переходим на страницу Неработающие изображения и подтверждаем заголовок.
Обратите внимание, что мы удалили client.end() из первого теста и переместил его во второй тест.

Выполните снова и посмотрите, как выполняются оба ваших теста.

Наконец, у нас есть два теста, которые успешно выполняются.

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

P.S. Если вам понравился этот пост, смело рекомендуйте его.

Первоначально опубликовано на www.vimalselvam.com 7 мая 2017 г.