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

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

Структура тура

Каждый тур в Intro.js строится на основе массива объектов шагов (steps). Каждый шаг описывает элемент, текст подсказки, положение подсказки и дополнительные параметры:

var tour = introJs();
tour.setOptions({
  steps: [
    {
      element: '#header',
      intro: 'Это заголовок страницы',
      position: 'bottom'
    },
    {
      element: '#menu',
      intro: 'Здесь расположено главное меню',
      position: 'right'
    }
  ]
});

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

  1. Наличие элементов на странице: проверка, что все селекторы element существуют в DOM в момент запуска тура.
  2. Проверка текста подсказок: убедиться, что поле intro содержит корректную информацию.
  3. Позиционирование подсказок: корректность position для каждого шага, особенно при адаптивном дизайне.
  4. Уникальность шагов: каждый шаг должен ссылаться на уникальный элемент и иметь смысловую последовательность.

Проверка последовательности шагов

Intro.js автоматически определяет порядок шагов по порядку в массиве steps. При динамическом формировании шагов важно тестировать:

  • Логику переходов с шага на шаг.
  • Корректность работы методов nextStep() и previousStep().
  • Обработку условий отображения (например, когда шаги зависят от состояния страницы).
tour.onafterchange(function(targetElement) {
  console.log('Сменился шаг на элемент:', targetElement);
});

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

Тестирование событий и колбэков

Intro.js поддерживает множество событий, которые можно использовать для верификации поведения тура:

  • onbeforechange(targetElement) — проверка перед переходом на шаг.
  • onchange(targetElement) — момент смены шага.
  • onafterchange(targetElement) — после рендера подсказки.
  • oncomplete() — завершение тура.
  • onexit() — принудительный выход из тура.

Пример логирования всех событий для тестирования:

tour.onbeforechange(el => console.log('Перед шагом:', el.id));
tour.onchange(el => console.log('Смена шага на:', el.id));
tour.onafterchange(el => console.log('Шаг отрендерен:', el.id));
tour.oncomplete(() => console.log('Тур завершён'));
tour.onexit(() => console.log('Тур прерван'));

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

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

Для более сложных проектов используется интеграция с инструментами автоматизированного тестирования, такими как Jest, Cypress, Puppeteer. Основная цель — проверить поведение тура в различных условиях:

  1. Элементы могут загружаться динамически.
  2. Шаги могут изменяться в зависимости от состояния интерфейса.
  3. Взаимодействие с пользователем (клики, прокрутка, закрытие тура).

Пример Cypress теста для тура:

describe('Тест тура Intro.js', () => {
  it('Проверяет наличие всех шагов', () => {
    cy.visit('/page-with-tour');
    cy.window().then(win => {
      const tour = win.introJs();
      tour.start();
      tour._options.steps.forEach(step => {
        cy.get(step.element).should('exist');
      });
    });
  });
});

Автоматизация позволяет не только проверять корректность отображения, но и выявлять ошибки при изменениях DOM или логики приложения.

Тестирование адаптивности

Intro.js корректно работает на различных разрешениях экрана, но туры требуют отдельной проверки:

  • Мобильные устройства: проверка корректного отображения подсказок, расположения кнопок и прокрутки.
  • Перемещение окна браузера: элементы могут изменять своё положение, поэтому важно проверять динамическое позиционирование подсказок.
  • Скрытые или изменяющиеся элементы: при адаптивной верстке некоторые шаги могут быть скрыты, что должно корректно обрабатываться через skipStep() или условия отображения.

Верификация пользовательского опыта

Качество тура определяется не только технической корректностью, но и удобством для пользователя:

  • Проверка читаемости текста подсказок.
  • Длительность отображения подсказки (если используется автоматический переход).
  • Логичность последовательности шагов.
  • Возможность пропуска шагов и завершения тура в любой момент.

Проверка интеграции с другими библиотеками

Intro.js часто используется совместно с фреймворками React, Vue, Angular. Тестирование туров в этих условиях включает:

  • Проверку правильного нахождения элементов после рендера компонентов.
  • Контроль состояния шагов при динамических обновлениях компонентов.
  • Логирование ошибок при изменении DOM, чтобы предотвратить сбои тура.

Рекомендации по тестированию

  • Всегда использовать onbeforechange и onafterchange для логирования шагов.
  • Проверять все селекторы на существование до запуска тура.
  • Автоматизировать тесты для динамических страниц.
  • Тестировать туры на разных разрешениях и устройствах.
  • Документировать сценарии туров, чтобы тесты соответствовали бизнес-логике.

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

Оглавление