Cypress accessing shadow dom internals

user_19615870 0
Viewed 29

I'm trying to access a slider within shadow dom in a Cypress test.

This is what the control looks like in dev-tools.

<input type="range">
  #shadow-root (user-agent)
  <div>
    <div pseudo="-webkit-slider-runnable-track" id="track">
      <div id="thumb"></div>
    </div>
  </div>

Have added includeShadowDom: true to config, but am unable to access div#thumb with either of these commands.

cy.get('div#thumb')

cy.get('input[type="range"]')
  .find('div#thumb')

What am I doing wrong?

cypress
1 Answers

You have #shadow-root (user-agent) so this shadow dom is created by the browser, not the web page.

You can't access a Shadow DOM created by the browser to display a control, that is called a #shadow-root (user-agent) in the Dev Tools. is one example.

You can only access open custom Shadow DOM (the ones that you create yourself), with the { mode: 'open' } option.

If you try the following, it will log null

cy.get('input[type="range"]')
  .then($input => {
    console.log($input[0].shadowRoot)    // null means shadow dom is inaccessible
  })
user_169977070
Related