Интеграционное тестирование

Для работы с Driver.js необходимо установить библиотеку через npm или подключить через CDN. При использовании npm выполняется команда:

npm install driver.js

После установки импортируется основной модуль и стили:

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

Если используется CDN, подключение осуществляется через ссылки на CSS и JS файлы:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js/dist/driver.min.css">
<script src="https://cdn.jsdelivr.net/npm/driver.js/dist/driver.min.js"></script>

Инициализация Driver.js

Создание экземпляра Driver выполняется через конструктор. Основной объект конфигурации позволяет задать глобальные параметры для всей сессии подсказок:

const driver = new Driver({
    allowClose: false,         // запрещает закрытие по клику вне подсказки
    overlayClickNext: true,    // позволяет переходить к следующему шагу по клику на затемнённую область
    animate: true,             // анимация появления подсказок
    opacity: 0.75,             // прозрачность оверлея
    padding: 10,               // отступ подсказки от элемента
});

Настройка шагов тура

Каждый шаг тура определяется объектом с ключевыми свойствами: element, popover, position и stageBackground. Пример полной конфигурации шагов:

const steps = [
    {
        element: '#button1',
        popover: {
            title: 'Кнопка запуска',
            description: 'Нажмите эту кнопку, чтобы начать процесс.',
            position: 'bottom'
        }
    },
    {
        element: '#menu',
        popover: {
            title: 'Главное меню',
            description: 'Здесь доступны все основные функции приложения.',
            position: 'right'
        }
    },
    {
        element: '#form-input',
        popover: {
            title: 'Поле ввода',
            description: 'Введите текст для поиска.',
            position: 'top'
        }
    }
];

После создания шагов их передают в объект Driver.js и запускают:

driver.defineSteps(steps);
driver.start();

Управление навигацией

Driver.js поддерживает методы для управления ходом тура:

  • driver.start() – запуск тура с первого шага.
  • driver.moveNext() – переход к следующему шагу.
  • driver.movePrevious() – возвращение к предыдущему шагу.
  • driver.stop() – завершение тура.
  • driver.reset() – сброс состояния всех шагов.

Можно привязать события к шагам через onNext, onPrevious, onReset и onHighlightStarted:

driver.onNext(() => {
    console.log('Пользователь перешел к следующему шагу');
});

driver.onHighlightStarted(() => {
    console.log('Элемент подсвечен');
});

Позиционирование подсказок

Driver.js предоставляет девять стандартных позиций для подсказок относительно элемента:

  • top, top-left, top-right
  • bottom, bottom-left, bottom-right
  • left, right, center

Для более точной настройки можно использовать кастомные смещения через свойства offset внутри popover:

popover: {
    title: 'Поле поиска',
    description: 'Введите ключевое слово',
    position: 'bottom',
    offset: 15
}

Подсветка элементов и оверлей

Эффект подсветки управляется CSS-классами и параметрами Driver.js. Глобальная прозрачность задаётся в конфигурации через opacity, а подсветка конкретного элемента — через stageBackground:

{
    element: '#important-element',
    stageBackground: 'rgba(255, 0, 0, 0.3)'
}

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

Интеграция с динамическим контентом

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

setTimeout(() => {
    driver.start();
}, 500); // запуск после появления элементов

Если элементы создаются в процессе выполнения сценариев, необходимо убедиться, что element существует в DOM до вызова defineSteps().

Кастомизация внешнего вида

Driver.js позволяет изменять стили подсказок через CSS-переменные и классы:

.driver-popover {
    background-color: #222;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
}
.driver-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

Для изменения стрелок, кнопок и заголовков используется наследование классов .driver-arrow, .driver-close-btn и .driver-header.

Использование с тестами и автоматизацией

Driver.js удобно интегрировать с функциональными и интеграционными тестами. Для тестов можно:

  • Проверять наличие элементов перед подсветкой.
  • Управлять шагами тура через программные вызовы moveNext() и movePrevious().
  • Сохранять состояние посещённых шагов в локальном хранилище, чтобы тесты не дублировались.

Пример использования в тестовом сценарии:

driver.defineSteps(testSteps);
driver.start();
driver.onHighlightStarted((element) => {
    expect(element).toBeVisible();
});

Работа с мультиязычностью

Для поддержки разных языков в интерфейсе подсказок используют динамическое формирование текста popover:

const lang = 'ru';
const steps = [
    {
        element: '#login-button',
        popover: {
            title: translations[lang].loginTitle,
            description: translations[lang].loginDescription,
            position: 'bottom'
        }
    }
];

Это позволяет создавать единый код для разных локалей без дублирования шагов.

Продвинутые возможности

  • События окончания тура – onReset и onStop позволяют запускать дополнительные действия после завершения.
  • Условные шаги – можно изменять набор шагов в зависимости от состояния приложения.
  • Совмещение с анимацией DOM – Driver.js корректно отображает подсказки даже при переходах и анимации элементов.

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

Оглавление