[英]RGB/RGBA color values in Protractor
The Story: 故事:
In several places in our test codebase we assert different CSS values to be equal to expected values. 在我们的测试代码库中的几个地方,我们断言不同的CSS值等于期望值。 Usually, this is a
color
, background-color
, font
related style properties, or cursor
. 通常,这是
color
, background-color
, font
相关的样式属性或cursor
。 This question is about dealing with colors. 这个问题是关于处理颜色。
Here is an example working test that currently passes: 以下是当前通过的示例工作测试:
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)");
});
});
It checks that the Download button on the AngularJS website has 0, 116, 204, 1
RGBA value. 它检查该AngularJS网站上的下载按钮具有
0, 116, 204, 1
RGBA值。
Now, if the color would change, the test would fail as, for example: 现在,如果颜色发生变化,测试将失败,例如:
Expected 'rgba(0, 116, 204, 1)' to equal 'rgba(255, 116, 204, 1)'.
The Problems: 问题:
As you can see, first of all, the expectation itself is not quite readable. 正如您所看到的,首先,期望本身并不可读。 Unless we put a comment near it, it is not obvious what color are we expecting to see.
除非我们在其附近发表评论,否则我们期望看到的颜色并不明显。
Also, the error message is not informative. 此外,错误消息不提供信息。 It is unclear what an actual color is and what color are we expecting to see.
目前还不清楚实际的颜色是什么,我们期望看到什么颜色。
The Question: 问题:
Is it possible to improve the test itself and the error message to be more readable and informative and operate color names instead of color RGB/RGBA values ? 是否有可能改进测试本身和错误消息,使其更具可读性和信息性,并且操作颜色名称而不是颜色RGB / RGBA值 ?
Desired expectation : 期望的期望 :
expect(downloadButton).toHaveBackgroundColor("midnight blue");
Desired error messages : 所需的错误消息 :
Expect 'blue' to equal 'black'
Expect 'dark grey' to equal 'light sea green'
Currently, I'm thinking about making a custom jasmine matcher that would convert the RGB/RGBA
value to a custom Color
object that would keep the original value as well as determine the closest color. 目前,我正在考虑制作一个自定义茉莉花匹配器,它将
RGB/RGBA
值转换为自定义Color
对象,该对象将保持原始值并确定最接近的颜色。 color
npm package looks very promising. color
npm包看起来很有前途。
Would appreciate any hints. 非常感谢任何提示。
Protractor uses Jasmine as its testing framework by default and it provides a mechanism for adding custom expectations . Protractor默认使用Jasmine作为其测试框架,它提供了添加自定义期望的机制。
So, you could do something like this: 所以,你可以这样做:
In your protractor config file: 在您的量角器配置文件中:
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
}
And to use it: 并使用它:
expect(downloadButton).toHaveBackgroundColor("midnight blue");
I haven't tried this out, but this is the basic idea of what you need. 我没有试过这个,但这是你需要的基本想法。
I got a working answer based on @Andrew and @Manasov recommendations. 我得到了基于@Andrew和@Manasov建议的工作答案。
So the custom expectation would be like this: 所以自定义的期望是这样的:
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;
}
}
}
We need to first install the necessary packages: 我们需要先安装必要的包:
npm install name-that-color
npm install rgb-hex
We first need to convert the rgb
color into hex. 我们首先需要将
rgb
颜色转换为十六进制。 Also we have to remove the alpha from the color for name-that-color
to actually match it against a color name, it can be removed from the hex
conversion. 此外,我们必须从
name-that-color
颜色的颜色中删除alpha以实际匹配颜色名称,它可以从hex
转换中删除。
Now we can just simple call it like: 现在我们可以简单地称之为:
expect(downloadButton).toHaveColor("midnight blue");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.