Клики и двойные клики

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

Метод click()

Метод click() выполняет одиночное нажатие на элемент. Он доступен для всех объектов, полученных через селекторы WebdriverIO.

Синтаксис:

await $(selector).click();

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

  • Метод автоматически ожидает элемент в DOM и проверяет его видимость.
  • При необходимости можно использовать опцию { button: 'right' } для имитации правого клика:
await $(selector).click({ button: 'right' });
  • В случае клика на элементы с анимацией или динамическим появлением лучше предварительно убедиться, что элемент готов к взаимодействию:
const button = await $('#submit');
await button.waitForDisplayed({ timeout: 5000 });
await button.click();

Двойной клик: doubleClick()

Для эмуляции двойного клика WebdriverIO предоставляет метод doubleClick(). Он особенно полезен для редактирования текста, открытия элементов или запуска специальных событий на интерфейсе.

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

const item = await $('.list-item');
await item.doubleClick();

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

  • Поддерживает дополнительные опции, такие как button для указания кнопки мыши.
  • Работает только с элементами, видимыми на странице. Если элемент скрыт, необходимо сначала сделать его видимым.
  • В отличие от последовательного вызова click() дважды, doubleClick() гарантирует правильное срабатывание событий dblclick.

Клики с координатами

Иногда требуется кликнуть не по центру элемента, а в определённой точке. WebdriverIO позволяет указать координаты относительно верхнего левого угла элемента:

await element.click({ x: 10, y: 20 });

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

  • Координаты указываются в пикселях.
  • Используется для взаимодействия с элементами нестандартной формы или SVG-графикой.
  • Полезно для тестирования сложных визуальных компонентов, таких как диаграммы или интерактивные карты.

Применение цепочек действий

Для более сложных сценариев, таких как перетаскивание с кликом или двойной клик с удержанием, WebdriverIO поддерживает цепочки действий через action API:

await browser.performActions([{
    type: 'pointer',
    id: 'mouse',
    parameters: { pointerType: 'mouse' },
    actions: [
        { type: 'pointerMove', origin: element, x: 0, y: 0 },
        { type: 'pointerDown', button: 0 },
        { type: 'pointerUp', button: 0 },
        { type: 'pause', duration: 50 },
        { type: 'pointerDown', button: 0 },
        { type: 'pointerUp', button: 0 }
    ]
}]);

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

  • Позволяет тонко настраивать временные интервалы между кликами.
  • Используется при тестировании событий, чувствительных к времени.
  • Обеспечивает точный контроль над движениями указателя и состоянием кнопок мыши.

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

  • Перед кликом убедиться, что элемент существует и видим: waitForExist() и waitForDisplayed().
  • Для динамических страниц использовать небольшие задержки (pause()) или ожидания появления элемента.
  • Предпочтительно использовать doubleClick() вместо двух последовательных click() для правильного срабатывания событий.
  • Для элементов, выходящих за пределы видимой области, применять скроллинг через scrollIntoView() перед кликом:
await element.scrollIntoView();
await element.click();
  • В сложных интерактивных интерфейсах комбинировать обычные клики с действиями через performActions() для точного воспроизведения пользовательского поведения.

Ловушки и ошибки

  • Попытка клика на скрытый элемент приводит к ошибке element not interactable.
  • Двойной клик на слишком динамичный элемент может не сработать, если первый клик вызывает перерисовку страницы.
  • Использование координат для кликов на элементах с изменяющимися размерами требует постоянного контроля размеров через getSize().

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

Оглавление