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

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

Каждый шаг описывается объектом с набором свойств:

const steps = [
  {
    element: '#submit-button',
    popover: {
      title: 'Кнопка отправки',
      description: 'Нажмите здесь, чтобы отправить форму',
      position: 'bottom'
    }
  },
  {
    element: '#username-input',
    popover: {
      title: 'Поле логина',
      description: 'Введите ваш логин',
      position: 'right'
    }
  }
];
  • element — селектор DOM-элемента, который будет подсвечен.
  • popover.title — заголовок всплывающей подсказки.
  • popover.description — текст описания.
  • popover.position — положение подсказки относительно элемента (top, bottom, left, right, auto).

Инициализация и запуск

Для создания экземпляра Driver.js используется класс Driver:

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

const driver = new Driver({
  allowClose: false,
  overlayClickNext: true,
  doneBtnText: 'Завершить',
  closeBtnText: 'Закрыть',
  nextBtnText: 'Далее',
  prevBtnText: 'Назад',
});

Ключевые параметры конструктора:

  • allowClose — разрешает закрытие руководства через кнопку закрытия.
  • overlayClickNext — переход к следующему шагу при клике на затемнённый фон.
  • doneBtnText, closeBtnText, nextBtnText, prevBtnText — текст кнопок навигации.

Запуск последовательности шагов производится методом defineSteps и start:

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

Настройка поведения и стилей

Driver.js поддерживает тонкую настройку поведения и внешнего вида:

  • Кастомизация поповеров через CSS-классы:
const driver = new Driver({
  className: 'custom-driver-popover',
  stageBackground: '#00000088', // затемнение фона
});
  • Автопрокрутка к элементу:
driver = new Driver({
  scrollIntoViewOptions: { beh * avior: 'smooth', block: 'center' }
});

  • Управление фокусом: библиотека автоматически фокусируется на выделенном элементе, что удобно для тестирования доступности.

  • События жизненного цикла:

    • onHighlightStarted(element) — срабатывает при начале подсветки элемента.
    • onNext(element) — при переходе к следующему шагу.
    • onReset() — при завершении или сбросе руководства.

Пример подписки на события:

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

Автоматизация проверок интерфейса

Driver.js может использоваться для тестирования состояния элементов, что полезно при автоматизации QA-процессов:

  1. Проверка видимости элемента перед подсветкой:
const steps = [
  {
    element: '#submit-button',
    popover: {
      title: 'Кнопка отправки',
      description: 'Проверка видимости элемента',
      position: 'bottom'
    },
    onNext: (element) => {
      if (!element.offsetParent) {
        console.warn('Элемент скрыт!');
      }
    }
  }
];
  1. Подтверждение текстового содержимого:
driver.defineSteps([
  {
    element: '#username-label',
    popover: {
      title: 'Лейбл пользователя',
      description: 'Проверяем текст',
      position: 'right'
    },
    onNext: (element) => {
      if (element.textContent.trim() !== 'Имя пользователя') {
        console.error('Текст не соответствует ожиданиям');
      }
    }
  }
]);
  1. Комбинирование с инструментами тестирования: Driver.js удобно интегрируется с Cypress или Jest для визуальных smoke-тестов интерфейса. Например, автоматическая проверка всех ключевых элементов на странице с подсветкой и логированием результатов.

Динамическая генерация шагов

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

const dynamicSteps = Array.from(document.querySelectorAll('.feature')).map((el, index) => ({
  element: el,
  popover: {
    title: `Функция ${index + 1}`,
    description: 'Описание функции',
    position: 'bottom'
  }
}));

driver.defineSteps(dynamicSteps);
driver.start();

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

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

Для сложных интерфейсов Driver.js может быть частью пошагового QA-сценария:

  • Проверка наличия всех элементов интерфейса.
  • Сравнение состояния кнопок, полей и сообщений.
  • Логирование результатов проверки.
  • Переход к следующему шагу только при успешном прохождении проверки.

Пример сценария с условным переходом:

driver.defineSteps([
  {
    element: '#login-button',
    popover: {
      title: 'Кнопка логина',
      description: 'Проверяем доступность кнопки',
      position: 'top'
    },
    onNext: (element) => {
      if (element.disabled) {
        console.warn('Кнопка недоступна, пропуск шага');
        driver.moveNext();
      }
    }
  }
]);
driver.start();

Такой метод позволяет автоматизировать QA-процессы, не только визуально проверяя элементы, но и фиксируя их состояние в логах.

Рекомендации по использованию

  • Всегда проверять наличие элементов перед их подсветкой, чтобы избежать ошибок.
  • Использовать события жизненного цикла для логирования и проверки условий.
  • Для страниц с большим количеством динамических элементов применять динамическую генерацию шагов.
  • Стилизация поповеров и затемнения фона помогает визуально выделять тестируемые элементы.
  • Комбинировать Driver.js с инструментами автоматизированного тестирования для комплексного контроля UI.
Оглавление