Cypress shadow-root inside of shadow-root

Question

How do I find the element that is inside of shadow-root which is inside of other shadow-root? I'm new to this and tried .shadow() function.

Answer 1

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}, () => {
  ...
})

Answer 2

You don't have to use .shadow() every time. Go to cypress.json file and add the following includeShadowDom: true.

Now with this added all your get, find commands will automatically traverse through the shadow dom and reach the element.

cy.get('some-element').should('be.visible')