如何在E2E测试中验证元素hover时的十六进制背景样式？

针对你的需求，有两个核心优化方向：一是避免断言冗长的完整background属性，二是将计算后的RGB颜色转换为十六进制值进行匹配，具体实现如下：

方案1：自定义RGB转十六进制辅助函数 #

首先，我们只需要获取background-color（而非整个background属性），这样能聚焦在颜色本身，避免其他背景属性（如重复方式、定位）干扰断言。然后通过辅助函数将浏览器返回的RGB格式转换为十六进制：

// 辅助函数：将RGB字符串转换为十六进制
function rgbToHex(rgbStr) {
  const rgbMatch = rgbStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  if (!rgbMatch) return rgbStr;
  
  const [, r, g, b] = rgbMatch;
  const hexComponent = (val) => parseInt(val).toString(16).padStart(2, '0');
  return `#${hexComponent(r)}${hexComponent(g)}${hexComponent(b)}`;
}

it('changes style on hover', async () => {
  const page = await newE2EPage();
  await page.setContent('<some-button></some-button>');

  const button = await page.find('some-button >>> button');
  await button.hover();
  await page.waitForChanges();
  
  // 只获取背景颜色值
  const computedBgColor = (await button.getComputedStyle()).backgroundColor;
  const hexBgColor = rgbToHex(computedBgColor);
  
  // 直接断言十六进制颜色
  expect(hexBgColor).toBe('#686B95');
});

方案2：在浏览器环境中直接转换 #

你也可以通过page.evaluate在浏览器上下文内完成颜色转换，无需额外定义辅助函数：

it('changes style on hover', async () => {
  const page = await newE2EPage();
  await page.setContent('<some-button></some-button>');

  const button = await page.find('some-button >>> button');
  await button.hover();
  await page.waitForChanges();
  
  // 在浏览器环境中获取并转换颜色
  const hexBgColor = await page.evaluate((element) => {
    const rgbColor = getComputedStyle(element).backgroundColor;
    const [r, g, b] = rgbColor.match(/\d+/g).map(Number);
    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
  }, button);
  
  expect(hexBgColor).toBe('#686B95');
});

关键优化点说明 #

• 聚焦background-color：浏览器返回的background属性包含大量无关信息（如repeat、scroll等），断言background-color能让测试更精准，避免因浏览器格式差异导致的断言失败。
• 颜色格式转换：浏览器计算后的样式会将十六进制颜色转为RGB格式，通过转换后再断言，就能直接匹配你CSS中定义的十六进制值。

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