使用realhover()无法正确获取按钮hover状态的CSS背景色值

你的问题核心是realHover()触发后，样式未完全生效就执行了断言，或者元素选择不够精准导致断言错误，以下是几种可行的解决方案：

1. 精准定位目标元素 #

如果页面中有多个.g-card__item-link元素，未指定索引会导致后续断言的元素可能不是之前hover的那个，需要明确选中目标元素：

// 选中第一个卡片链接，确认初始颜色
cy.get('.g-card__item-link').eq(0)
  .should('have.css', 'background-color', 'rgb(207, 233, 252)')

// 触发hover并断言hover状态颜色
cy.get('.g-card__item-link').eq(0)
  .realHover()
  .should('have.css', 'background-color', 'rgb(182, 222, 251)')

2. 等待样式过渡完成 #

如果按钮的hover颜色带有CSS过渡动画（transition属性），realHover()执行后颜色需要时间变化，Cypress默认的断言时机太早，可通过回调函数或显式等待解决：

cy.get('.g-card__item-link:first')
  .realHover()
  // 使用回调函数等待颜色更新
  .should($link => {
    const hoverColor = $link.css('background-color')
    expect(hoverColor).to.equal('rgb(182, 222, 251)')
  })

或者直接禁用过渡动画，避免时机问题：

cy.get('.g-card__item-link:first')
  // 禁用元素的过渡动画
  .invoke('css', 'transition', 'none')
  .realHover()
  .should('have.css', 'background-color', 'rgb(182, 222, 251)')

3. 验证颜色的容错处理 #

有时候浏览器会对RGB值做微小调整，或者样式使用的是RGBA（带透明度），可以尝试转换为十六进制颜色进行断言：

// 转换RGB为十六进制断言
cy.get('.g-card__item-link:first')
  .realHover()
  .should($link => {
    const bgColor = $link.css('background-color')
    // 转换RGB为十六进制
    const hexColor = rgbToHex(bgColor)
    expect(hexColor).to.equal('#b6defb') // rgb(182,222,251)对应的十六进制
  })

// 辅助函数：RGB转十六进制
function rgbToHex(rgb) {
  const [r, g, b] = rgb.match(/\d+/g).map(Number)
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
}

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