Рубрики
Без рубрики

Тестирование E2E с Nightwatch: часть вторая

Прочитайте часть двух тестирования e2e и используя файлы Globals.js с nightwatch.js.

Автор оригинала: John Kennedy.

Добро пожаловать во вторую часть тестирования E2E с учебником Nightwatch. В этой части мы будем писать фактические тесты для Rect tomvc приложение Отказ Прочитайте первую часть здесь Отказ

Эта часть заимствует от тестов на g00glen00b Отказ Вы можете найти исходный код здесь Отказ

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

В корте каталога проекта создайте новый каталог, называемый «|» Тесты Отказ Это имя папки соответствует src_folders Значение свойств в Nightwatch.json файл. В Nightwatch все тесты являются модулями Node.js.

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

module.exports = {
  'Does not show the task list if there are no tasks'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .expect.element('.main').to.not.be.present;
    client.end();
  },
  'Does not show the footer if there are no tasks'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .expect.element('.footer').to.not.be.present;
    client.end();
  },
}

Во-первых, давайте перейдем на страницу приложения и подождите, пока просмотр представления, ожидая заголовка на этой странице, .Header H1 Отказ Когда это загрузка, давайте тестируемся, чтобы увидеть, если элемент с классом .main существует (что не должно существовать, если нет задач). Давайте назовем конец () Способ и сказать ему, чтобы закрыть текущий браузер.

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

В Nightwatch вы можете решить выбрать Чай Assert или ожидать Стиль утверждений. Мы не используем Assert Стиль здесь, поэтому нам не нужно цеплять конец () метод как ожидать Утверждение в настоящее время не поддерживает цепочки методов. Это полностью зависит от вас, какой стиль утверждения вы выбираете, самое главное, что вы согласуетесь.

Второй тест похож на первый. На этот раз это тестирование, если элемент с классом .footer существуют.

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

'On page load, it sets focus on the input field'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .assert.elementPresent('.header .new-todo:focus')
      .end();
  },

С ElementPresent () Мы можем проверить, существует ли элемент. Это не должно быть видно.

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

'When I add a task, it shows todo items'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .setValue('.new-todo', 'New task')
      .keys(client.Keys.ENTER)
      .assert.containsText('.todo-list li:first-child label', 'New task')
      .end();
  },

Первые несколько строк остаются прежними, но с setValue () , мы устанавливаем значение в поле ввода с классом Нью-Тодо Отказ После этого мы отправляем его, нажав Введите Ключ с использованием Клавиши (Client.keys.enter) и проверка, если .todo-list Имеет элемент с меткой с тем же текстом, что и значение, которое мы ввели ранее.

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

'Marks a todo item as completed by striking through it'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .setValue('.new-todo', 'New task')
      .keys(client.Keys.ENTER)
      .click('.todo-list li:first-child .toggle')
      .assert.cssClassPresent('.todo-list li:first-child', 'completed')
      .end();
  },

Мы действительно не проверили, есть ли в тексте, но мы проверили, если Завершено класс присутствует. CSS для этого класса обеспечивает линию через текст. Чтобы проверить элемент, мы использовали Нажмите () API, чтобы нажать на сам флажок.

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

Для этого мы просто добавляем задачи и завершили их, а затем проверьте, если число меняется соответствующим образом:

'Shows how many items there are left'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .setValue('.new-todo', 'New task')
      .keys(client.Keys.ENTER)
      .setValue('.new-todo', 'Another task')
      .keys(client.Keys.ENTER)
      .assert.containsText('.todo-count', '2 items left')
      .click('.todo-list li:first-child .toggle')
      .assert.containsText('.todo-count', '1 item left')
      .end();
  },

Здесь ничего нового. Мы добавили два элемента, проверены, если текстовые совпадения 2 предмета осталось ' Затем завершил задачу и проверено, если есть только «1 предмет, оставленный» Отказ

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

'Does not add empty or blank tasks'(client) {
    client
      .url('http://todomvc.com/examples/react/#/')
      .waitForElementVisible('.header h1')
      .setValue('.new-todo', 'New task')
      .keys(client.Keys.ENTER)
      .keys(client.Keys.ENTER)
      .setValue('.new-todo', '  ')
      .keys(client.Keys.ENTER)
      .assert.containsText('.todo-count', '1 item left')
      .end();
  }

То, что мы сделали здесь, ничто новое. Мы добавили правильную задачу, попытались отправить форму, не входя в новое значение, ввел несколько пробелов и попытался снова отправиться. В ни одного из этих случаев не следует добавить задачу. Следует только один элемент – первый, и действительный, задача, которую мы добавили.

Глобальная конфигурация

Команды Nightwatch, как WaitchereLementSitible () Или утверждения требуют, чтобы параметр тайм-аута будет передан в элемент, чтобы тест бросал ошибку при достижении ограничения времени ожидания. Обычно WaitchereLementSitible () Метод выглядит так:

withyslementfisisible (‘@ Anelement’, 3000)

3000 – количество миллисекунд, после чего тест бросает элемент не видимым исключением. К счастью, мы можем перемещать это значение за пределами теста, чтобы код был очистителем. Для этого создайте Globals.js Файл в корне в каталоге проекта и вставьте этот код:

export default {  
  waitForConditionTimeout: 10000
};

После этого отредактируйте Nightwatch.json Конфигурация файла смена Globals_Path: "" к Globals_Path: «Глобалы» Отказ Теперь все методы NightWatch, которые требуют тайм-аута, будут иметь этот глобальный десять второй тайм-аута, указанный в качестве по умолчанию. Вы все еще можете определить специальный тайм-аут для одной вызовы, если это необходимо.

Бегущие тесты

Это оно! Все, что осталось сделать, это запустить тест. В терминале перейдите к корневому каталогу ваших проектов и введите эту команду:

NPM Test или Тест пряжи

Во всем настроенном правильно, вы должны увидеть выходной консольный, аналогичный этому:

Starting selenium server... started - PID:  30647

[Overview Spec] Test Suite
==============================

Running:  Does not show the task list if there are no tasks
 ✔ Element <.header h1> was visible after 84 milliseconds.
 ✔ Expected element <.main> to not be present - element was not found in 40ms.

OK. 2 assertions passed. (8.655s)

Running:  Does not show the footer if there are no tasks
 ✔ Element <.header h1> was visible after 577 milliseconds.
 ✔ Expected element <.footer> to not be present - element was not found in 25ms.

OK. 2 assertions passed. (3.731s)

Running:  On page load, it sets focus on the input field
 ✔ Element <.header h1> was visible after 573 milliseconds.
 ✔ Testing if element <.header .new-todo:focus> is present.

OK. 2 assertions passed. (4.36s)

Running:  When I add a task, it shows todo items
 ✔ Element <.header h1> was visible after 563 milliseconds.
 ✔ Testing if element <.todo-list li:first-child label> contains text: "New task".

OK. 2 assertions passed. (4.812s)

Running:  Marks a todo item as completed by striking through it
 ✔ Element <.header h1> was visible after 561 milliseconds.
 ✔ Testing if element <.todo-list li:first-child> has css class: "completed".

OK. 2 assertions passed. (4.808s)

Running:  Shows how many items there are left
 ✔ Element <.header h1> was visible after 1599 milliseconds.
 ✔ Testing if element <.todo-count> contains text: "2 items left".
 ✔ Testing if element <.todo-count> contains text: "1 item left".

OK. 3 assertions passed. (6s)

Running:  Does not add empty or blank tasks
 ✔ Element <.header h1> was visible after 562 milliseconds.
 ✔ Testing if element <.todo-count> contains text: "1 item left".

OK. 2 assertions passed. (4.858s)

OK. 15  total assertions passed. (37.525s)

Резюме

В этом руководстве вы узнали, как Создайте сквозной тест и используйте Globals.js Файл Отказ Следуйте для следующей части, где я бы представил Nightwatch Страницы !

Обновлять:

Часть три на страницах Nightwatch.js здесь.

Пожалуйста, нажмите кнопку «Нравится», если вы найдете эту статью полезную. Следуй за мной в Twitter @Codejockie

Читайте ещё по теме: