自動化測試如何比較顏色

引言

在作Nightwatch自動化測試中，出現須要比較顏色的時候如何來作？

基本的思路是首先須要取到這個element的顏色值，而後跟預期的顏色進行對比。
好比我要取下面這個會話窗口的顏色，選中這個圖標，按F12，查看這個圖標的屬性。發現Angular中的顏色屬性不是Elements下，是在Styles下面，如何取到這個顏色值？

這裏會用到getCssProperty這個方法，具體如何使用，請看以下代碼：

getChatColor: function(cb) {

const chat = '[ng-click="show()"]'

this.getCssProperty('@chat', 'background-color', function(result) {

cb(result.value);

});

return this;

},

將上面的getChatColor command代碼放到一個叫chat.js的page下面，而後在測試用例中這樣調用這個command,

'Test get color': function (client) {

var chat = client.page.chat();

let chatColor;

chat.navigate();

chat.getChatColor(function(color) {

chatColor = color;

});

client.perform(function() {

client.assert.equal(chatColor, 'rgba(50, 104, 152, 1)');

});

}

截圖中看到的background color是rgb(50, 104, 152), 可是getChatColor返回指是rgba，rgb和rgba之間須要轉化一下，a表示透明度，取值0~1之間。