集成测试中如何通过派发mousemove事件触发mouseenter/mouseleave？

我正在编写集成测试，希望尽可能真实地模拟用户交互。我的方案是创建一个动画鼠标指针，通过补间实现鼠标移动，用以下代码模拟鼠标移动事件：

eventTarget.dispatchEvent(new MouseEvent("mousemove", {
  clientX: x,
  clientY: y,
  bubbles: true,
}));

测试后发现，这些人工触发的鼠标事件不会触发后续的mouseenter和mouseleave事件。为满足测试需求，我希望这些事件能像真实鼠标移动时一样触发。

我有两个问题：

1. 在浏览器自动化测试场景下，如何触发自然交互带来的后续事件？
2. 我的结论——在HTMLElement所在坐标派发mousemove不会触发相应的mouseenter和mouseleave事件——是否错误？

概念测试代码 #

const innerEl = document.querySelector("#inner")
const mouseEl = document.querySelector("#mouse")
const mouse = {
    x:0, y:0
}
// 派发mousemove时会触发这个事件
document.addEventListener("mousemove",(ev)=>{
    mouse.x = ev.clientX
  mouse.y = ev.clientY
  mouseEl.style.left = mouse.x + "px";
  mouseEl.style.top = mouse.y + "px";
})

// 这些会被触发吗？
innerEl.addEventListener("mouseenter",(ev)=>{
    innerEl.style.backgroundColor="red"
})
innerEl.addEventListener("mouseleave",(ev)=>{
    innerEl.style.backgroundColor = ""
})

const innerLocation = innerEl.getBoundingClientRect()

const frame = (t) => {
    const x = Math.cos(t / 1000 ) * 10 + innerLocation.right;
    const y = Math.sin(t / 1000 ) * 10 + innerLocation.bottom;
    document.dispatchEvent(new MouseEvent("mousemove", {
    clientX: x,
    clientY: y,
    bubbles: true,
  }));
  requestAnimationFrame(frame)
}
requestAnimationFrame(frame)

问题解答 #

1. 浏览器自动化测试中触发自然交互事件的方法 #

直接手动派发MouseEvent属于合成事件，浏览器不会自动为其关联触发mouseenter/mouseleave这类依赖鼠标位置变化的事件。要模拟真实交互的完整事件链，推荐两种方案：

• 使用浏览器自动化工具：比如Playwright、Cypress或Selenium，它们的API（如page.mouse.move()、cy.get().trigger('mouseover')）会模拟真实用户交互的完整流程，自动触发包括mouseenter、mouseleave在内的所有关联事件。这些工具底层会模拟浏览器原生交互逻辑，比手动派发事件更接近真实用户操作。
• 手动跟踪鼠标位置并触发关联事件：如果必须手动实现，需要自己维护鼠标当前所在元素，每次mousemove时计算坐标对应的元素：
  1. 使用document.elementFromPoint(x, y)获取当前坐标下的元素
  2. 对比上一次鼠标所在元素，若发生变化：
     • 向上一次的元素派发mouseleave事件
     • 向当前元素派发mouseenter事件
       这种方式需要自己处理元素层级关系（比如pointer-events属性、嵌套元素的事件冒泡逻辑），复杂度较高。

2. 关于你的结论的正确性 #

你的结论是正确的。当你直接在document上派发mousemove事件时，浏览器不会自动检测鼠标坐标对应的元素，也不会触发mouseenter/mouseleave。这类事件是浏览器在原生交互时，根据鼠标位置变化自动生成的，合成事件不会触发这一检测流程。

即使你把mousemove事件直接派发到目标元素上，也不会触发mouseenter——因为mouseenter是当鼠标从元素外部首次进入时触发的，单纯在元素内部派发mousemove不满足“从外部进入”的条件；同理，mouseleave需要鼠标从元素内部移动到外部才会触发，合成事件也不会自动判断这个状态变化。

内容的提问来源于stack exchange，提问作者Joaquin