Цветовые значения RGB/RGBA в транспортире

История:

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

Буду признателен за любые советы.

Источник

2 ответа

Решение

По умолчанию 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");

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

Источник

Я получил рабочий ответ, основываясь на рекомендациях @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");
Источник
Другие вопросы по тегам