Пошаговое руководство. Создание простого теста Cucumber.js

В этом пошаговом руководстве будут созданы базовые тестовые сценарии, основанные на поведении, с использованием CukeTest:

Создайте файл корнишона (или функции) и внедрите код
Запустите скрипт и получите html отчет
Преобразование теста в управляемый данными
Используйте теги для фильтрации пробега

Ниже приведены шаги.

1. Новый проект

Нажмите на [New Project] на панели инструментов, чтобы открыть диалоговое окно «Новый проект».
В поле «Имя проекта» введите «BasicTest». Для «Шаблона проекта» выберите «Основной». «Путь к проекту» выберите папку для размещения вашего скрипта, нажмите «ОК». CukeTest создаст для вас новый проект.

2. Отредактируйте файл корнишона

2.1 Изменить название и описание функции

Когда проект будет создан с помощью описанного выше шага, файл feature1.feature будет открыт автоматически.

Нажмите Visual кнопка то файл функции можно изменить в представлении «Визуальный», который выглядит следующим образом:

Чтобы добавить имя и описание функции:

Дважды щелкните Имя функции, чтобы сделать его доступным для редактирования, введите «Добавление».
Нажмите клавишу «Ввод», вы перейдете к следующему полю, которое является полем «Описание функции», заполните поле примерно так:

Verify calculator functionalities

Теперь наш файл функций выглядит так:

2.2 Добавить сценарий

Выполните следующие шаги, чтобы создать сценарий:

Дважды щелкните заголовок сценария, поле «Имя сценария» теперь доступно для редактирования, измените его на «Сложение двух чисел»;
Нажмите клавишу «Ввод», и фокус переместится на следующее поле, которое является первым шагом, выберите «Дано» из раскрывающегося списка и измените его текст на «У меня есть число 6 в калькуляторе»;
Выполните указанные выше шаги, чтобы добавить все остальные шаги. Чтобы добавить новые шаги, вы также можете нажать «Ввод», чтобы переместить фокус на кнопку «Добавить шаг», и снова нажать «Ввод», или просто нажать эту кнопку:

После завершения операции сценарий должен выглядеть следующим образом:

Вышеуказанные шаги выполняются в режиме «Визуальный» редактора функций, вы можете нажать кнопку «Текст». чтобы переключиться в режим «Текст», а содержимое feature1.feature должно быть:

Feature: Addition
  Verify calculator functionalities

  Scenario: Addition of two numbers
    Given I have number 6 in calculator
    When I entered number 7
    Then I should see result 13

Вы также можете отредактировать файл функции в режиме «Текст», а затем переключиться в режим «Визуальный», это будет иметь тот же эффект.

3. Внедрить автоматизацию

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

3.1 Создание заглушек кода

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

Откройте step_definitions/definitions1.js на правой панели и убедитесь, что файл функции открыт на левой панели в режиме «Визуальный». Нажмите серую кнопку справа от каждого шага:
заглушки кода определения шага будут сгенерированы в step_definitions/definitions1.js:
Повторите шаг 1 для остальных шагов, определенных в сценарии, чтобы создать для них заглушки.
Создайте новый файл «env.js» в каталоге «features/support» и заполните следующее содержимое:
```
const { setWorldConstructor } = require('cucumber')

class CustomWorld {
  constructor() {
    this.variable = 0
  }
  
  setTo(number) {
    this.variable = number
  }
  
  incrementBy(number) {
    this.variable += number
  }
}

setWorldConstructor(CustomWorld)
```
В этом файле пользовательский Мир Объект определен и используется для управления «переменным» элементом, который предназначен для хранения текущего расчета.
«env.js» можно разместить где угодно, если он находится в каталоге «features». Каталог «поддержка» — это всего лишь рекомендация от команды огурцов.

Обновите файл step_definitions/definitions1.js, чтобы добавить реализацию к каждому только что добавленному заглушке определения шага. Код будет следующим:

const { Given, When, Then } = require('cucumber');
const assert = require('assert')


Given(/^I have number (\d+) in calculator$/, async function (num) {
    this.setTo(num);
});

When(/^I entered number (\d+)$/, async function (num) {
    this.incrementBy(num);
});

Then(/^I should see result (\d+)$/, async function (result) {
    assert.equal(this.variable, parseInt(result));
});

3.2 Проверка и запуск проекта

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

Нажмите «Проверить проект На панели «Вывод» вы можете увидеть результаты проверки, они должны выглядеть следующим образом:
На панели инструментов нажмите кнопку «Запустить проект».он запустит скрипт и сгенерирует тестовый отчет.

Мы видим, что в отчете есть как сводная часть, так и детализированная часть, которая показывает каждый сценарий и детали выполнения шага.

4. Сделайте сценарий управляемым данными

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

Здесь вы можете сделать это в режиме «Визуальный» или «Текстовый». Мы выбираем «Визуальный» вид, так как он более удобен.

Щелкните значок в названии сценария.или просто щелкните правой кнопкой мыши заголовок сценария, вы получите всплывающее меню для сценария, выберите «Изменить тип сценария» — «Схема сценария».
сценарий изменен на следующий, который теперь имеет примерную таблицу:
вы можете заметить, что тип сценария в заголовке — «Схема сценария», а числовые параметры автоматически извлекаются в таблицу.
Имя параметра «param1», «param2» не столь описательно, мы изменим имена параметров на что-то более описательное. Теперь дважды щелкните заголовок таблицы, и он станет доступным для редактирования, измените имена параметров, чтобы они были осмысленными именами.
Кроме того, обновите имена параметров в шагах, чтобы они совпадали с заголовками таблицы примеров.
Вы можете использовать клавишу «tab» или «shift-tab» для перемещения вперед и назад между редактируемыми ячейками, а также вы можете сделать то же самое в теле таблицы для обновления ячеек данных.
Обновите таблицу данных, добавив больше строк. Вы можете дважды щелкнуть в любом месте тела таблицы, чтобы начать редактирование. Затем нажмите «Tab» или «Shift-Tab» для навигации. Если вы находитесь в последней ячейке и снова нажимаете вкладку, создается новая строка, и вы можете редактировать данные новой строки.
Кроме того, вы можете щелкнуть таблицу правой кнопкой мыши, чтобы экспортировать ее в файл CSV, отредактировать ее в другом месте, например в Excel, а затем импортировать обратно. Также имейте в виду, что в одной схеме сценария может быть несколько таблиц примеров, поэтому вы можете импортировать несколько таблиц в схему сценария.
После редактирования ваша схема сценария выглядит следующим образом:

Или в представлении «Текст» текст должен быть похож на следующий:


  Scenario Outline: Addition Test
    Given I have number <operand1> in calculator
    When I entered number <operand2>
    Then I should see result <result>
    Examples: 
      | operand1 | operand2 | result |
      | 0        | 0        | 0      |
      | 0        | 1        | 1      |
      | 10       | 5        | 15     |
      | 320      | 45       | 365    |

При повторном запуске этого отчета вы получите следующий отчет:

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

5. Настройте запуск профиля

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

Дважды щелкните область над «Структурой сценария», чтобы изменить теги для этого сценария:
Добавьте новый тег с именем «математика» и щелкните в другом месте, тег будет добавлен. Каждый тег начинается с «@», если вы не добавите этот символ, редактор добавит его за вас.
Переключитесь на вид «Текст», отредактируйте схему сценария, чтобы добавить следующий текст (строки в красных кругах).
Обратите внимание, что мы разделили таблицу примеров на две таблицы, каждая из которых имеет тег. Помните, что мы можем добавлять теги в таблицы функций, сценариев или примеров, чтобы фильтровать их. Для получения дополнительной информации о теге вы можете прочитать Знакомство с тегами, сценарием, схемами сценария, фоном.
Нажмите стрелку вниз рядом с кнопкой «Выполнить проект», а затем выберите «Редактировать профили…»:
Откроется диалоговое окно «Профили запуска», вы также можете открыть диалоговое окно с меню «Выполнить» -> «Редактировать профили запуска».
В этом диалоговом окне нажмите «Создать профиль», чтобы создать новый профиль. В этом профиле введите «@math и @extended» в поле «Теги фильтра».
Нажмите «ОК», чтобы закрыть диалоговое окно.
Теперь снова нажмите стрелку вниз и выберите «Profile1», который только что создан, он запустит проект с введенным вами фильтром тегов.
Из отчета о тестировании видно, что запускаются только данные сценариев, соответствующие тегам «@math» и «@extended», что означает, что фильтрация вступает в силу.