Protractor中的RGB/RGBA颜色值

Question

故事：

在我们的测试代码库中，有几个地方断言不同的CSS值等于期望值。通常，这是与颜色、背景颜色、字体相关的样式属性或游标有关的。这个问题是关于如何处理颜色的。

这里有一个目前通过的工作测试示例：

describe("AngularJS home page", function () {
    beforeEach(function () {
        browser.get("https://angularjs.org/");
    });

    it("should show a blue Download button", function () {
        var downloadButton = element(by.partialLinkText("Download"));

        expect(downloadButton.getCssValue("background-color")).toEqual("rgba(0, 116, 204, 1)");
    });
});

它检查AngularJS网站上的下载按钮是否具有 0, 116, 204, 1 RGBA值。

现在，如果颜色发生变化，测试将失败，例如：

Expected 'rgba(0, 116, 204, 1)' to equal 'rgba(255, 116, 204, 1)'.

问题：

• 首先，如您所见，期望值本身并不容易阅读。除非我们在附近加上注释，否则不清楚我们期望看到什么颜色。

• 另外，错误消息也不够信息化，不清楚实际颜色和期望看到的颜色是什么。

问题：

是否可能改进测试本身和错误消息，使其更易读、信息更丰富，并使用颜色名称而不是颜色RGB/RGBA值？

期望结果：

expect(downloadButton).toHaveBackgroundColor("midnight blue");

期望的错误信息:

Expect 'blue' to equal 'black'
Expect 'dark grey' to equal 'light sea green'

---

目前，我正在考虑制作一个自定义的jasmine匹配器，它将把RGB/RGBA值转换为一个自定义的Color对象，该对象将保留原始值并确定最接近的颜色。 color npm包看起来非常有前途。

欢迎任何提示。

- alecxe

---

所有计算出的值是否保证对应命名颜色？ - BoltClock

@BoltClock 很好的问题。我会坚持使用一些基本的映射来将 RGB -> 颜色名称，如果找不到颜色名称，我们可以显示实际的原始 RGB(A) 值。我知道这可能不是万无一失的，但我希望它是实用的。 - alecxe

大多数网站都有自己的一组颜色，通常不太多，但这取决于设计。我建议创建一个简单的JS对象来作为颜色和颜色名称的映射表，专门针对你的网站，而不是依赖其他库： { 'red': 'rgba(255, 0, 0, 1)', 'blue': 'rgba(0, 0, 255, 1)' } 并与它们进行匹配。 - Michael Radionov

@alecxe 我编写的测试针对类，但即使按照Michael的建议，它也可能是{'warning': 'rgb(255, 0, 0, 1)'}。尽管如此，这仍然比我想要处理的低，并且人类“视觉”测试可以更好地捕捉布局/渲染缺陷 - 这在不同设备上可能以许多荒谬的方式表现出来 - 比Selenium更好。 - user2864740

你也可以使用Jasmine自定义匹配器和name-that-color包。 - Manasov Daniel

Answer 1

默认情况下，Protractor使用Jasmine作为其测试框架，并提供一种添加自定义expectations的机制。

因此，您可以执行以下操作：

在您的protractor配置文件中：

var customMatchers = {
  toHaveBackgroundColor: function(util, customEqualityTesters) {
      compare: function(actual, expected) {
        result.pass = util.equals(extractColor(actual), convertToRGB(expected), customEqualityTesters);
        result.message = 'Expected ' + actual + ' to be color ' + expected';
      }
   }
}

jasmine.addMatchers(customMatchers);

function convertToRGB(color) {
  // convert a named color to rgb
}

function extractColor(domElement) {
  // extract background color from dom element
}

而且使用它：

expect(downloadButton).toHaveBackgroundColor("midnight blue");

我还没有尝试过这个，但这是你所需的基本想法。

- Andrew Eisenberg

---

抱歉造成困惑，"自定义茉莉匹配器"部分是我已经熟悉的内容。在这里，我主要关注最可靠的convertToRGB步骤实现...可能正在寻找我们可以从中制作可重用库的通用内容..谢谢！ - alecxe

Answer 2

我得到了一个工作答案，基于@Andrew和@Manasov的建议。

因此，自定义期望将是这样的：

var nameColor = require('name-that-color/lib/ntc');
var rgbHex = require('rgb-hex');

toHaveColor: function() {
    return {
        compare: function (elem, color) {
            var result = {};
            result.pass = elem.getCssValue("color").then(function(cssColor) {
                var hexColor = rgbHex(cssColor);
                var colorName = nameColor.name('#' + hexColor.substring(0, 6).toUpperCase());
                result.message = "Expect '" + colorName[1] + "' to equal '" + color + "'";
                return colorName[1] === color;
            });
            return result;
        }
    }
}

我们需要先安装必要的软件包：

npm install name-that-color
npm install rgb-hex

我们首先需要将rgb颜色转换为十六进制。此外，我们还需要从颜色中删除alpha通道，以便name-that-color可以将其与颜色名称匹配，这可以从hex转换中删除。

现在我们只需要简单地调用它，如下所示：

expect(downloadButton).toHaveColor("midnight blue");

- eLRuLL