Interacting with color input with protractor - testing

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().