Accessing The Shadow Dom Elements in Cypress

Cypress shadow-root inside of shadow-root

If you're using Cypress v10, then the configuration is in the file cypress.config.js and the format for setting global shadow enabling is

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    ...
  },
  ...
  includeShadowDom: true
})

Or use test-specific configuration

it('tests some shadow dom elements', {includeShadowDom: true}, () => {
  ...
})

Cypress accessing shadow dom internals

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

Handling multiple shadow element in cypress

Go to cypress.json and write. This makes sure that all your get and find queries automatically go through shadow dom's without explicitly mentioning it.

includeShadowDom: true

And then in your test write:

cy.get('app-screen).find('input[id="studentName"]').type("Viola")

How to check nested shadow elements using cypress.io

The nested shadow-root's make it difficult to pinpoint where the .shadow() command should be added, but you can enable shadow DOM searches globally in config (cypress.json)

includeShadowDom

Whether to traverse shadow DOM boundaries and include elements within the shadow DOM in the results of query commands (e.g. cy.get())

cypress.json

{
  ...
  includeShadowDom: true
}

---

Related Topics