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'

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

会感激任何提示。

Answer 1

Proractor默认使用Jasmine作为测试框架，它提供了添加自定义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");

量角器

2 个答案: