カラー入力と分度器のやりとり

Question

チェックボックスやテキストの入力値を設定するのは簡単です。しかし、分度器を使ってカラータイプで入力するように値を設定するにはどうすればよいですか？私はこれを行うことを試みた：

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

を、それは、このエラーをトリガ：

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

は何とかカラーピッカーウィンドウと対話することが可能ですか？

UPD：

完全なテスト：

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を一時的executeScript法を使用して、JSから直接値を設定することによって、この問題を解決：

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

でも解決策はまだありません

Answer 1

私はバックスペースがカラー入力に送られないと思っていますが、代わりにブラウザの履歴に戻って空白ページとローカルストレージアクセスエラーが発生する可能性があります。代わりに

、入力フィールドをクリアして、キーを送信するためにclear()を使用して、明示的にclick約束を解決：

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

しようとする別のアプローチは、actions()を呼び出すときbrowserとbrowser.driverを置き換えることであろう。