testing - 使用 Protractor 与颜色输入交互

Question

设置复选框或文本输入值很简单。但是如何使用 Protractor 将值设置为使用颜色类型输入？我试着这样做:

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.

是否可以通过某种方式与颜色选择器窗口进行交互？

更新:

完整测试:

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:

我暂时解决了这个问题，使用executeScript方法，直接在js中设置值:

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

但仍在寻找更好的解决方案

Answer 1

我怀疑退格键没有发送到颜色输入，而是让浏览器返回到浏览器历史记录，这会导致空白页面和本地存储访问错误。

相反，显式解决 click promise ，使用 clear() 清除输入字段并发送 key :

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

另一种尝试方法是在调用 actions() 时将 browser.driver 替换为 browser。