Hex是什么鬼, 我该怎么用playwright去检查控件的颜色

Hex是什么鬼, 我该怎么用playwright去检查控件的颜色

· 1,102 词 · 6 分钟 读完 playwright进阶 翻译

图片2

别担心,这不是一个你必须在红色和蓝色之间选择的《黑客帝国》场景。我是一个视觉型的人,用图表、图片或者更好的面部表情来解释事情对我来说更容易。由于互联网还没有准备好展示我的面部表情,让我们用图片来说明。

在运行我的登录检查时,Playwright 做得非常好。它使用我们的数据测试 ID 找到“登录”按钮并点击它。然而,我正在开发的应用程序允许终端用户自定义颜色,这意味着管理员可以更改按钮和背景的颜色。这不是我每次发布都想测试的事情,所以我必须测试一下 Playwright 的能力。我能否用 Playwright 轻松检查按钮的颜色?还是最终不得不使用 JavaScript 去搞定?

事实证明,您可以检查按钮的颜色。只需使用 .toHaveCSS() (官方文档链接)

当然,我不会只给你上面的链接然后祝你好运。让我们一起为按钮写一个断言。

一切都从检查你想要检查颜色的元素开始。在我们的例子中,这是“登录”按钮,这是它在开发者工具中的样子:

图片3

当您点击元素时,会发现很多 CSS 属性。这里有一个有用的技巧:使用右侧样式标签中的搜索框并输入“background”或“color”以过滤出您需要的特定属性。

如您所见,在此示例中,背景色不仅是蓝色,而是“#031df4”。这是该特定颜色的十六进制代码。
❤️ 如果你现在有点迷茫,你可以简单地搜索“十六进制颜色代码解释”,然后回来更好地理解。

根据文档,我们有我们需要的一切:

  • locator(登录按钮)
  • CSS 属性名称(background-color
  • CSS 属性值(#031df4)。

让我们编写检查并运行它:

图片4

将十六进制颜色代码传递给 .toHaveCSS()

它失败了,因为 .toHaveCSS() 期望你传递特定格式的 RGB 颜色作为background-color
❤️ 如果你现在有点迷茫,你可以简单地搜索“RGB 颜色代码解释”,并且也许“RGB vs hex”以更好地理解。

你需要将十六进制颜色代码转换为 RGB 颜色代码。快速搜索搜索后,我找到了一个不需要使用库的简单解决方案:

export function convertHexToRGB(hex) {
  // 如果输入中包含 '#',则将其删除
  hex = hex.replace(/^#/, "");

  // 将十六进制值解析为单独的 R、G 和 B 值
  const red = parseInt(hex.substring(0, 2), 16);
  const green = parseInt(hex.substring(2, 4), 16);
  const blue = parseInt(hex.substring(4, 6), 16);

  // 以对象形式返回 RGB 值
  return {
    red: red,
    green: green,
    blue: blue,
  };
}

将十六进制转换为 RGB

我将其保存到我的 ./lib 文件夹中,然后导入到规范文件中:

图片5

将十六进制转换为 RGB -> console.log(RGB 颜色) -> 在 .toHaveCSS() 检查中使用 RGB 颜色

测试通过了!现在,我有一个检查,以确保按钮的颜色正是我期望的。我还添加了对禁用按钮的检查。这样,如果禁用按钮的代码发生变化,我将是第一个知道的人。(注意:在我的应用程序中,禁用按钮没有使用background-color属性,而是使用color属性,因此始终要勤勉并首先手动检查属性。)

如果您在一个规范文件中有多个 .toHaveCSS() 断言,最好将它们抽象到您的“./lib”文件夹(或您保留固定装置的任何地方)中,以提高代码的可读性。

export async function checkColor(element, cssProperty, rgbColors) {
  await expect(element).toHaveCSS(cssProperty, `rgb(${rgbColors.red}, ${rgbColors.green}, ${rgbColors.blue})`);
}

将断言移到 ./lib 文件夹中

最后,这是一个颜色检查如何在使用页面对象模式、抽象的 convertHexToRGB()checkColor() 的规范文件中显示的示例:

图片6


图片7

来源

来源链接: What the Hex, or How I Check Colors With Playwright

发布时间: 2023-10-30