.trigger()

在DOM元素上触发指定事件

语法格式

  1. .trigger(eventName)
  2. .trigger(eventName, position)
  3. .trigger(eventName, options)
  4. .trigger(eventName, x, y)
  5. .trigger(eventName, position, options)
  6. .trigger(eventName, x, y, options)

参数讲解

eventName

需要触发事件名称

position

每个元素都有九个 position，具体可看下图
Cypress系列（23）- 可操作类型的命令 之 trigger() - 图1

x , y

距离 DOM 元素左上角的坐标，x 是横轴，y 是竖轴

options

Cypress系列（23）- 可操作类型的命令 之 trigger() - 图2

除了上述的通用 option，还有一些事件特有的 options
Cypress系列（23）- 可操作类型的命令 之 trigger() - 图3　　

  • clientX、clientY：相对于浏览器左上角的距离
  • pageX、pageY：相对于整个页面左上角的距离
  • screenX、screenY：相对于电脑屏幕左上角的距离

正确用法

  1. //  在 a 标签上触发 mousedown 事件
  2. cy.get('a').trigger('mousedown')

错误用法

  1. // 不能直接通过 cy 调用
  2. cy.trigger('mousedown')
  3. // location 并不是 DOM 元素
  4. cy.location().trigger('mousedown')

鼠标事件的栗子

前言

在 DOM 元素上触发事件之前，DOM 元素必须处于【可交互】状态（必须可见并 且不能禁用）

hover 的栗子

Cypress系列（23）- 可操作类型的命令 之 trigger() - 图4

长按的栗子

Cypress系列（23）- 可操作类型的命令 之 trigger() - 图5

不同的鼠标按钮

Cypress系列（23）- 可操作类型的命令 之 trigger() - 图6

添加 options 的栗子

指定事件不应该冒泡

  1. cy.get('#s-usersetting-top').trigger('mouseover', {bubbles: false})

默认情况下，指定的事件将在 DOM 树中冒泡。false 可以防止事件冒泡

设置 clientX 和 clientY

这将覆盖基于元素本身的默认自动定位（x、y），对于 mousemove 之类的事件很有用，可能需要将元素拖动到元素本身之外的地方，基于浏览器本身的X、Y坐标

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


结尾
本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解
对书籍感兴趣的，大家可以参考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考虑自身需求进行购买

https://www.cnblogs.com/poloyy/p/13066031.html