Клики: click(), dblclick(), rightclick()

В автоматизированном тестировании веб-приложений взаимодействие с элементами страницы является ключевым аспектом. Cypress предоставляет мощные методы для симуляции действий пользователя с элементами: клик левой кнопкой, двойной клик и правый клик. Эти методы позволяют точно управлять поведением элементов и проверять реакцию интерфейса.


Метод click()

Метод click() используется для эмуляции нажатия левой кнопкой мыши на элемент. Он поддерживает как простое нажатие, так и комбинации с модификаторами клавиш (Ctrl, Alt, Shift, Meta).

Синтаксис:

cy.get('селектор').click(options)

Параметры options:

  • force: true — выполняет клик даже если элемент скрыт или заблокирован.
  • multiple: true — кликает по всем найденным элементам.
  • delay: 0-1000 — задержка перед кликом в миллисекундах.
  • button: 'left' | 'right' | 'middle' — позволяет выбрать кнопку мыши (по умолчанию 'left').
  • scrollBehavior: 'top' | 'bottom' | 'center' | 'nearest' — управляет прокруткой к элементу перед кликом.

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

cy.get('button.submit').click()
cy.get('a.link').click({ force: true })
cy.get('.checkbox').click({ multiple: true, delay: 200 })

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


Метод dblclick()

Метод dblclick() используется для эмуляции двойного клика левой кнопкой мыши. Двойной клик может применяться для редактирования текста, открытия специальных функций или активации элементов с поддержкой двойного клика.

Синтаксис:

cy.get('селектор').dblclick(options)

Поддерживаемые параметры options:

  • force: true — игнорирует видимость и состояние элемента.
  • delay: 0-1000 — задержка между двумя кликами.
  • scrollBehavior — аналогично click().

Пример:

cy.get('.editable').dblclick()
cy.get('#item').dblclick({ force: true })

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


Метод rightclick()

Метод rightclick() позволяет эмулировать клик правой кнопкой мыши, что полезно для тестирования контекстных меню или функций, активируемых правым кликом.

Синтаксис:

cy.get('селектор').rightclick(options)

Параметры options:

  • force: true — игнорирует видимость элемента.
  • scrollBehavior — управляет прокруткой к элементу.
  • position — координаты клика относительно элемента (topLeft, top, center, bottomRight и т.д.).

Пример:

cy.get('.file').rightclick()
cy.get('.file').rightclick({ position: 'topLeft' })

Особенность rightclick() заключается в том, что оно корректно инициирует события contextmenu, что позволяет тестировать открытие пользовательских меню и обработку событий браузера.


Важные нюансы при использовании методов клика

  1. Асинхронная загрузка элементов: Cypress автоматически выполняет повторные попытки поиска элемента до тех пор, пока он не станет доступен или не истечет таймаут.
  2. Скрытые элементы: по умолчанию click() и dblclick() не работают с невидимыми элементами. Для обхода используется { force: true }.
  3. Совмещение модификаторов: клик может включать клавиши Shift, Ctrl, Alt, что позволяет тестировать сложные сценарии выбора.
  4. Позиция клика: методы поддерживают указание позиции (topLeft, center, bottomRight), что критично для элементов с интерактивными зонами.
  5. Комбинации действий: клики можно сочетать с другими командами Cypress (type(), trigger(), hover()) для построения сложных сценариев тестирования.

Примеры сложных сценариев

Выбор нескольких элементов с зажатым Shift:

cy.get('.item:first').click()
cy.get('.item:last').click({ shiftKey: true })

Двойной клик для редактирования текста и последующий ввод:

cy.get('.editable').dblclick()
cy.get('.editable input').type('Новое значение{enter}')

Тестирование контекстного меню:

cy.get('.file').rightclick()
cy.get('.context-menu .delete').click()

Методы click(), dblclick() и rightclick() обеспечивают гибкое и точное управление интерактивными элементами страницы, позволяя создавать надежные и воспроизводимые сценарии тестирования интерфейса.