E2E тестирование туров

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

npm install driver.js

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

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

Для CDN:

<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>

После подключения можно создавать экземпляр Driver и настраивать его параметры.

Создание и конфигурация тура

Экземпляр Driver создаётся с объектом конфигурации, который определяет поведение всех шагов тура:

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

Каждый шаг тура задаётся методом defineSteps и содержит ссылку на элемент, заголовок и описание:

driver.defineSteps([
    {
        element: '#menu-button',
        popover: {
            title: 'Меню',
            description: 'Кнопка открытия главного меню приложения',
            position: 'bottom'
        }
    },
    {
        element: '#profile-link',
        popover: {
            title: 'Профиль пользователя',
            description: 'Переход к личным настройкам',
            position: 'left'
        }
    }
]);

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

Driver.js позволяет задавать позицию подсказки относительно элемента: top, bottom, left, right, а также auto, чтобы библиотека автоматически выбирала оптимальное место. Для адаптивных интерфейсов рекомендуется использовать auto, что предотвращает выход подсказки за границы окна.

position: 'auto'

Для мобильных устройств можно использовать медиа-запросы в CSS для корректировки стилей оверлея и поповера, либо динамически менять размеры и отступы через JavaScript.

Взаимодействие и кастомизация

Driver.js поддерживает переход к следующему шагу кликом на подсказку или кнопку:

driver.start(); // запуск тура

driver.on('next', (step) => {
    console.log('Переход к следующему шагу:', step);
});

driver.on('close', () => {
    console.log('Тур завершён');
});

Кнопки в подсказках можно кастомизировать через CSS или использовать встроенные:

popover: {
    title: 'Элемент',
    description: 'Описание шага',
    buttons: [
        { text: 'Назад', action: driver.previous },
        { text: 'Далее', action: driver.next },
        { text: 'Закрыть', action: driver.close }
    ]
}

Использование в E2E тестировании

Driver.js часто интегрируют в автоматизированные E2E тесты для проверки корректности отображения и поведения интерфейса при интерактивных турах. Пример с Cypress:

describe('Тур интерфейса', () => {
    it('должен пройти все шаги тура', () => {
        cy.visit('/dashboard');
        cy.window().then((win) => {
            const driver = new win.Driver({
                animate: false,
                opacity: 0
            });

            driver.defineSteps([
                { element: '#menu-button', popover: { title: 'Меню', description: '' } },
                { element: '#profile-link', popover: { title: 'Профиль', description: '' } }
            ]);

            driver.start();

            cy.get('#menu-button').should('exist');
            cy.get('#profile-link').should('exist');

            driver.next();
            cy.get('#profile-link').should('be.visible');
        });
    });
});

Основные задачи при E2E тестировании тура:

  • Проверка наличия всех элементов, упомянутых в шаге.
  • Проверка корректного отображения подсказок и их позиции.
  • Проверка интерактивности кнопок “Далее”, “Назад”, “Закрыть”.
  • Анимация и оверлей отключаются для ускорения тестов.

Асинхронная загрузка элементов

Если элементы появляются динамически после загрузки страницы, рекомендуется использовать wait или проверку через MutationObserver:

const observer = new MutationObserver(() => {
    if (document.querySelector('#dynamic-element')) {
        driver.start();
        observer.disconnect();
    }
});

observer.observe(document.body, { childList: true, subtree: true });

Это гарантирует, что тур не начнётся до появления всех необходимых элементов.

Локализация и стилизация

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

driver.defineSteps([
    {
        element: '#menu-button',
        popover: {
            title: i18n.t('menu.title'),
            description: i18n.t('menu.description'),
            position: 'bottom'
        }
    }
]);

Стилизация осуществляется через CSS-классы .driver-target для элементов и .driver-popover для подсказок. Можно менять цвета, шрифты, размеры, а также добавлять кастомные анимации.

Расширенные возможности

  • Множественные туры на одной странице: можно создавать несколько экземпляров Driver с разными наборами шагов.
  • Программное управление: методы start(), next(), previous(), reset() позволяют управлять туром из кода.
  • События: driver.on('eventName', callback) для интеграции с логикой приложения или тестами.
  • Динамическое добавление шагов: driver.defineSteps([...]) можно вызывать после старта, чтобы добавлять новые шаги.

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

Оглавление