Cypress中无法截取处于hover状态元素的截图如何解决

问题复现 #

对带hover悬停效果的元素执行截图操作时，截图始终无法呈现对应的hover效果，复现代码如下：

tableListMaps.lineWithText('Hello world', 'myLine');
cy.get('@myLine').realHover().within(() => {
  highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE);
});
cy.screenshot('downloadScreenshot');

实际表现：手动将鼠标悬停到对应元素上时，可看到此前尝试高亮的内容已经成功生效，但该悬停高亮状态并未被截图功能捕获。

可行解决方案 #

• 将截图操作移入hover的链式作用域内
  realHover()触发的悬停状态会在当前链式命令执行结束后自动释放，原代码中screenshot()调用在within()回调执行完成之后，此时hover状态已经消失。直接把截图逻辑放到hover的链式上下文里即可，修改后代码：

  tableListMaps.lineWithText('Hello world', 'myLine');
  cy.get('@myLine').realHover().within(() => {
    highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE);
    // 不跳出hover作用链，直接执行截图
    cy.screenshot('downloadScreenshot');
  });
  

• 手动注入hover状态样式，绕开鼠标事件依赖
  如果链式调用调整后仍不生效，可以直接给元素绑定hover对应的视觉状态，不依赖鼠标悬停事件：

  • 若使用组件库，先确认组件hover状态对应的类名（比如部分组件库的hover状态类为is-hover、组件激活类为对应前缀加active），通过cy.get(目标元素).invoke('addClass', '对应hover类名')直接给元素加上状态类，再执行截图。
  • 若效果是原生CSS:hover伪类实现，直接把:hover下的所有CSS样式作为行内样式通过invoke('attr', 'style', '样式内容')注入到目标元素上，强制视觉状态留存后再截图。

• 延长realHover的悬停保持时长
  给realHover传入配置参数，拉长悬停停留时间、等待hover动画执行完成，避免截图触发时状态已经消失：

  cy.get('@myLine').realHover({
    waitForAnimations: true, // 等待hover关联的过渡动画执行完成
    hoverDelay: 200 // 延长悬停保持时长，单位毫秒，可根据实际情况调整
  }).within(() => {
    highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE);
    cy.screenshot('downloadScreenshot');
  });
  

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