Interacting with color input with protractor

Question

It's simple to set checkbox or text input value. But how can I set value to 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 triggers this error:

Failed: : Failed to read the 'sessionStorage' property from 'Window': Storage is disabled inside 'data:' URLs.

Is it possible to interact with color picker window somehow?

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 by using executeScript method and setting value directly from js:

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

But still looking for better solution

Answer 1

I suspect the backspaces are not sent to the color input, but instead make the browser go back in the browser history which leads to a blank page and a local storage access error.

Instead, resolve the click promise explicitly, use clear() to clear the input field and send the keys:

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

Another approach to try would be to replace browser.driver with browser when calling the actions().