RGB/RGBA-Farbwerte in Protractor

Question

Die Story:

An mehreren Stellen in unserem Test Codebasis behaupten wir verschiedene CSS-Werte mit den erwarteten Werten gleich zu sein. Normalerweise ist dies eine color, background-color, font ähnliche Stileigenschaften oder cursor. In dieser Frage geht es um den Umgang mit Farben.

Hier ist ein Beispiel Arbeits Test, der zur Zeit passiert:

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

Es prüft, ob die Schaltfläche Download auf der Website AngularJS hat 0, 116, 204, 1 Wert RGBA.

Wenn nun die Farbe ändern würde, würde der Test nicht bestehen, wie zum Beispiel:

Expected 'rgba(0, 116, 204, 1)' to equal 'rgba(255, 116, 204, 1)'. 

Die Probleme:

• Wie Sie zunächst einmal sehen kann, die Erwartung selbst ist nicht gut lesbar. Wenn wir nicht in der Nähe einen Kommentar abgeben, ist nicht klar, welche Farbe wir erwarten.

• Auch die Fehlermeldung ist nicht informativ. Es ist unklar, was eine tatsächliche Farbe ist und welche Farbe wir erwarten zu sehen.

Die Frage:

Ist es möglich, den Test selbst und die Fehlermeldung zu verbessern besser lesbar und informativ zu sein und Farbnamen anstelle der Farbe RGB/RGBA-Werte betreiben?

Wunsch Erwartung:

expect(downloadButton).toHaveBackgroundColor("midnight blue"); 

Wunschfehlermeldungen:

Expect 'blue' to equal 'black' 
Expect 'dark grey' to equal 'light sea green' 

---

Derzeit Ich denke über eine benutzerdefinierte Jasmin Matcher machen, die den RGB/RGBA Wert umwandeln würde zu einem benutzerdefinierten Color Objekt, das den Ursprung behalten würde al-Wert sowie bestimmen Sie die nächste Farbe. color npm Paket sieht sehr vielversprechend aus.

Würde mich über irgendwelche Hinweise freuen.

Answer 1

Protractor verwendet standardmäßig Jasmine als Testframework und bietet einen Mechanismus zum Hinzufügen von benutzerdefiniertem expectations.

In Ihrem Winkelmesser Konfigurationsdatei:

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 
} 

und verwenden es:

Also, Sie so etwas tun könnte

expect(downloadButton).toHaveBackgroundColor("midnight blue"); 

Ich habe nicht ausprobiert, aber das ist die Grundidee von dem, was Sie brauchen.

Answer 2

Ich habe eine funktionierende Antwort basierend auf @Andrew und @Manasov Empfehlungen.

So ist die individuelle Erwartung würde so aussehen:

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; 
     } 
    } 
} 

Wir müssen zunächst die erforderlichen Pakete installieren:

npm install name-that-color 
npm install rgb-hex 

wir zuerst die rgb Farbe in hex konvertieren müssen. Außerdem müssen wir das Alpha aus der Farbe für name-that-color entfernen, um es tatsächlich mit einem Farbnamen abzugleichen, es kann aus der hex Umwandlung entfernt werden.

Jetzt können wir nur einfach nennen es mag:

expect(downloadButton).toHaveColor("midnight blue");