Тестирование после миграции

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

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

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

Инициализация и базовая конфигурация

Для запуска интерактивного гида достаточно подключить скрипт и стили Intro.js:

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>

Создание базового гида осуществляется с помощью метода introJs():

const tour = introJs();
tour.start();

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

<button data-intro="Это кнопка для отправки формы" data-step="1">Отправить</button>
introJs().start();

Важное отличие Intro.js — возможность динамически управлять шагами через объект steps, что позволяет создавать гибкие сценарии без жесткой привязки к DOM:

introJs().setOptions({
  steps: [
    { element: '#step1', intro: 'Первый шаг' },
    { element: '#step2', intro: 'Второй шаг' },
    { element: '#step3', intro: 'Третий шаг' }
  ]
}).start();

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

Intro.js предоставляет широкий спектр опций:

  • showStepNumbers: отображение нумерации шагов.
  • showButtons: управление отображением кнопок «Next», «Previous» и «Skip».
  • exitOnOverlayClick: закрытие гида при клике на затемненную область.
  • tooltipPosition: позиционирование подсказки относительно элемента (top, bottom, left, right, auto).
  • highlightClass: кастомизация стиля подсветки элемента.

Пример кастомизации:

introJs().setOptions({
  showStepNumbers: true,
  showButtons: true,
  exitOnOverlayClick: false,
  tooltipClass: 'customTooltip'
}).start();

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

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

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

Использование событий позволяет проверять корректность отображения элементов после изменений интерфейса:

introJs().onchange(function(targetElement) {
  console.log('Текущий шаг:', targetElement);
}).start();

Интерактивные проверки после миграции

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

Пример сценария проверки:

const steps = [
  { element: '#loginButton', intro: 'Кнопка входа', position: 'bottom' },
  { element: '#searchInput', intro: 'Поле поиска', position: 'right' },
  { element: '#profileMenu', intro: 'Меню пользователя', position: 'left' }
];

const tour = introJs().setOptions({ steps });

tour.onchange(function(target) {
  if (!target.offsetParent) {
    console.error('Элемент не виден после миграции:', target);
  }
});

tour.start();

Динамическое создание шагов

В случаях, когда структура страницы может изменяться после миграции, шаги можно формировать динамически:

const dynamicSteps = Array.from(document.querySelectorAll('.feature')).map((el, index) => ({
  element: el,
  intro: `Функция ${index + 1}`,
  position: 'top'
}));

introJs().setOptions({ steps: dynamicSteps }).start();

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

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

  • Многостраничные гиды: можно использовать локальное хранилище для отслеживания прогресса пользователя на разных страницах.
  • Многоуровневые гиды: вложенные шаги для сложных интерфейсов.
  • Интеграция с тестами UI: в связке с Jest, Cypress или Selenium можно проверять корректность отображения подсказок и доступность элементов.

Пример интеграции с Cypress для проверки шагов:

cy.visit('/dashboard');
cy.window().then((win) => {
  win.introJs().setOptions({ steps: [{ element: '#stats', intro: 'Статистика' }] }).start();
});
cy.get('.introjs-tooltip').should('contain.text', 'Статистика');

Практическое использование при миграции

  1. Идентификация критичных элементов — кнопки, поля формы, меню.
  2. Создание сценариев гидов для проверки всех этих элементов.
  3. Отслеживание событий onchange и onafterchange для обнаружения скрытых или смещённых элементов.
  4. Динамическая генерация шагов для страниц с изменяющейся структурой.
  5. Автоматизация проверки с использованием инструментов тестирования UI.

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

Оглавление