В автоматизированном тестировании веб-приложений взаимодействие с элементами страницы является ключевым аспектом. 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, что позволяет
тестировать открытие пользовательских меню и обработку событий
браузера.
click()
и dblclick() не работают с невидимыми элементами. Для
обхода используется { force: true }.Shift, Ctrl, Alt, что
позволяет тестировать сложные сценарии выбора.topLeft, center, bottomRight),
что критично для элементов с интерактивными зонами.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() обеспечивают гибкое и точное управление
интерактивными элементами страницы, позволяя создавать надежные и
воспроизводимые сценарии тестирования интерфейса.