javascript - 如何在 Intern/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 库的一部分，并且不可能在嵌套上访问影子 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');
});