量角器中的RGB/RGBA颜色值

故事:

在我们的测试代码库中的几个地方,我们断言不同的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, 1RGBA值.

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

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对象,该对象将保持原始值并确定最接近的颜色.colornpm包看起来很有前途.

非常感谢任何提示.

Protractor 默认使用Jasmine作为其测试框架,它提供了添加自定义期望的机制.

所以,你可以这样做:

在您的量角器配置文件中:

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

我没有试过这个,但这是你需要的基本想法.