Double-click и context меню

Protractor — это инструмент для автоматизированного тестирования Angular-приложений, который базируется на WebDriverJS. Среди множества действий с элементами веб-страницы важное место занимают двойной клик и контекстное меню, поскольку они часто используются для взаимодействия с элементами, недоступными через стандартный click().

Двойной клик

Для выполнения двойного клика в Protractor используется класс browser.actions(), предоставляющий возможность эмулировать сложные действия пользователя.

Пример выполнения двойного клика:

const elem = element(by.css('.double-click-target'));

browser.actions().doubleClick(elem).perform();

Пояснения:

  • element(by.css('.double-click-target')) — локатор элемента, с которым будет произведён двойной клик.
  • browser.actions() создаёт цепочку действий пользователя.
  • doubleClick(elem) инициирует двойное нажатие на выбранный элемент.
  • perform() завершает и выполняет все накопленные действия.

В случаях, когда требуется двойной клик в конкретной точке элемента:

const elem = element(by.css('.double-click-target'));

browser.actions()
  .mouseMove(elem, {x: 10, y: 5}) // смещение относительно верхнего левого угла элемента
  .doubleClick()
  .perform();

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

  • Прямой вызов click() дважды подряд не всегда срабатывает как настоящий двойной клик, особенно если на сайте есть обработчики событий dblclick.
  • Двойной клик можно комбинировать с другими действиями, например, перетаскиванием или удержанием элемента.

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

Контекстное меню активируется через правый клик на элементе. В Protractor это также реализуется через browser.actions():

const elem = element(by.css('.context-menu-target'));

browser.actions().click(elem, protractor.Button.RIGHT).perform();

Разбор кода:

  • click(elem, protractor.Button.RIGHT) указывает нажатие правой кнопкой мыши.
  • protractor.Button.RIGHT — константа, определяющая именно правый клик.
  • После вызова perform() браузер инициирует открытие контекстного меню.

Если требуется выбрать пункт меню после открытия:

const menuItem = element(by.cssContainingText('.context-menu-item', 'Удалить'));

browser.actions()
  .click(elem, protractor.Button.RIGHT)  // открываем меню
  .click(menuItem)                        // выбираем пункт
  .perform();

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

  • Не все контекстные меню — это стандартные браузерные; часто они кастомные, реализованные через HTML. В таких случаях элементы меню можно локализовать и кликать как обычные кнопки.
  • Важно дождаться появления меню перед кликом по пункту, иначе тест упадет. Используется ExpectedConditions:
const EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(menuItem), 5000, 'Пункт меню не появился');
browser.actions().click(menuItem).perform();

Сочетание действий: двойной клик с контекстным меню

Иногда требуется комбинация действий, например, двойной клик по элементу с последующим открытием контекстного меню. Для этого browser.actions() поддерживает цепочки:

const target = element(by.css('.target'));

browser.actions()
  .doubleClick(target)
  .click(target, protractor.Button.RIGHT)
  .perform();

Такой подход обеспечивает воспроизведение сложных пользовательских сценариев в автоматических тестах.

Советы по стабильности тестов

  1. Явные ожидания Для двойного клика и правого клика рекомендуется использовать ожидания, чтобы элемент был доступен и видим:

    const EC = protractor.ExpectedConditions;
browser.wait(EC.elementToBeClickable(elem), 5000);

  2. Проверка реакции на события После двойного клика или вызова контекстного меню важно проверять изменение состояния страницы или появление элементов:

    const popup = element(by.css('.popup'));
browser.wait(EC.visibilityOf(popup), 3000);

  3. Смещения при кликах Иногда элемент может быть частично перекрыт. В этом случае помогает указание смещения в mouseMove перед действием.

  4. Кастомные меню и динамические элементы Всегда использовать локаторы, учитывающие уникальность пунктов меню, чтобы не было случайного клика по неправильному элементу.

Примеры использования в реальных сценариях

  • Редактирование элемента таблицы: двойной клик открывает форму редактирования.
  • Удаление записи: правый клик открывает контекстное меню с опцией «Удалить».
  • Тестирование drag-and-drop с контекстным меню: сначала открывается меню, потом выбирается нужная опция для запуска действия.

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

Оглавление