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

但它会触发此错误：

失败::无法阅读＆＃39; sessionStorage＆＃39;物业来自＆＃39; Window＆＃39;：在数据中禁用存储：＆＃39;网址。

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

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：

我通过使用executeScript方法并直接从js：

设置值来暂时解决了这个问题

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

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

Answer 1

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

相反，请明确解析click承诺，使用clear()清除输入字段并发送密钥：

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

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

与量角器的颜色输入交互

1 个答案: