Наведение мыши и контекстные меню

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

Наведение мыши (hover)

Наведение мыши позволяет имитировать перемещение курсора на элемент, что может вызывать всплывающие подсказки, раскрытие выпадающих меню или изменение состояния элемента. В WebdriverIO для этого используется метод moveTo.

const menuItem = await $('#menu-item');
await menuItem.moveTo();

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

  • Можно указать смещение по осям X и Y относительно верхнего левого угла элемента:
await menuItem.moveTo({ xOffset: 10, yOffset: 20 });

  • Наведение мыши не вызывает клика и не изменяет фокус элемента. Это важно при тестировании интерфейсов, где визуальные эффекты зависят от именно наведения, а не от клика.

  • Метод автоматически учитывает текущую прокрутку страницы, но если элемент скрыт за пределами видимой области, может потребоваться предварительное скроллирование:

await menuItem.scrollIntoView();
await menuItem.moveTo();
  • Для динамических элементов можно комбинировать moveTo с ожиданиями (waitForDisplayed) для надежного выполнения теста:
await menuItem.waitForDisplayed({ timeout: 5000 });
await menuItem.moveTo();

Контекстное меню (правый клик)

Контекстное меню обычно вызывается правым кликом мыши. В WebdriverIO для этого используется метод click с опцией { button: 'right' }.

const element = await $('#context-menu');
await element.click({ button: 'right' });

После вызова контекстного меню можно работать с его пунктами так же, как с обычными элементами страницы:

const deleteOption = await $('#delete-option');
await deleteOption.click();

Особенности работы с контекстным меню:

  • Контекстное меню часто создается динамически. Перед взаимодействием с его элементами рекомендуется использовать waitForDisplayed.
  • Некоторые контекстные меню управляются через нативные события браузера, поэтому их обработка может требовать дополнительных ожиданий или использования browser.performActions для имитации сложных событий мыши.
  • Для эмуляции реального пользовательского поведения иногда полезно добавить небольшую задержку между правым кликом и выбором пункта меню.

Использование performActions для сложных сценариев

Метод performActions позволяет имитировать последовательность действий мыши и клавиатуры, включая:

  • Наведение с точным смещением
  • Клики с различными кнопками
  • Зажатие и удержание клавиш или кнопок мыши

Пример: навести мышь на элемент, удерживать правую кнопку, переместить курсор и отпустить:

await browser.performActions([{
    type: 'pointer',
    id: 'mouse',
    parameters: { pointerType: 'mouse' },
    actions: [
        { type: 'pointerMove', origin: await $('#menu-item'), x: 10, y: 10 },
        { type: 'pointerDown', button: 2 },
        { type: 'pointerMove', origin: 'pointer', x: 50, y: 0 },
        { type: 'pointerUp', button: 2 }
    ]
}]);

Этот подход особенно полезен для тестирования сложных drag-and-drop или контекстных меню, которые зависят от точного положения курсора.

Наведение и контекстные меню в комбинации

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

const parent = await $('#parent-menu');
await parent.moveTo();

const child = await $('#child-option');
await child.click({ button: 'right' });

Важно помнить, что последовательность действий и ожиданий напрямую влияет на стабильность теста. Любые динамические эффекты на странице требуют использования методов waitForDisplayed или waitUntil.

Полезные советы

  • Скроллирование: всегда проверять, что элемент видим, чтобы moveTo и click сработали корректно.
  • Точные координаты: при работе с элементами, у которых есть внутренние зоны клика, использовать xOffset и yOffset.
  • Асинхронные эффекты: наведение может вызвать анимации или появление элементов, поэтому ожидания обязательны.
  • Кроссбраузерность: контекстные меню и наведение могут вести себя по-разному в разных браузерах, поэтому тесты должны учитывать особенности движков.

Наведение мыши и работа с контекстными меню в WebdriverIO позволяют создавать тесты, максимально приближенные к реальному пользовательскому взаимодействию, обеспечивая высокую точность и надежность автоматизации.

Оглавление