Issue with shadow element when remove deepselector in Webdriverio 9 #14127

sntmt · 2025-01-29T15:46:28Z

sntmt
Jan 29, 2025

Hello all, I have a selector thats not working with the version 9 of WebdriverIo. Before, I could get all elements of 'li' in $$('x-user li') adding the deepSelector '>>>', where 'x-user' is an shadow element . But now, if I do not add the deepSelector, the result is an empty array without li elements. ref: https://webdriver.io/docs/selectors/#deep-selectors, 'Starting with v9 of WebdriverIO there is no need for this special selector as WebdriverIO automatically pierces through the Shadow DOM for you. It is recommended to migrate off this selector by removing the >>> in front it.'

this is the html, what I want is get all the 'li' elements inside in version 9 without the deepselector '>>>', with $$(x-user li)

<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>My Web Component</title>
  </head>
  <body>
    <h3>my webcomponent</h3>

    <x-user class="user"></x-user>

    <template id="user-tpl">
      <span class="wrapper">
        <label for="username">Username</label><input type="text" id="username">
        <p>languages</p>
        <ol>
          <li>Javascript</li>
          <li>Java</li>
          <li>Scala</li>
        </ol>
      </span>
    </template>

    <script>
      window.onload = function () {
        customElements.define('x-user', class extends HTMLElement {
          constructor() {
            super();
            const template = document.querySelector('#user-tpl');
            this.attachShadow({mode:'open'});
            this.shadowRoot.appendChild(template.content.cloneNode(true));
            this._render();
          }
          _render () {
            this.shadowRoot.querySelector('#username').setAttribute('value', 'my-user');
          }
        });
      };
    </script>
  </body>
</html>

thanks!

christian-bromann · 2025-01-29T18:52:43Z

christian-bromann
Jan 29, 2025
Maintainer

I am able to fetch these list elements with the following script:

const driver = await remote({
    capabilities: { browserName: 'chrome' }
})
await driver.url('http://localhost:8080/')
const listElemenst = driver.$('x-user').$$('li')
console.log(await listElemenst.map((el) => el.getText()))
await driver.deleteSession()

Note: see how I split the selector into 2 element calls because driver.$$('x-user li') would not have worked since a CSS selector can not look into a the shadow root, however WebdriverIO can.

2 replies

sntmt Apr 10, 2025
Author

Yes, with this code works, but using the $ and $$ commands concatenated like in the example, we are searching twice: for the single element and then for their contents, so the processing time is twice as long as if we used the deep selector, right? How could we mitigate this increase in execution?

Thanks.

christian-bromann Apr 10, 2025
Maintainer

Can you provide a minimal reproduction case?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue with shadow element when remove deepselector in Webdriverio 9 #14127

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issue with shadow element when remove deepselector in Webdriverio 9 #14127

Uh oh!

sntmt Jan 29, 2025

Replies: 1 comment · 2 replies

Uh oh!

christian-bromann Jan 29, 2025 Maintainer

Uh oh!

Uh oh!

sntmt Apr 10, 2025 Author

Uh oh!

christian-bromann Apr 10, 2025 Maintainer

sntmt
Jan 29, 2025

Replies: 1 comment 2 replies

christian-bromann
Jan 29, 2025
Maintainer

sntmt Apr 10, 2025
Author

christian-bromann Apr 10, 2025
Maintainer