How to check nested shadow elements using cypress. Io

In automated testing with Cypress, handling Shadow DOM in Web Components can be challenging. As Shadow DOM allows web developers to encapsulate markup and styles, making it invisible in the main document DOM. However, starting from Cypress 4.5.0, Cypress now supports direct querying of the Shadow DOM.

Step 1: Enable Shadow DOM Support

First, ensure that Shadow DOM support is enabled in your Cypress configuration. Add the following configuration to your cypress.json file:

json
{
  "includeShadowDom": true
}

This configuration enables Cypress to automatically traverse through the shadow root when performing DOM queries, allowing you to query the Shadow DOM as you would with regular DOM.

Step 2: Use Standard Query Commands

After enabling this configuration, you can use Cypress's standard query commands like cy.get() to select elements within the Shadow DOM. For example, if your Shadow DOM structure is as follows:

html
<custom-element>
  #shadow-root
    <div class="inside-shadow">Content inside shadow DOM</div>
</custom-element>

You can query elements within the shadow like this:

javascript
cy.get('custom-element').find('.inside-shadow').should('contain', 'Content inside shadow DOM');

Example: Testing an Element Nested in Multi-layer Shadow DOM

If there are multiple nested Shadow DOM layers, Cypress's queries will traverse through these layers. Suppose the structure is as follows:

html
<custom-element>
  #shadow-root
    <nested-element>
      #shadow-root
        <div class="deep-inside-shadow">Deep content</div>
    </nested-element>
</custom-element>

You can use the following Cypress commands to check the deeply nested content:

javascript
cy.get('custom-element')
  .find('nested-element')
  .find('.deep-inside-shadow')
  .should('contain', 'Deep content');

Conclusion

By enabling the includeShadowDom configuration and using standard DOM query methods, Cypress provides a powerful and straightforward way to test modern web applications that include nested Shadow DOM. This approach not only reduces the complexity of test code but also improves maintainability and reliability.