Cypress触发mousemove查找日历悬停按钮报元素被覆盖如何解决

你的代码有4个核心问题，直接导致执行失败：

• 事件触发顺序完全违背真实交互逻辑：你先对日期元素触发了mouseout，相当于主动模拟鼠标离开日期区域，直接清掉了日期的悬停状态，后续再在日期元素上触发移动事件完全不符合用户实际操作路径（真实操作是鼠标先移入日期，再向下移动触发按钮展示）。
• 坐标参数使用错误：cy.trigger()传入的(x,y)默认是相对于当前选中元素左上角的偏移值，你硬写的(50,50)没有匹配组件实际的热区位置，刚好落在弹出的按钮上。Cypress触发事件前会做可操作性校验，检查坐标点最上层的元素是不是你当前选中的日历行，发现上层是mybutton就直接抛出遮挡报错，这不是框架问题，是在模拟真实用户无法操作被遮挡元素的场景。
• 元素定位逻辑错误：你用.within()限定在.calendar-row内部查找mybutton，但从报错的DOM结构能看出，弹出的按钮根本不是日历行的子元素，大概率是日历行的相邻节点、或者所属日期单元格的其他子节点，在日历行内部找永远拿不到目标按钮。
• 不要上来就用{force: true}规避报错，这个参数会跳过所有可操作性检查，会让测试用例出现大量假阳假阴结果，完全失去自动化测试的校验意义。

const myDate = dayjs().subtract(5, 'day')
const targetDateText = myDate.format('DD / MM')

// 先锚定目标日期对应的日历行，存为别名方便后续调用
cy.get('.calendar-row').contains(targetDateText).as('targetRow')

// 按真实交互顺序触发鼠标事件：先移入日期区域
cy.get('@targetRow').trigger('mouseover')
// 再向下小幅移动鼠标，y轴偏移值根据实际组件高度调整，比如日期行高32px，向下偏移20px刚好到按钮触发热区，不要偏移过大直接落到按钮上
cy.get('@targetRow').trigger('mousemove', {
  offsetX: 10,
  offsetY: 20
})

// 调整按钮定位逻辑：如果按钮是日历行的相邻兄弟节点用next，否则就先找到日期所属的公共父容器（比如日历单元格calendar-cell）再查找按钮
cy.get('@targetRow')
  .closest('.calendar-cell') // 按实际DOM结构替换公共父容器的选择器
  .find('.mybutton')
  .should('be.visible')

• 如果不确定按钮和日历行的DOM层级关系，测试运行到悬停步骤时，直接在Cypress Runner里点击审查弹出的按钮，看它的父节点结构，再调整定位逻辑即可。
• 偏移值不要硬写：先量一下目标日期行的高度，y轴偏移控制在日期行高度的1/2到2/3区间，刚好能触发按钮展示，又不会直接移到按钮上触发遮挡报错。

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