Ответ
Hover — это состояние интерактивного элемента интерфейса, когда пользователь наводит на него курсор мыши (или другой указатель), но не совершает клик.
Основные характеристики:
- Обычно сопровождается визуальными изменениями (изменение цвета, фона, появление тени, подчеркивания).
- Может вызывать появление дополнительных элементов (например, всплывающих подсказок — tooltips).
Что важно проверять в тестах:
- Визуальный feedback: Корректность применения CSS-стилей (
:hover). - Функциональность: Появление/исчезновение связанных элементов.
- Доступность: Работа с клавиатурной навигацией (часто через
:focus). - Кросс-браузерность и адаптивность.
- Поведение на тач-устройствах, где состояние hover может отсутствовать или эмулироваться.
Пример автоматизированной проверки (Playwright):
// Наведение курсора на кнопку и проверка стиля
const button = page.locator('.submit-btn');
await button.hover();
// Проверка изменения цвета фона
await expect(button).toHaveCSS('background-color', 'rgb(0, 120, 215)');
// Проверка появления тултипа
const tooltip = page.locator('.tooltip');
await expect(tooltip).toBeVisible();