Методы mouseMove и hover

Protractor является инструментом для автоматизированного тестирования Angular и не только, обеспечивая взаимодействие с веб-элементами через браузер. Одним из важных аспектов работы с UI является симуляция действий пользователя, таких как наведение курсора на элемент или перемещение мыши. Для этого используются методы mouseMove и hover.

Основы работы с mouseMove

Метод mouseMove принадлежит объекту browser.actions() и позволяет перемещать курсор мыши к определенному элементу или координатам.

Синтаксис:

browser.actions().mouseMove(elementOrCoordinates).perform();
  • elementOrCoordinates — объект ElementFinder или объект с координатами {x: number, y: number}.
  • perform() — обязательный вызов для выполнения действий, определённых в цепочке actions.

Пример использования:

let menu = element(by.css('.menu-item'));
browser.actions().mouseMove(menu).perform();

В этом примере курсор будет перемещён на элемент с классом .menu-item.

Особенности метода mouseMove:

  1. Можно указывать смещение относительно элемента:
browser.actions().mouseMove(menu, {x: 10, y: 5}).perform();
  1. Если элемент невидим или перекрыт другим, действие может не выполниться. Необходимо убедиться в его доступности:
let menu = element(by.css('.menu-item'));
browser.wait(protractor.ExpectedConditions.visibilityOf(menu), 5000);
browser.actions().mouseMove(menu).perform();

Симуляция наведения с hover

В Protractor нет встроенного метода hover, но поведение наведения реализуется через mouseMove. Обычно под hover подразумевается перемещение курсора на элемент с последующим открытием всплывающих элементов (например, dropdown меню).

Пример реализации hover через mouseMove:

let dropdown = element(by.css('.dropdown'));
browser.actions().mouseMove(dropdown).perform();

// Проверка видимости элементов после hover
let dropdownMenu = element(by.css('.dropdown-menu'));
expect(dropdownMenu.isDisplayed()).toBe(true);

В этом примере после наведения курсора проверяется отображение подменю.

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

  • Метод подходит для проверки динамически появляющихся элементов.
  • Можно комбинировать с кликом после наведения:
browser.actions()
    .mouseMove(dropdown)
    .click(element(by.css('.dropdown-item')))
    .perform();
  • Убедиться, что анимации завершены, используя browser.sleep() или ожидания ExpectedConditions, чтобы избежать flaky-тестов.

Использование координат для точного позиционирования

Метод mouseMove позволяет перемещать курсор к конкретной точке относительно элемента:

browser.actions().mouseMove(menu, {x: 15, y: 20}).perform();

Это полезно, если нужно навести курсор на определённую область элемента (например, на иконку внутри кнопки).

Примечания по координатам:

  • Координаты указываются в пикселях относительно верхнего левого угла элемента.
  • Можно использовать отрицательные значения для смещения влево или вверх.
  • Иногда требуется учитывать padding и margin элемента для точного позиционирования.

Цепочка действий с actions()

Метод mouseMove можно комбинировать с другими действиями в цепочке actions() для моделирования сложного поведения пользователя:

let elementA = element(by.css('.item-a'));
let elementB = element(by.css('.item-b'));

browser.actions()
    .mouseMove(elementA)
    .mouseDown()
    .mouseMove(elementB)
    .mouseUp()
    .perform();

В данном примере реализуется drag-and-drop.

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

  • Каждое действие добавляется к цепочке и выполняется только после вызова perform().
  • Можно смешивать клики, нажатия клавиш, удержание кнопки мыши и перемещения.

Отладка и нюансы работы

  1. Если mouseMove не работает, причина часто в том, что элемент перекрыт другим слоем или находится вне видимой области. В таких случаях помогает browser.executeScript("arguments[0].scrollIntoView();", element.getWebElement());.
  2. Для hover над динамическими элементами стоит добавить ожидания видимости:
let tooltip = element(by.css('.tooltip'));
browser.wait(protractor.ExpectedConditions.visibilityOf(tooltip), 5000);
  1. В сочетании с Protractor можно использовать sleep() только как временное решение, предпочтительнее использовать ожидания ExpectedConditions.

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

  • mouseMove — основной инструмент для симуляции наведения мыши.
  • Hover реализуется через перемещение курсора на элемент.
  • Цепочка действий позволяет комбинировать наведение, клики и drag-and-drop.
  • Для стабильности тестов обязательно использовать ожидания видимости и скроллинг к элементу.

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

Оглавление