Цепочки действий

Цепочки действий (Action Chains) в WebdriverIO позволяют создавать последовательность интерактивных действий с элементами страницы, имитируя поведение пользователя. Этот подход особенно полезен для сложных сценариев, включающих наведение мыши, перетаскивание, нажатия клавиш и другие взаимодействия, которые невозможно реализовать стандартными командами click() или setValue().

Основы работы с действиями

В WebdriverIO используется объект browser.actions(), который позволяет строить цепочку действий. Каждое действие добавляется к цепочке и выполняется при вызове метода perform(). Примеры базовых действий:

  • move({ x, y, origin }) — перемещает курсор мыши к указанным координатам или элементу.
  • click({ button, x, y }) — выполняет клик мышью. Можно указать конкретную кнопку (left, middle, right) и координаты относительно элемента.
  • doubleClick() — двойной клик мышью.
  • contextClick() — клик правой кнопкой мыши.
  • pointerDown() и pointerUp() — имитация нажатия и отпускания кнопки мыши, что используется для drag-and-drop.

Каждое действие можно комбинировать с другими, формируя сложные сценарии.

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

const elem = await $('#draggable');

await browser.actions()
    .move({ origin: elem })      // Навести мышь на элемент
    .pointerDown()               // Нажать и удерживать левую кнопку мыши
    .move({ x: 100, y: 50 })     // Переместить на новые координаты
    .pointerUp()                 // Отпустить кнопку мыши
    .perform();                  // Выполнить все действия

В данном примере реализовано перетаскивание элемента. Метод perform() выполняет все добавленные действия последовательно.

Работа с клавиатурой

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

  • keyDown(value) — нажать клавишу.
  • keyUp(value) — отпустить клавишу.
  • pause(ms) — сделать паузу между действиями (в миллисекундах).

Пример: ввод текста с удержанием клавиши Shift:

await browser.actions()
    .keyDown('Shift')        // Нажать Shift
    .sendKeys('webdriverio') // Ввести текст заглавными буквами
    .keyUp('Shift')          // Отпустить Shift
    .perform();

Наведение мыши и взаимодействие с элементами

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

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

await browser.actions()
    .move({ origin: menu })   // Навести курсор на элемент
    .pause(500)               // Небольшая задержка для появления подменю
    .click()                  // Клик по элементу подменю
    .perform();

Метод pause() обеспечивает синхронизацию с динамическим контентом, когда простого waitForDisplayed() недостаточно.

Drag-and-Drop

Одно из самых частых применений цепочек действий — drag-and-drop. Можно использовать как абсолютные координаты, так и элементы.

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

await browser.actions()
    .move({ origin: source })   // Навести на исходный элемент
    .pointerDown()             // Нажать кнопку мыши
    .move({ origin: target })  // Переместить к целевому элементу
    .pointerUp()               // Отпустить кнопку мыши
    .perform();

Комбинированные сценарии

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

const input = await $('#input-field');

await browser.actions()
    .move({ origin: input })
    .click()
    .keyDown('Control')
    .sendKeys('a')          // Выделить весь текст
    .keyUp('Control')
    .keyDown('Control')
    .sendKeys('c')          // Скопировать текст
    .keyUp('Control')
    .perform();

Особенности и рекомендации

  • Производительность: большие цепочки действий могут занимать значительное время, поэтому их стоит использовать только там, где обычные команды недостаточны.
  • Синхронизация: методы pause() или waitForDisplayed() помогают избежать ошибок при взаимодействии с динамическим контентом.
  • Кросс-браузерность: WebdriverIO реализует Actions API в соответствии с W3C WebDriver Specification, что обеспечивает совместимость с большинством современных браузеров.

Итоговая структура цепочки действий

  1. Создание цепочки через browser.actions().
  2. Добавление последовательных действий (move, click, keyDown и др.).
  3. Выполнение всех действий через perform().
  4. При необходимости включение пауз и ожиданий для корректной работы с динамическими элементами.

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

Оглавление