如何在实习生/ Leadfoot中访问Shadow Dom

Question

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

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的支持非常有限。 （ 更多 ）。

但是，要解决此问题，您可以使用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');
});