Question

我正在尝试使用Google Polymer对InternJS项目进行功能测试。

Web-Components部分如下所示：

<custom-element-one flex> 
    <custom-nested-element id="someId">
    </custom-nested-element>
</custom-element-one>

问题是我无法访问测试中的Shadow DOM：

return this.remote
.get(require.toUrl('http://localhost:8500/test.html'))
.then(pollUntil('return document.querySelector("custom-element-one").shadowRoot;', 20000))
.findByTagName('custom-element-one')
.getProperty('shadowRoot')
.then(function (doc) {
    console.log('1--------------------->>>>', doc);
    console.log('2--------------------->>>>', doc.findByTagName('custom-nested-element'));

    doc.findByTagName('custom-nested-element')
        .getAttribute('id')
        .then(function (doc) {
            console.log('3--------------------->>>>', doc);
        });
});

结果：

第一个日志返回以下内容：

1--------------------->>>> { _elementId: '8',
_session:
{ _sessionId: 'xxxx-xxxx-xxx',
_server:
{ url: 'http://localhost:4444/wd/hub/',
sessionConstructor: [Function: ProxiedSession] },
_capabilities:
{ applicationCacheEnabled: false, ...

2--------------------->>>> { cancel: [Function], then: [Function] }


Object #<Promise> has no method 'getAttribute'

任何建议都表示赞赏。

我的猜测是shadowRoot还不是leadFoot库的一部分，并且无法在嵌套

上访问shadow DOM

Answer 1

这主要是WebDriver问题，而不是其他任何问题。在WebDriver中，对Shadow DOM的支持非常有限。（more）。

但作为解决此问题的方法，您可以使用pollUntil来获取元素，然后获取其任何属性或调用其任何公开的方法。

如果您想测试id属性的值：

，它将与此类似

return this.remote
.get(require.toUrl('http://localhost:8500/test.html'))
.then(pollUntil(function () {
    if (document.querySelector('custom-element-one').shadowRoot) {
        return document.querySelector('custom-element-one').shadowRoot.querySelector('custom-nested-element').id;
    }
    return null;
}, [] , 20000))
.then(function (idValue) {
    assert.equal(idValue, 'someId');
});

如何访问Intern / Leadfoot中的Shadow Dom

结果：

1 个答案: