Accessing shadowElements via webdriver.io ver 7

user_6556994 0
Viewed 38

The following code runs great when item evaluates as in the currently-commented-out line but the shadow-root associated line fails with this: browser.$(...).shadow$ is not a function. Any indications for why this might be?

const LoginPage = require('../pageobjects/login.page');
const SecurePage = require('../pageobjects/secure.page');

describe('My Login application', () => {
    it('should login with valid credentials', async () => {
        await browser.url(`https://our-site/`);
        // const item = await browser.$('body > cs-app')
        const item = await browser.$('body > cs-app').shadow$('#page > login-page');
        await expect(item).toBeExisting();
    });
});
shadow-dom web-component webdriver javascript
2 Answers

Can you try running this as:

const item = await (await $('body > cs-app')).shadow$('#page > login-page');

There's a fix in the works to not need this extra 'await' statement, but it hasn't been released yet. You can check it out here: https://github.com/webdriverio/webdriverio/pull/6954

user_1505520

Extending the logic of Kevin's answer, I was able to drill through the shadow layers like this:

    const item = await (await (await $('body > cs-app')).shadow$('#page > login-page')).shadow$('#username');
    console.log('result --------------------', await (item.getAttribute('label'))) // Username
user_65569940
Related