Значения цветов RGB/RGBA в Protractor

История:

В нескольких местах в нашей тестовой кодовой базе мы утверждаем, что разные значения 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'

В настоящее время я подумываю о создании настраиваемого набора жасмина, который преобразует значение RGB/RGBA в пользовательский объект color, который сохранит исходное значение, а также определит ближайший цвет. color пакет npm выглядит очень многообещающим.

Поблагодарили бы за любые подсказки.

Ответ 1

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

Я не пробовал это, но это основная идея того, что вам нужно.

Ответ 2

Я получил рабочий ответ на основе рекомендаций @Andrew и @Manasov.

Таким образом, пользовательское ожидание будет следующим:

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

Нам нужно сначала установить необходимые пакеты:

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

Сначала нам нужно преобразовать цвет rgb в шестнадцатеричный. Также нам нужно удалить альфа из цвета для name-that-color, чтобы на самом деле сопоставить его с именем цвета, его можно удалить из преобразования hex.

Теперь мы можем просто просто называть его:

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