trigger
在DOM元素上触发一个事件。
在.trigger()之后继续链式调用依赖该元素的其他命令是不安全的。
语法
.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') // 在链接上触发mousedown事件
错误用法
cy.trigger('touchstart') // 错误，不能直接在'cy'上链式调用
cy.clock().trigger('mouseleave') // 错误，'clock'不返回DOM元素
参数
eventName (String)
要在DOM元素上触发的事件名称。
position (String)
触发事件的位置。默认位置是center。有效位置包括topLeft、top、topRight、left、center、right、bottomLeft、bottom和bottomRight。
x (Number)
距离元素左侧的像素数，用于触发事件。
y (Number)
距离元素顶部的像素数，用于触发事件。
options (Object)
传入一个选项对象以改变.trigger()的默认行为。
| 选项 | 默认值 | 描述 |
|---|---|---|
animationDistanceThreshold | animationDistanceThreshold | 元素随时间必须超过的像素距离才能被视为动画。 |
bubbles | true | 事件是否冒泡 |
cancelable | true | 事件是否可取消 |
eventConstructor | Event | 用于创建事件对象的构造函数（例如MouseEvent、KeyboardEvent） |
force | false | 强制执行操作，禁用等待可操作性 |
log | true | 在命令日志中显示命令 |
scrollBehavior | scrollBehavior | 在执行命令前，元素应滚动到的视口位置 |
timeout | defaultCommandTimeout | 等待.trigger()解析的超时时间 |
waitForAnimations | waitForAnimations | 是否在命令执行前等待元素完成动画。 |
您还可以包含任意事件属性（例如clientX、shiftKey），它们将被附加到事件上。传入坐标参数（clientX、pageX等）将覆盖位置坐标。
生成结果
.trigger()返回与给定相同的元素。- 在
.trigger()之后继续链式调用依赖该元素的其他命令是不安全的。
示例
鼠标事件
在按钮上触发mouseover事件
DOM元素在触发事件之前必须处于"可交互"状态（必须可见且未禁用）。
cy.get('button').trigger('mouseover') // 返回'button'
模拟"长按"事件
cy.get('.target').trigger('mousedown')
cy.wait(1000)
cy.get('.target').trigger('mouseup')
从特定鼠标按钮触发mousedown事件
// 主按钮按下（通常是左键）
cy.get('.target').trigger('mousedown', { button: 0 })
// 辅助按钮按下（通常是中键）
cy.get('.target').trigger('mousedown', { button: 1 })
// 次要按钮按下（通常是右键）
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,
})
cy.get('[data-cy=draggable]').trigger('mousemove', {
which: 1,
pageX: 600,
pageY: 600,
})
cy.get('[data-cy=draggable]').trigger('mouseup')
拖放
变更事件
与范围输入（滑块）交互
要与范围输入（滑块）交互，我们需要设置其值，然后触发适当的事件以表示其已更改。
下面我们调用jQuery的val()方法设置值，然后触发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()
// ... 或 ...
cy.get('button').trigger('click')
cy.get('button').click()
两种类型的命令都会首先验证元素的可操作性，但只有"真正的"操作命令会实现浏览器的所有默认操作，并执行低级操作以满足规范中的定义。
.trigger()只会触发相应的事件，不做其他任何事情。
这意味着您的事件监听器回调将被调用，但不要期望浏览器实际为这些事件"做"任何事情。在大多数情况下，这应该无关紧要，这就是为什么.trigger()是一个很好的临时解决方案，如果您要找的命令/事件尚未实现。
规则
要求
.trigger()需要链式调用返回DOM元素的命令。
断言
超时设置
.trigger()可能会超时等待元素达到可操作状态。.trigger()可能会超时等待您添加的断言通过。
命令日志
在input type='range'上触发change事件
cy.get('.trigger-input-range').invoke('val', 25).trigger('change')
上述命令将在命令日志中显示为：
当点击命令日志中的trigger时，控制台输出以下内容：
历史
| 版本 | 变更 |
|---|---|
| 6.1.0 | 添加选项scrollBehavior |
| 3.5.0 | 为事件添加screenX和screenY属性 |
| 0.20.0 | 添加.trigger()命令 |