Наведение курсора

Наведение курсора (hover) — одна из ключевых интеракций при тестировании пользовательских интерфейсов. В веб-приложениях оно часто используется для отображения всплывающих подсказок, раскрытия меню или изменения стиля элементов. Cypress не предоставляет встроенной команды hover, поэтому требуется использование специальных подходов для эмуляции движения мыши.

Использование команды `.trigger()`

Команда .trigger() позволяет инициировать события на DOM-элементах. Для эмуляции наведения курсора используется событие mouseover:

cy.get('.menu-item').trigger('mouseover');

Важные моменты:

mouseover — событие, которое активируется при наведении мыши на элемент.
Можно комбинировать с другими событиями, например mouseenter или mousemove, чтобы более точно эмулировать поведение:

cy.get('.menu-item').trigger('mouseenter');
cy.get('.menu-item').trigger('mousemove', { clientX: 100, clientY: 50 });

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

Проверка визуального эффекта после наведения

Наведение курсора обычно сопровождается изменением стиля элемента. Проверка этих изменений выполняется с использованием .should():

cy.get('.menu-item')
  .trigger('mouseover')
  .should('have.css', 'background-color', 'rgb(200, 200, 200)');

Особенности:

Цвета и другие CSS-свойства необходимо проверять в формате, который возвращает браузер (rgb, rgba, px и т.д.).
Проверка видимости всплывающих элементов после hover:

cy.get('.tooltip')
  .should('not.be.visible');
cy.get('.menu-item')
  .trigger('mouseover');
cy.get('.tooltip')
  .should('be.visible');

Наведение курсора с помощью `.realHover()`

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

Установка:

npm install cypress-real-events --save-dev

Использование:

import "cypress-real-events/support";

cy.get('.menu-item').realHover();

Преимущества:

Реальное наведение, которое триггерит все стандартные браузерные события (mouseover, mouseenter, mousemove).
Подходит для сложных меню, drag-and-drop и элементов с анимацией на hover.
Совместимо с проверкой видимости и стилевых изменений.

Комбинирование наведения с кликом и другими действиями

В интерфейсах часто требуется сначала навести курсор, а затем кликнуть на элемент, который становится видимым:

cy.get('.dropdown-button').realHover();
cy.get('.dropdown-menu-item')
  .should('be.visible')
  .click();

Ключевые моменты:

Проверка видимости перед кликом предотвращает ошибки, связанные с попыткой взаимодействия с невидимым элементом.
Можно использовать цепочку команд .trigger().click() при простых интерфейсах без анимаций.

Наведение на элементы внутри iframe

Если элемент находится внутри iframe, стандартный cy.get() работать не будет. Необходимо сначала получить контент iframe:

cy.get('iframe#frame-id').then($iframe => {
  const body = $iframe.contents().find('body');
  cy.wrap(body).find('.menu-item').trigger('mouseover');
});