如何在Cypress中测试按钮的焦点与悬停状态（截图/&::after）？

一、修复realHover+截图的失效问题 #

之前的截图方案未生效，大概率是元素渲染时机、依赖缺失或命令顺序问题，调整后流程如下：

• 先确保目标按钮完全就绪：cy.get('button').should('be.visible')
• 确认已安装cypress-real-events依赖（realHover属于该插件，未安装会直接失效）
• 等待样式动画完成（可根据组件实际渲染速度调整等待时长）
• 仅对目标按钮截图，避免页面其他元素干扰：

cy.get('button')
  .should('be.visible')
  .realHover()
  .wait(300) // 等待悬停样式渲染完成
  .matchImageSnapshot('button-hover-state');

如果组件是动态加载的，可增加样式稳定断言，比如cy.get('button').should('have.css', 'opacity', '1')，确保动画结束后再截图。

二、绕过SCSS变量检测伪元素状态 #

针对&::after背景色由SCSS变量控制无法直接获取的问题，可通过以下两种方式解决：

1. 获取伪元素计算后样式 #

用window.getComputedStyle直接读取伪元素渲染后的实际样式，无需依赖原SCSS变量：

cy.get('button').realFocus().then(($btn) => {
  const afterStyle = window.getComputedStyle($btn[0], '::after');
  const computedBgColor = afterStyle.backgroundColor;
  // 断言计算后的颜色值（注意格式为rgb/rgba）
  expect(computedBgColor).to.equal('rgb(255, 87, 34)');
});

2. 间接验证状态特征 #

若颜色值难以固定，可断言伪元素的可见性、尺寸等变化：

cy.get('button').realFocus().then(($btn) => {
  const afterStyle = window.getComputedStyle($btn[0], '::after');
  expect(afterStyle.opacity).to.equal('1');
  expect(afterStyle.width).to.equal('100%');
});

三、替代方案：触发原生事件模拟状态 #

如果realHover/realFocus仍有兼容性问题，直接用Cypress原生trigger命令触发事件：

• 模拟悬停：cy.get('button').trigger('mouseover')
• 模拟焦点：cy.get('button').trigger('focus')
  触发后再执行截图或样式断言，部分组件对原生事件的响应更稳定。

内容的提问来源于stack exchange，提问作者Maxime Ghéraille