Проверка установки

После подключения библиотеки Driver.js важно убедиться, что она корректно интегрирована в проект. Существует несколько способов проверить установку, в зависимости от того, как библиотека была подключена — через CDN или через пакетный менеджер npm/yarn.

Проверка через консоль браузера

Если Driver.js подключён через <script> тег, следует открыть консоль разработчика в браузере и выполнить команду:

Driver

Если библиотека установлена корректно, консоль должна отобразить объект с методами, такими как highlight, defineSteps, start и другими. Отсутствие объекта или ошибка ReferenceError: Driver is not defined свидетельствует о том, что библиотека не загружена или путь к скрипту указан неверно.

Проверка установки через npm/yarn

При установке через npm или yarn необходимо убедиться, что пакет появился в node_modules. После этого в JavaScript-файле можно импортировать Driver.js следующим образом:

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

Если импорт прошёл успешно, объект Driver будет доступен для создания экземпляров и настройки шагов подсказки.

Создание минимального тестового примера

Для проверки работы Driver.js создаётся простой пример с подсветкой одного элемента на странице. В HTML добавляется элемент с уникальным идентификатором:

<button id="test-button">Нажми меня</button>

В JS создаётся экземпляр драйвера и определяется шаг подсказки:

const driver = new Driver({
    animate: true,
    opacity: 0.75
});

driver.defineSteps([
    {
        element: '#test-button',
        popover: {
            title: 'Кнопка теста',
            description: 'Эта кнопка используется для проверки работы Driver.js.',
            position: 'bottom'
        }
    }
]);

driver.start();

При корректной установке и подключении CSS кнопка будет подсвечена с появлением поповера с описанием.

Проверка корректности CSS

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

<link rel="stylesheet" href="node_modules/driver.js/dist/driver.min.css">

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

Отладка проблем с установкой

  • Элемент не подсвечивается: убедиться, что селектор в defineSteps соответствует существующему элементу DOM.
  • Поповер не отображается: проверить наличие CSS, а также убедиться, что элемент видим и не скрыт стилями display: none или visibility: hidden.
  • Ошибка в консоли: проверить правильность пути к файлам и версию библиотеки.

Автоматизированная проверка

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

try {
    const driver = new Driver();
    console.log('Driver.js установлен успешно:', driver instanceof Driver);
} catch (error) {
    console.error('Ошибка при инициализации Driver.js:', error);
}

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

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

Оглавление