Cypress 中如何模拟鼠标事件

随着前端技术的不断发展，单页面应用越来越普遍。这些页面的多样化交互，例如点击、拖拽、hover 等都需要用到鼠标事件。而在测试这些交互时，我们可能出于某种原因不能手动操作鼠标，这时就需要用到 Cypress 的模拟鼠标事件的功能。

Cypress 中的鼠标事件

Cypress 中有多个命令用于模拟鼠标事件：

• click 用于模拟单击事件
• rightclick 用于模拟右击事件
• dblclick 用于模拟双击事件
• mousedown 用于模拟鼠标按下事件
• mouseup 用于模拟鼠标抬起事件
• mousemove 用于模拟鼠标移动事件
• trigger 用于模拟任何事件类型

这些命令接受一个选择器或 DOM 元素作为参数，并可以用配置对象来传递事件的详细信息，例如：

cy.get('#button').click()
cy.get('#box').trigger('mousedown', { button: 1 })

以上命令模拟了一个单击按钮和一个按下鼠标左键的事件。

模拟 hover 事件

模拟 hover 事件需要用到 trigger 命令以及一个特殊的字符串 mouseover 和 mouseout：

cy.get('#box')
  .trigger('mouseover')
  .trigger('mousemove', { clientX: 100, clientY: 100 })
  .trigger('mouseout')

以上命令模拟了在一个元素上 hover 并移动鼠标后离开该元素的操作。

Cypress 如何获取鼠标位置？

在模拟鼠标事件时需要知道鼠标的位置，Cypress 提供了 cy.get('body').trigger('mousemove') 命令来获取当前鼠标在页面中的位置。但该命令只能在触发鼠标事件时使用，并且是异步的，所以不能直接使用该命令获取鼠标位置。

但我们可以通过 Cypress 的 cy.window() 命令获取 window 对象，并使用该对象的 onmousemove 事件来追踪鼠标位置：

let mouseX, mouseY
cy.window().then((win) => {
  win.document.addEventListener('mousemove', (event) => {
    mouseX = event.clientX
    mouseY = event.clientY
  })
})

然后可以在模拟鼠标事件时使用 mouseX 和 mouseY 参数：

cy.get('#box').trigger('mousemove', { clientX: mouseX + 10, clientY: mouseY + 10 })

总结

Cypress 的模拟鼠标事件功能可以方便地测试前端页面上的交互效果，包括单击、双击、右键点击、鼠标移动、按下松开等等多种事件。对于需要模拟 hover 事件的场景，需要用特殊的 mouseover 和 mouseout 字符串，并通过 Cypress 的 cy.window() 命令来获取鼠标位置。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464f6cd968c7c53b05ccc5b