How to access Shadow Dom in Intern / Leadfoot

Question

I'm trying to do functional tests for a Google Polymer project using InternJS.

The Web-Components part looks like the following:

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

The problem is that I can not access the Shadow DOM within the tests:

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

Results:

First log returns the following:

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'

Any suggestion is appreciated.

My guess is that shadowRoot is not part of the leadFoot library yet and it is not possible to access the shadow DOM on nested

Answer 1

This is mostly the WebDriver issue rather than anything else. Support of Shadow DOM is very limited in WebDriver. (more).

But as a work around this, you could use pollUntil to grab the element and then get any of its attributes or call any of its exposed methods.

It would be similar to this, if you want to test value of the id attribute:

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');
});