Interaction with color input with protractor

Question

Just check the box or enter a text value. But how can I set the value for input with color type using protractor? I tried to do this:

element(by.id("prop_border-color")).click();
browser.driver.actions()
    .sendKeys(protractor.Key.BACK_SPACE)
    .sendKeys(protractor.Key.BACK_SPACE)
    .sendKeys("00")
    .sendKeys(protractor.Key.ENTER)
    .perform();

but it causes this error:

Error :: Failed to read the sessionStorage property from "Window: storage is disabled inside" data: ".

Is there any way to interact with the color picker?

UPD:

full test:

describe('Panel Editor app', function() {

    function addToplevel() {
        var elem = element(by.css(".widget-list-item-toplevel"));
        var target = element(by.id('droparea'));
        browser.driver.actions()
            .mouseDown(elem)
            .mouseMove(target)
            .mouseUp(target)
            .perform();
    }

    function addToToplevel(selector) {
        var elem = element(by.css(selector));
        var target = element(by.css('.toplevel'));
        browser.driver.actions()
            .mouseDown(elem)
            .mouseMove(target)
            .mouseUp(target)
            .perform();
    }

    beforeEach(function() {
        browser.get('http://localhost:8080/webapps/panel_editor/index.html');
    });

    afterEach(function() {
        browser.executeScript('window.sessionStorage.clear();');
        browser.executeScript('window.localStorage.clear();');
    });


    it('should check all widgets in toplevel', function() {
        addToplevel();

        addToToplevel(".widget-list-item-rows");
        browser.sleep(300);
        element(by.model("dialogCtrl.dialogs.widget.widget_model.props[q].value")).clear().sendKeys(4);
        element(by.id("widget_modal")).element(by.buttonText("OK")).click();
        browser.sleep(300);

        element.all(by.css(".builder-rows > div")).then(function(rows) {
            for (var i = 0, l = rows.length-1; i < l; i++) {
                rows[i].getCssValue("border-color").then(function(val) {
                    expect(val == "rgb(221, 221, 221)").toBe(true);
                })
            }
        });
        element(by.id("prop_border-color")).click();
        // Color picker shows.
        browser.driver.actions()
            .sendKeys(protractor.Key.BACK_SPACE)
            .sendKeys(protractor.Key.BACK_SPACE)
            .sendKeys("00")
            .sendKeys(protractor.Key.ENTER)
            .perform();
        // ERROR HERE

        element.all(by.css(".builder-rows > div")).then(function(rows) {
            for (var i = 0, l = rows.length-1; i < l; i++) {
                rows[i].getCssValue("border-color").then(function(val) {
                    expect(val == "rgb(221, 221, 0)").toBe(true);
                })
            }
        });
    });
});

UPD2:

I temporarily solved this problem using the executeScript method and the parameter value directly from js:

browser.executeScript("$('#prop_border-color').val('#FF0000'); $('#prop_border-color').change();");

But finding a better solution

Answer 1

, , , .

click, clear(), :

var colorInput = element(by.id("prop_border-color"));
colorInput.click().then(function () {
    colorInput.clear();
    colorInput.sendKeys("#FF0000");
});

browser.driver browser actions().