量角器：如何在位于阴影根多层之下的阴影DOM（聚合物）中选择输入元素

Question

我正在使用Protractor 5.4.2测试使用Polymer.js创建的网页。我有一个带有多个影子根目录的网页。我必须选择一个位于第10个阴影根下的输入。要遍历第10个级别，我需要从第一个影子根目录移动，或者我可以直接访问第10个影子根目录？

元素”>

Answer 1

我在影子DOM中也遇到了同样的问题。我使用by.js（http://www.protractortest.org/#/api?view=webdriver.By.js）定位器在页面上运行我的自定义js代码。结果就是ElementFinder实际上代表了阴影dom内部元素。

class HomePage {
   get shadowRoot(): ElementFinder {
        return element(
            By.js(function (elem) {
                try {
                    // querySelectorAll returns array-like object, so converting it to Array with this:
                    return Array.prototype.slice.call(
                        document.querySelector(elem).shadowRoot.querySelectorAll('#mdr-ibe')
                    );
                } catch (err) {
                    // using try/catch to avoid uncaught errors
                    return [];
                }
            }, 'css-locator-of-element-with-shadow-root')
        );
    }

    public async startSearch() {
        // Using chaining to search for elements inside shadowRoot:
        const startSearchButton = this.shadowRoot.$('button.start-search')
        await browser.wait(EC.elementToBeClickable(startSearchButton));
        await startSearchButton.click();
    }
}

但是请记住-使用阴影根元素在Firefox中无法正常工作>>