Автоматизация тестов

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

Ключевые возможности включают:

  • Создание последовательных шагов (steps) с описаниями и действиями.
  • Привязку шагов к конкретным DOM-элементам с использованием селекторов.
  • Настройку кнопок управления туром: «Следующий», «Назад», «Пропустить».
  • Возможность запускать кастомные функции на событиях начала или завершения шага.
  • Поддержку событий туров, что облегчает интеграцию с фреймворками автоматизации тестирования.

Инициализация и базовая структура тура

Для создания тура используется конструктор Shepherd.Tour:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});
  • defaultStepOptions задает глобальные настройки всех шагов, включая CSS-классы и поведение прокрутки.
  • scrollTo: true автоматически прокручивает страницу к элементу, на который указывает шаг.

Добавление шагов осуществляется методом addStep:

tour.addStep({
  id: 'step1',
  text: 'Это первый шаг вашего тура',
  attachTo: {
    element: '.menu-button',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});
  • attachTo.element — CSS-селектор элемента, к которому прикрепляется подсказка.
  • attachTo.on — сторона элемента, где будет отображаться подсказка (top, bottom, left, right).
  • buttons — массив кнопок с действиями.

События и управление туром

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

Примеры событий тура:

tour.on('start', () => console.log('Тур начат'));
tour.on('complete', () => console.log('Тур завершен'));
tour.on('cancel', () => console.log('Тур отменен'));

События шага:

tour.addStep({
  id: 'step2',
  text: 'Следующий шаг',
  buttons: [
    {
      text: 'Далее',
      action: () => {
        console.log('Пользователь нажал Далее');
        tour.next();
      }
    }
  ],
  when: {
    show: () => console.log('Шаг отображен'),
    hide: () => console.log('Шаг скрыт')
  }
});
  • when.show вызывается при отображении шага.
  • when.hide вызывается при скрытии шага.
  • Это удобно для интеграции с системами автоматического тестирования, где необходимо отслеживать выполнение шагов.

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

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

  1. Проверка последовательности шагов:
let stepOrder = [];
tour.on('show', (event) => stepOrder.push(event.step.id));

tour.start();

// После завершения тура
console.assert(JSON.stringify(stepOrder) === JSON.stringify(['step1', 'step2', 'step3']));
  • События show и complete позволяют отслеживать правильность последовательности шагов.
  1. Симуляция действий пользователя:
tour.addStep({
  id: 'clickStep',
  text: 'Нажмите кнопку для продолжения',
  attachTo: { element: '.continue-btn', on: 'right' },
  buttons: [
    {
      text: 'Симуляция клика',
      action: () => {
        document.querySelector('.continue-btn').click();
        tour.next();
      }
    }
  ]
});
  • Полезно для тестирования интерактивных элементов без физического взаимодействия пользователя.
  1. Асинхронные проверки:
tour.addStep({
  id: 'asyncStep',
  text: 'Подождите загрузку данных',
  beforeShowPromise: () => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log('Данные загружены', data));
  },
  buttons: [{ text: 'Далее', action: tour.next }]
});
  • beforeShowPromise позволяет задерживать отображение шага до завершения асинхронных операций, что критично при тестировании динамических интерфейсов.

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

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-dark',
    cancelIcon: { enabled: true },
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});
  • classes — предустановленные темы (shepherd-theme-arrows, shepherd-theme-dark).
  • cancelIcon — отображение кнопки отмены тура.
  • scrollTo.behavior позволяет задать плавную прокрутку к элементу.

Управление динамическими элементами

Для SPA или страниц с динамическим контентом полезно проверять наличие элемента перед отображением шага:

tour.addStep({
  id: 'dynamicStep',
  text: 'Этот шаг появится только если элемент доступен',
  attachTo: { element: '.dynamic-element', on: 'top' },
  beforeShow: () => {
    if (!document.querySelector('.dynamic-element')) {
      console.log('Элемент не найден, пропускаем шаг');
      tour.next();
    }
  },
  buttons: [{ text: 'Далее', action: tour.next }]
});
  • Позволяет создавать устойчивые тесты и предотвращает зависания тура на недоступных элементах.

Поддержка нескольких туров и повторное использование

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

const tour1 = new Shepherd.Tour({ defaultStepOptions: { classes: 'tour1' } });
const tour2 = new Shepherd.Tour({ defaultStepOptions: { classes: 'tour2' } });

// Запуск второго тура после завершения первого
tour1.on('complete', () => tour2.start());
tour1.start();
  • Это удобно для сложных интерфейсов, где тестируются разные части приложения.
  • Позволяет повторно использовать шаги и кнопки, минимизируя дублирование кода.

Расширение функционала

Shepherd.js можно интегрировать с внешними библиотеками:

  • Тестирование с Cypress или Playwright — использование событий для синхронизации автоматических скриптов с визуальными подсказками.

  • Локализация текста шагов — использование динамического контента и переводов на разные языки.

  • Кастомные кнопки и действия — выполнение любых функций JavaScript при нажатии кнопок.

  • Например, можно создать кнопку «Пропустить все шаги», которая завершает тур мгновенно:

tour.addStep({
  id: 'skipStep',
  text: 'Хотите пропустить тур?',
  buttons: [
    { text: 'Пропустить', action: tour.complete },
    { text: 'Продолжить', action: tour.next }
  ]
});

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

Оглавление