title: Interacting with color input with protractor
body: <p>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:</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>but it triggers this error:</p>
  
  <blockquote>
    <p>Failed: : Failed to read the 'sessionStorage' property from
    'Window': Storage is disabled inside 'data:' URLs.</p>
  </blockquote>
  
  <p>Is it possible to interact with color picker window somehow?</p>
  
  <p><strong>UPD:</strong></p>
  
  <p>full test:</p>
  
  <pre><code>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 &gt; div")).then(function(rows) {
              for (var i = 0, l = rows.length-1; i &lt; 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 &gt; div")).then(function(rows) {
              for (var i = 0, l = rows.length-1; i &lt; l; i++) {
                  rows[i].getCssValue("border-color").then(function(val) {
                      expect(val == "rgb(221, 221, 0)").toBe(true);
                  })
              }
          });
      });
  });
  </code></pre>
  
  <p><strong>UPD2:</strong></p>
  
  <p>I temporarily solved this problem by using executeScript method and setting value directly from js:</p>
  
  <pre><code>browser.executeScript("$('#prop_border-color').val('#FF0000'); $('#prop_border-color').change();");
  </code></pre>
  
  <p>But still looking for better solution</p>