Cucumber/Gherkin поддержка

WebdriverIO предоставляет мощную поддержку для BDD (Behavior Driven Development) через интеграцию с Cucumber и синтаксисом Gherkin, позволяя писать тесты в удобной, человекочитаемой форме. Такой подход упрощает понимание тестов и делает их более поддерживаемыми, особенно в больших проектах.

Установка и настройка

Для работы с Cucumber в WebdriverIO требуется установить несколько пакетов:

npm install @wdio/cli @wdio/local-runner @wdio/cucumber-framework @wdio/spec-reporter @wdio/sync
npm install cucumber --save-dev

После установки необходимо инициализировать WebdriverIO с поддержкой Cucumber:

npx wdio config

При выборе test framework нужно указать cucumber. Также потребуется выбрать reporter и указать путь к feature файлам.

Конфигурационный файл wdio.conf.js должен содержать следующие ключевые моменты:

exports.config = {
    framework: 'cucumber',
    reporters: ['spec'],
    cucumberOpts: {
        require: ['./features/step-definitions/**/*.js'], // путь к step definitions
        backtrace: true,
        requireModule: [],
        dryRun: false,
        failFast: false,
        format: ['pretty'],
        colors: true,
        snippets: true,
        source: true,
        profile: [],
        strict: false,
        tagExpression: '',
        timeout: 60000,
        ignoreUndefinedDefinitions: false
    },
    specs: [
        './features/**/*.feature'
    ],
};

Синтаксис Gherkin

Файлы .feature используют язык Gherkin, который базируется на ключевых словах:

  • Feature — описание функциональности.
  • Scenario — отдельный тест-кейс.
  • Given / When / Then / And / But — шаги сценария, отражающие условия, действия и ожидаемый результат.

Пример структуры:

Feature: Авторизация пользователя

  Scenario: Успешный вход
    Given пользователь находится на странице входа
    When пользователь вводит корректные логин и пароль
    Then пользователь видит домашнюю страницу

Step Definitions

Каждый шаг из .feature файла должен быть реализован в step definition файле на JavaScript. WebdriverIO предоставляет объект browser и цепочку команд для взаимодействия с веб-элементами.

Пример:

const { Given, When, Then } = require('@wdio/cucumber-framework');

Given('пользователь находится на странице входа', async () => {
    await browser.url('/login');
});

When('пользователь вводит корректные логин и пароль', async () => {
    const usernameInput = await $('#username');
    const passwordInput = await $('#password');
    const loginButton = await $('#login-button');

    await usernameInput.setValue('testuser');
    await passwordInput.setValue('password123');
    await loginButton.click();
});

Then('пользователь видит домашнюю страницу', async () => {
    const homeTitle = await $('h1');
    await expect(homeTitle).toHaveText('Добро пожаловать');
});

Особенности WebdriverIO с Cucumber:

  • Поддержка асинхронных команд через async/await.
  • Легкая интеграция с Page Object Model.
  • Возможность использования тегов для запуска определённых сценариев.

Page Object Model с Cucumber

Для структурирования тестов рекомендуется использовать Page Object Model. Класс страницы инкапсулирует элементы и действия:

class LoginPage {
    get username() { return $('#username'); }
    get password() { return $('#password'); }
    get loginButton() { return $('#login-button'); }

    async open() {
        await browser.url('/login');
    }

    async login(user, pass) {
        await this.username.setValue(user);
        await this.password.setValue(pass);
        await this.loginButton.click();
    }
}

module.exports = new LoginPage();

Step Definition с использованием Page Object:

const { Given, When, Then } = require('@wdio/cucumber-framework');
const LoginPage = require('../pages/LoginPage');

Given('пользователь находится на странице входа', async () => {
    await LoginPage.open();
});

When('пользователь вводит корректные логин и пароль', async () => {
    await LoginPage.login('testuser', 'password123');
});

Then('пользователь видит домашнюю страницу', async () => {
    const homeTitle = await $('h1');
    await expect(homeTitle).toHaveText('Добро пожаловать');
});

Теги и фильтрация сценариев

Cucumber поддерживает теги, позволяя запускать только часть сценариев:

@smoke
Scenario: Успешный вход
  Given пользователь находится на странице входа
  When пользователь вводит корректные логин и пароль
  Then пользователь видит домашнюю страницу

Запуск с тегом через CLI:

npx wdio run wdio.conf.js --cucumberOpts.tagExpression="@smoke"

Параметризованные сценарии

Gherkin позволяет использовать Scenario Outline для повторного использования шагов с разными данными:

Scenario Outline: Неверный вход
  Given пользователь находится на странице входа
  When пользователь вводит логин "<username>" и пароль "<password>"
  Then отображается сообщение об ошибке

  Examples:
    | username   | password    |
    | testuser1  | wrongpass1 |
    | testuser2  | wrongpass2 |

Step Definition с параметрами:

When('пользователь вводит логин {string} и пароль {string}', async (username, password) => {
    await LoginPage.login(username, password);
});

Репорты и логирование

WebdriverIO с Cucumber поддерживает различные форматы отчётов:

  • spec — консольный вывод.
  • allure — детализированные HTML-отчёты с шагами и скриншотами.
  • cucumber-json — JSON для интеграции с CI/CD.

Пример добавления Allure:

reporters: [
    'spec',
    ['allure', { outputDir: 'allure-results', disableWebdriverStepsReporting: false }]
]

Асинхронность и ожидания

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

const loginButton = await $('#login-button');
await loginButton.waitForClickable({ timeout: 5000 });
await loginButton.click();

Это уменьшает вероятность flaky tests и делает сценарии более стабильными.

Интеграция с CI/CD

  • WebdriverIO + Cucumber легко интегрируется с Jenkins, GitHub Actions, GitLab CI.
  • Использование --cucumberOpts.tagExpression позволяет запускать только критичные тесты для pull request.
  • Генерация Allure-отчётов предоставляет наглядную статистику прохождения тестов.

Эта связка WebdriverIO + Cucumber + Gherkin позволяет создавать масштабируемые и читаемые тесты, объединяя преимущества BDD и мощного взаимодействия с браузером через WebdriverIO.

Оглавление