RGB/RGBA 量角器中的颜色值

Question

故事：

在我们的测试代码库的几个地方，我们断言不同的 CSS 值等于预期值。通常，这是 color、background-color、font 相关的样式属性，或 cursor。这个问题是关于处理颜色的。

这是一个当前通过的工作测试示例：

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 包看起来很有前途。

如有任何提示，我们将不胜感激。

Answer 1

量角器使用 Jasmine as its testing framework by default and it provides a mechanism for adding custom expectations.

所以，你可以这样做：

在你的量角器配置文件中：

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");

我还没有尝试过，但这是您需要的基本思路。

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颜色转换成十六进制。此外，我们还必须从 name-that-color 的颜色中删除 alpha 以使其与颜色名称实际匹配，它可以从 hex 转换中删除。

现在我们可以简单地调用它：

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

RGB/RGBA 量角器中的颜色值

RGB/RGBA color values in Protractor

javascript

css

rgba

jasmine

protractor