Имитация движений мыши

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

Основные методы взаимодействия с мышью

WebdriverIO использует объект browser для выполнения действий мыши через Actions API. К ключевым методам относятся:

  • moveTo(element[, xOffset, yOffset]) — перемещение курсора к элементу с возможностью указания смещения.
  • buttonDown([button]) — нажатие кнопки мыши (по умолчанию левая).
  • buttonUp([button]) — отпускание кнопки мыши.
  • click([element, button]) — клик по элементу или в текущей позиции курсора.
  • doubleClick([element]) — двойной клик.
  • rightClick([element]) — клик правой кнопкой.
  • dragAndDrop(target, options) — перетаскивание элемента в указанное место.

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

Перемещение курсора с точными координатами

Метод moveTo поддерживает смещения относительно верхнего левого угла элемента:

const button = await $('#submit-button');
await button.moveTo();           // Перемещение к центру элемента
await button.moveTo({ xOffset: 10, yOffset: 5 }); // Смещение на 10 пикселей по X и 5 по Y

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

Клики и нажатия

Клик мышью в WebdriverIO можно выполнить несколькими способами:

await $('#login').click();               // Клик по элементу
await browser.moveToElement('#login');   // Перемещение и клик
await browser.buttonDown();              // Нажатие кнопки мыши
await browser.buttonUp();                // Отпускание кнопки мыши

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

  • click() автоматически перемещает курсор к элементу.
  • buttonDown() и buttonUp() позволяют разделять нажатие и отпускание, что необходимо для сложных действий, таких как перетаскивание или выделение текста.

Перетаскивание элементов

Перетаскивание (dragAndDrop) используется для тестирования интерфейсов с drag-and-drop компонентами. Пример:

const source = await $('#draggable');
const target = await $('#dropzone');

await source.dragAndDrop(target, { duration: 1000 });

Параметр duration задаёт время выполнения перетаскивания в миллисекундах, что позволяет имитировать естественные движения мыши. Без этого параметра перемещение будет мгновенным, что не всегда отражает реальное поведение пользователя.

Для более тонкой настройки можно комбинировать методы:

await source.moveTo();
await browser.buttonDown();
await target.moveTo({ xOffset: 5, yOffset: 5 });
await browser.buttonUp();

Такой подход полезен, когда требуется контролировать путь движения курсора или проверять реакции интерфейса на наведение.

Наведение и hover-эффекты

Наведение мыши играет ключевую роль для тестирования CSS-ховер эффектов, всплывающих меню и динамических подсказок:

const menu = await $('#menu-item');
await menu.moveTo();
const tooltip = await $('#tooltip');
await expect(tooltip).toBeDisplayed();

Метод moveTo срабатывает аналогично реальному движению мыши, что позволяет корректно тестировать визуальные реакции на hover.

Контекстное меню и двойной клик

Для тестирования правой кнопки мыши и двойного клика используются методы rightClick() и doubleClick():

const item = await $('#file');
await item.rightClick();    // Вызов контекстного меню
await item.doubleClick();   // Открытие файла двойным кликом

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

Сценарии сложных пользовательских действий

Комбинирование всех возможностей позволяет моделировать сложные сценарии:

const slider = await $('#slider');
const targetPosition = await $('#target');

await slider.moveTo();
await browser.buttonDown();
await targetPosition.moveTo();
await browser.buttonUp();

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

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

  • Использовать moveTo с смещением, чтобы избежать зависимости от точного центра элемента.
  • При drag-and-drop применять параметр duration для имитации естественного движения.
  • Разделять buttonDown() и buttonUp() для проверки событий, привязанных к нажатию и отпусканию кнопки.
  • Проверять hover-эффекты через отображение всплывающих элементов после moveTo.
  • Комбинировать действия мыши для сложных сценариев, вместо простых кликов, чтобы тесты были максимально приближены к пользовательскому поведению.

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

Оглавление