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

Shepherd.js — это библиотека на JavaScript, предназначенная для создания пошаговых интерактивных руководств по интерфейсу (tours). Она позволяет плавно управлять пользовательским опытом, выделяя элементы страницы и предоставляя подсказки на каждом шаге. Shepherd.js построен поверх Popper.js, что обеспечивает гибкое позиционирование всплывающих подсказок относительно элементов DOM.

Базовый объект Tour создается с помощью конструктора new Shepherd.Tour(options). В параметрах конфигурации можно указать:

  • defaultStepOptions — общие настройки для всех шагов;
  • useModalOverlay — затемнение фона для акцентирования внимания;
  • steps — массив шагов, каждый шаг описывается объектом с параметрами.

Пример создания простого тура:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  },
  useModalOverlay: true
});

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать в наше приложение!',
  attachTo: {
    element: '.header',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.start();

Структура шага

Каждый шаг тура в Shepherd.js может содержать следующие ключевые свойства:

  • id — уникальный идентификатор шага;
  • text — текст подсказки, который может быть строкой или функцией;
  • title — заголовок подсказки;
  • attachTo — объект с параметрами element и on, задающий элемент и сторону, где будет позиционироваться подсказка;
  • buttons — массив кнопок с действиями (next, back, cancel, complete);
  • classes — CSS-классы для стилизации шага;
  • when — объект событийных колбеков для управления поведением шага (show, hide, destroy).

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

Shepherd.js позволяет настраивать динамический контент и реакцию на действия пользователя:

tour.addStep({
  id: 'dynamic',
  text: () => `Вы выбрали ${getSelectedItem()}`,
  attachTo: { element: '#item', on: 'right' },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ],
  when: {
    show: () => console.log('Шаг показан'),
    hide: () => console.log('Шаг скрыт')
  }
});

Функции в text и события в when позволяют создавать интерактивные сценарии, где подсказки реагируют на состояние страницы.

Работа с модальными оверлеями и фокусом

useModalOverlay: true создает затемненный фон, ограничивая внимание пользователя текущим шагом. Дополнительно можно управлять фокусом с помощью:

  • focus: true — автоматически фокусировать элемент при показе шага;
  • scrollTo: { beh * avior: 'smooth' } — плавная прокрутка к элементу.

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

Кнопки и навигация

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

buttons: [
  {
    text: 'Пропустить',
    action: tour.cancel,
    classes: 'btn-secondary'
  },
  {
    text: 'Следующий',
    action: tour.next,
    classes: 'btn-primary'
  }
]

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

Интеграция с E2E тестами

Для E2E тестирования туры Shepherd.js могут быть использованы в сочетании с Cypress, Playwright или Selenium. Основные подходы:

  1. Идентификация шагов по id — упрощает проверку отображения нужной подсказки.
  2. Проверка видимости элементов и текста — через селекторы DOM.
  3. Симуляция кликов кнопок тура — tour.next() и tour.back() для тестирования навигации.
  4. Асинхронное ожидание отображения шагов — await step.isOpen() или использование MutationObserver для проверки, что DOM обновился.

Пример Cypress:

cy.visit('/app');
cy.window().then(win => {
  const tour = win.tour;
  cy.get('#step1').should('be.visible');
  tour.next();
  cy.get('#step2').should('contain.text', 'Следующий шаг');
});

Пользовательские события и колбеки

Shepherd.js поддерживает глобальные события тура:

  • start — запуск тура;
  • complete — успешное завершение;
  • cancel — отмена тура;
  • show и hide — отображение/скрытие шага.

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

tour.on('complete', () => {
  console.log('Тур завершен успешно');
});
tour.on('cancel', () => {
  console.log('Тур был отменен');
});

Адаптивность и кастомизация

Shepherd.js предоставляет широкие возможности для кастомной стилизации:

  • classes для CSS-классов на уровне шага;
  • глобальные настройки через defaultStepOptions.classes;
  • возможность добавления HTML в текст подсказки;
  • кастомные кнопки с иконками и стилями.

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

Советы для E2E тестирования

  1. Использовать уникальные id для шагов и кнопок, чтобы селекторы оставались стабильными.
  2. Проверять состояние модального оверлея и видимость подсказки перед симуляцией действий.
  3. Разделять туры на логические блоки для упрощения тестов и повторного использования.
  4. Автоматизировать навигацию через API Shepherd.js, избегая кликов по DOM вручную, что повышает стабильность тестов.

Shepherd.js сочетает гибкость позиционирования, интерактивные события и модульную структуру, что делает его удобным инструментом для создания и тестирования сложных пользовательских туров в современных веб-приложениях.

Оглавление