Цветовые значения 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 выглядит очень многообещающе.

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


javascript css jasmine protractor rgba
person alecxe    schedule 27.12.2015    source источник
comment
Гарантировано ли, что все вычисленные значения соответствуют именованным цветам?   -  person BoltClock    schedule 27.12.2015
comment
@BoltClock хороший вопрос. Я бы придерживался некоторого базового сопоставления между именем цвета rgb->, и если имя цвета не найдено, мы можем просто показать фактическое исходное значение rgb(a). Я понимаю, что это, вероятно, не будет пуленепробиваемым, но надеюсь практично.   -  person alecxe    schedule 27.12.2015
comment
У большинства сайтов свой набор цветов, обычно их немного, но это зависит от дизайна. Я бы подумал о создании простого объекта JS в качестве карты цветов и названий цветов, специфичных для вашего веб-сайта, и не полагался бы на другую библиотеку: { 'red': 'rgba(255, 0, 0, 1)', 'blue': 'rgba(0, 0, 255, 1)' } и не сопоставлял их.   -  person Michael Radionov    schedule 27.12.2015
comment
Я бы выбрал цветовые роли, а не цвета как таковые... хотя это не 1:1.   -  person user2864740    schedule 31.12.2015
comment
@user2864740 user2864740 Вы имеете в виду, что, в основном, стремитесь к визуальным классам элементов (btn-primary, btn-cancel и т. д.) вместо реальных цветов? Спасибо.   -  person alecxe    schedule 31.12.2015
comment
@alecxe Тесты, которые я написал для целевых классов, но даже в случае предложения Майкла это может быть { 'warning': 'rgb(255, 0, 0, 1)' }. Это все еще ниже, чем я бы предпочел иметь дело, и «визуальное» тестирование на людях выявляет недостатки макета / рендеринга, которые могут проявляться множеством нелепых способов на разных устройствах, гораздо лучше, чем Selenium.   -  person user2864740    schedule 31.12.2015
comment
@user2864740 user2864740 хорошо, мне это действительно очень нравится, спасибо за идею!   -  person alecxe    schedule 31.12.2015
comment
также вы можете жаловаться на пользовательские сопоставители jasmine и пакет name-that-color   -  person Manasov Daniel    schedule 06.01.2016

Ответы (2)


arrow_upward
8
arrow_downward

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

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

person Andrew Eisenberg    schedule 27.12.2015
comment
Извините за путаницу, я уже знаком с пользовательской частью сопоставления жасмина. Здесь я в основном сосредоточен на наиболее надежной реализации convertToRGB шага ... и, вероятно, ищу что-то общее, из чего мы можем сделать многоразовую библиотеку ... Спасибо! - person alecxe; 27.12.2015

arrow_upward
1
arrow_downward

Я получил рабочий ответ на основе рекомендаций @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");
person eLRuLL    schedule 31.10.2017