hover

Cypress не имеет команды cy.hover(). См. вопрос № 10.

Если cy.hover() используется, отобразится ошибка и произойдёт перенаправление на эту страницу.

Обходные пути

Иногда элемент имеет специфическую логику при наведении курсора, и вам необходимо «наведение» в Cypress. Возможно, элемент не отображается как кликабельный, пока вы не наведёте курсор на другой элемент.

Часто вы можете использовать .trigger(), .invoke() или cy.wrap(), чтобы отобразить элемент перед выполнением действия.

Проверьте пример рецепта по тестированию наведения курсора и работе со скрытыми элементами. Также обратите внимание на плагин cypress-real-events, который предоставляет родные события, такие как наведение и свайп в браузерах Chromium.

Триггер

Если поведение при наведении курсора зависит от события JavaScript, например, от mouseover, вы можете запустить это событие, чтобы добиться этого поведения.

Использование .trigger() повлияет только на события в JavaScript и не вызовет никаких эффектов в CSS.

В качестве обходного пути ознакомьтесь с рецептом, использующим удалённую отладку Chrome, чтобы установить псевдоклассы, такие как hover.

Имитация события mouseover для отображения всплывающей подсказки

cy.get('.menu-item').trigger('mouseover')
cy.get('.popover').should('be.visible')

Вызов

Пример отображения элемента для выполнения действия

cy.get('.hidden').invoke('show').click()

Принудительный клик

Вы также можете принудительно выполнить действие над элементом независимо от того, виден ли он или нет.

Пример нажатия на скрытый элемент

cy.get('.hidden').click({ force: true })

Пример проверки скрытого элемента

cy.get('.checkbox').check({ force: true })

Добавление в качестве пользовательской команды

Хотя в Cypress нет встроенной команды cy.hover(), это зарезервированная команда. Поэтому, чтобы добавить cy.hover() в качестве пользовательской команды, следует использовать Cypress.Commands.overwrite(), а не Cypress.Commands.add().

Cypress.Commands.overwrite('hover', (originalFn, ...otherArgs) => {})

См. также

Мы показываем, как использовать команду .trigger и плагин cypress-real-events для тестирования элементов с состояниями наведения курсора в видео Пример наведения курсора в Cypress с исходным кодом, доступным в репозитории bahmutov/cy-hover-example.

• .invoke()
• .trigger()
• cy.wrap()
• Cypress.Commands.overwrite()
• Рецепт: Наведение курсора и скрытые элементы
• запись блога Наведение курсора в Cypress Филипа Хрица