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

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

$('.tooltip').tooltipster({
    content: 'Пример подсказки',
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-default'
});

В этом примере:

  • content — текст или HTML-содержимое тултипа;
  • animation — тип анимации появления;
  • delay — задержка перед показом в миллисекундах;
  • theme — применяемая тема оформления.

Инициализация и привязка к элементам

Tooltipster работает с любыми DOM-элементами, которые можно выбрать через jQuery. Инициализация происходит вызовом метода .tooltipster() на выбранных элементах. Можно использовать несколько вариантов инициализации для разных элементов:

$('.btn-info').tooltipster({
    content: $('<span>Интерактивная подсказка</span>'),
    interactive: true,
    trigger: 'click'
});

$('#help-icon').tooltipster({
    content: 'Подсказка при наведении',
    delay: 100,
    side: 'right'
});

Ключевые моменты и параметры:

  • interactive: true — позволяет пользователю взаимодействовать с содержимым тултипа (например, нажимать кнопки внутри него);
  • trigger — способ вызова: hover, click, focus или custom;
  • side — сторона, на которой появляется тултип относительно элемента (top, bottom, left, right).

Динамическое обновление содержимого

Tooltipster поддерживает динамическое изменение содержимого тултипа без его уничтожения:

$('#dynamic').tooltipster('content', 'Новое содержимое');

Также можно использовать функцию для генерации содержимого на лету:

$('.tooltip-dynamic').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper){
        setTimeout(function(){
            instance.content('Содержимое загружено');
        }, 500);
    }
});

functionBefore выполняется перед показом тултипа и позволяет подгружать данные асинхронно или формировать их динамически.

Настройка анимаций и тем

Tooltipster предоставляет встроенные темы и анимации, но возможна кастомизация через CSS и Jav * aScript:

$('.custom-tooltip').tooltipster({
    theme: 'tooltipster-shadow',
    animation: 'grow',
    delay: 300
});

Для полной кастомизации можно создавать собственные CSS-классы:

.tooltipster-mytheme .tooltipster-content {
    background-color: #2a2a2a;
    color: #fff;
    font-size: 14px;
    border-radius: 6px;
    padding: 10px 15px;
}

Интерактивные тултипы

Tooltipster позволяет создавать полностью интерактивные тултипы с кнопками, ссылками и формами:

$('.interactive-tooltip').tooltipster({
    content: $('<div><p>Введите имя:</p><input type="text"><button>Отправить</button></div>'),
    interactive: true,
    trigger: 'click'
});

Особенности интерактивных тултипов:

  • Tooltip остается видимым, пока курсор находится внутри тултипа;
  • Поддерживается кликабельное содержимое без закрытия тултипа;
  • Можно комбинировать с асинхронными операциями, например, отправкой формы.

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

Tooltipster предоставляет события для отслеживания поведения тултипов:

$('.tooltip').on('tooltipster:show', function(){
    console.log('Тултип показан');
});

$('.tooltip').on('tooltipster:hide', function(){
    console.log('Тултип скрыт');
});

События позволяют:

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

Использование Tooltipster с E2E тестированием

При E2E тестировании важно учитывать следующие аспекты Tooltipster:

  1. Время появления тултипа: так как есть задержка delay, тестам необходимо использовать ожидания (wait или sleep) до появления элемента.
  2. Интерактивность: при проверке кликабельных элементов внутри тултипа следует симулировать курсор мыши или событие клика.
  3. Асинхронное содержимое: если тултип загружает данные динамически, тесты должны проверять состояние после завершения загрузки.
  4. Селекторы: для стабильности тестов лучше использовать уникальные ID или data-attributes, так как динамически создаваемые элементы могут менять структуру DOM.

Пример для Cypress:

cy.get('#help-icon').trigger('mouseenter');
cy.get('.tooltipster-content').should('contain', 'Подсказка при наведении');
cy.get('#help-icon').trigger('mouseleave');
cy.get('.tooltipster-content').should('not.exist');

Этот пример демонстрирует стандартный паттерн тестирования тултипа: наведение, проверка содержимого и скрытие.

Практические рекомендации

  • Использовать interactive: true только там, где это необходимо, чтобы избежать лишнего усложнения DOM для тестов.
  • Устанавливать минимально достаточный delay для ускорения E2E тестов.
  • Разделять стили тултипов на отдельные темы для упрощения поддержки.
  • Для асинхронного содержимого использовать functionBefore или промисы, чтобы тесты ожидали корректный результат.

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

Оглавление