trigger

Сгенерировать событие на элементе DOM.

Синтаксис

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, options)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, x, y, options)

Использование

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

cy.get('a').trigger('mousedown') // Trigger mousedown event on link

Неправильное использование

cy.trigger('touchstart') // Errors, cannot be chained off 'cy'
cy.location().trigger('mouseleave') // Errors, 'location' does not yield DOM element

Аргументы

eventName (Строка)

Имя event, которое нужно сгенерировать на элементе DOM.

position (Строка)

Позиция, в которой должно быть сгенерировано событие. Позиция center является позицией по умолчанию. Допустимые позиции: topLeft, top, topRight, left, center, right, bottomLeft, bottom, и bottomRight.

x (Число)

Расстояние в пикселях от левого края элемента до места генерации события.

y (Число)

Расстояние в пикселях от верхнего края элемента до места генерации события.

options (Объект)

Передайте объект options, чтобы изменить поведение .trigger() по умолчанию.

Вы также можете включать произвольные свойства события (например, clientX, shiftKey) и они будут присоединены к событию. Передача координатных аргументов (clientX, pageX, и т.д.) перезапишет координаты позиции.

Возвращает

• .trigger() возвращает тот же объект, который был передан из предыдущей команды.

Примеры

События мыши

Сгенерировать событие mouseover на кнопке

Элемент DOM должен быть в состоянии "взаимодействия" перед срабатыванием сгенерированного события (он должен быть видимым и не отключенным).

cy.get('button').trigger('mouseover') // yields 'button'

Имитация события "длительного нажатия"

cy.get('.target').trigger('mousedown')
cy.wait(1000)
cy.get('.target').trigger('mouseup')

Сгенерировать событие mousedown от определенной кнопки мыши

// Main button pressed (usually the left button)
cy.get('.target').trigger('mousedown', { button: 0 })
// Auxiliary button pressed (usually the middle button)
cy.get('.target').trigger('mousedown', { button: 1 })
//Secondary button pressed (usually the right button)
cy.get('.target').trigger('mousedown', { button: 2 })

jQuery UI Sortable

Для имитации перетаскивания с помощью jQuery UI sortable требуется pageX и pageY свойства вместе с which:1.

cy.get('[data-cy=draggable]')
  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
  .trigger('mouseup')

Перетаскивание

Посмотрите наш пример рецепта, генерирующий события мыши и перетаскивания для тестирования перетаскивания

Событие изменения

Взаимодействие с ползунком диапазона

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

Ниже мы вызываем метод val() jQuery для установки значения, а затем генерируем событие change.

Обратите внимание, что некоторые реализации могут полагаться на событие input вместо этого, которое срабатывает, когда пользователь перемещает ползунок, но не поддерживается некоторыми браузерами.

cy.get('input[type=range]').as('range').invoke('val', 25).trigger('change')

cy.get('@range').siblings('p').should('have.text', '25')

Позиция

Сгенерировать событие mousedown в правом верхнем углу кнопки

cy.get('button').trigger('mousedown', 'topRight')

Координаты

Укажите явные координаты относительно верхнего левого угла

cy.get('button').trigger('mouseup', 15, 40)

Опции

Укажите, что событие не должно всплывать

По умолчанию событие будет всплывать вверх по дереву DOM. Это предотвратит всплытие события.

cy.get('button').trigger('mouseover', { bubbles: false })

Укажите точные значения clientX и clientY события

Это переопределяет автоматическое позиционирование, основанное на самом элементе. Полезно для событий, таких как mousemove, где вам нужно, чтобы позиция была вне самого элемента.

cy.get('button').trigger('mousemove', { clientX: 200, clientY: 300 })

Генерация других типов событий.

По умолчанию, cy.trigger() генерирует Event. Но вы можете захотеть сгенерировать другие события, такие как MouseEvent или KeyboardEvent.

В этом случае используйте опцию eventConstructor.

cy.get('button').trigger('mouseover', { eventConstructor: 'MouseEvent' })

Примечания

Возможность действий

Элемент должен сначала достичь возможности действий

.trigger() - это "команда действия", которая следует всем правилам возможности действий.

События

Какое событие я должен сгенерировать?

cy.trigger() предназначен для использования в качестве вспомогательной функции, которая упрощает генерацию событий по сравнению с ручным их созданием и отправкой. Поскольку любое произвольное событие может быть сгенерировано, Cypress старается не делать предположений о том, как оно должно быть сгенерировано. Это означает, что вам нужно знать детали реализации (которые могут находиться в сторонней библиотеке) обработчика(ов) событий, получающих событие, и предоставить необходимые свойства.

Почему я должен вручную установить тип события?

Как вы можете видеть в документации MouseEvent, большинство свойств экземпляров класса события являются только для чтения. Из-за этого иногда невозможно установить значение некоторых свойств, таких как pageX, pageY. Это может быть проблематично при тестировании некоторых ситуаций.

Отличия

В чем разница между генерацией события и вызовом соответствующей команды Cypress?

Другими словами, в чем разница между:

cy.get('button').trigger('focus')
cy.get('button').focus()

// ... or ...

cy.get('button').trigger('click')
cy.get('button').click()

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

.trigger() только сгенерирует соответствующее событие и ничего не сделает больше.

Это означает, что ваши обработчики событий будут вызываться, но не ожидайте, что браузер что-либо «сделает» для этих событий. В большинстве случаев это не должно иметь значения, поэтому .trigger() отлично подходит в качестве временного решения, если команда/событие, которое вы ищете, еще не реализовано.

Правила

Требования

• .trigger() требует цепочки команд, которые возвращают DOM-элемент(ы).

Утверждения

• .trigger() автоматически будет ожидать, пока элемент достигнет состояния готовности к действию
• .trigger() автоматически повторит попытки до тех пор, пока все присоединённые утверждения не пройдут.

Таймауты

• .trigger() может выйти за пределы таймаута, ожидая, пока элемент достигнет состояния готовности к действию.
• .trigger() может выйти за пределы таймаута, ожидая прохождения всех утверждений, которые вы добавили.

Журнал команд

Сгенерировать событие change на элементе input type='range'

cy.get('.trigger-input-range').invoke('val', 25).trigger('change')

Команды выше будут отображаться в журнале команд как:

При нажатии на trigger в журнале команд консоль выведет следующее:

История

См. также

• .blur()
• .check()
• .click()
• .focus()
• .rightclick()
• .select()
• .submit()
• .type()
• .uncheck()