javascript - Protractor 中的 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

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

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