Shadow DOM access in Cypress

Introduction

Shadow DOM hides parts of a web page to keep them separate. We need special ways to test these hidden parts.

Testing a web component that uses Shadow DOM to hide its internal structure.

Checking if a button inside a Shadow DOM responds to clicks.

Verifying text or elements inside a Shadow DOM are visible and correct.

Automating form filling inside a Shadow DOM element.

Debugging UI issues inside Shadow DOM components.

Syntax

Cypress

cy.get('selector').shadow().find('inner-selector')

cy.get() finds the outer element hosting the Shadow DOM.

shadow() tells Cypress to enter the Shadow DOM.

Examples

Finds a button inside the Shadow DOM of <my-component>.

Cypress

cy.get('my-component').shadow().find('button')

Finds a text input inside the Shadow DOM of <custom-element>.

Cypress

cy.get('custom-element').shadow().find('input[type="text"]')

Checks if the element with class 'title' inside Shadow DOM contains 'Hello'.

Cypress

cy.get('widget').shadow().find('.title').should('contain.text', 'Hello')

Sample Program

This test visits a page with a Shadow DOM. It finds a button inside the shadow root and clicks it. Then it checks if a paragraph inside the Shadow DOM shows 'Submitted'.

Cypress

describe('Shadow DOM Access Test', () => {
  it('checks button inside shadow root', () => {
    cy.visit('https://example.com/shadow')
    cy.get('shadow-host').shadow().find('button#submit').click()
    cy.get('shadow-host').shadow().find('p.status').should('have.text', 'Submitted')
  })
})

Important Notes

Always use shadow() before searching inside Shadow DOM.

Shadow DOM elements are hidden from normal DOM queries, so normal cy.get() won't find them.

Use unique and stable selectors inside Shadow DOM for reliable tests.

Summary

Shadow DOM hides parts of the page; special access is needed to test inside.

Use cy.get().shadow().find() to reach elements inside Shadow DOM.

Testing Shadow DOM ensures your web components work correctly.

Practice

1. What is the correct way to access an element inside a Shadow DOM using Cypress?

easy

A. Use cy.get('selector').shadow().find('inner-selector')

B. Use cy.get('selector').find('inner-selector') directly

C. Use cy.shadow('selector').get('inner-selector')

D. Use cy.getShadow('selector').find('inner-selector')

Solution

1. Step 1: Understand Shadow DOM access in Cypress

   Cypress requires the shadow() command to enter the Shadow DOM context before finding elements inside it.

2. Step 2: Use the correct chaining method

   The correct syntax is cy.get('selector').shadow().find('inner-selector') to access elements inside Shadow DOM.

3. Final Answer:

   Use cy.get('selector').shadow().find('inner-selector') -> Option A

4. Quick Check:

   Shadow DOM access = cy.get().shadow().find() [OK]

Hint: Always use .shadow() before .find() for Shadow DOM elements [OK]

Common Mistakes:

• Trying to find elements inside Shadow DOM without .shadow()
• Using non-existent commands like cy.shadow() or cy.getShadow()
• Assuming .find() works directly on Shadow DOM host

2. Which of the following Cypress commands correctly accesses a button with id submitBtn inside a Shadow DOM hosted by my-component?

easy

A. cy.get('my-component').find('#submitBtn')

B. cy.get('my-component').shadow().find('#submitBtn')

C. cy.shadow('my-component').get('#submitBtn')

D. cy.getShadow('my-component').find('#submitBtn')

Solution

1. Step 1: Identify the Shadow DOM host

   The element my-component is the Shadow DOM host, so we start with cy.get('my-component').

2. Step 2: Access the Shadow DOM and find the button

   We must use .shadow() to enter the Shadow DOM, then .find('#submitBtn') to locate the button inside.

3. Final Answer:

   cy.get('my-component').shadow().find('#submitBtn') -> Option B

4. Quick Check:

   Shadow DOM host + .shadow() + .find() = cy.get('my-component').shadow().find('#submitBtn') [OK]

Hint: Use .shadow() after host selector before .find() [OK]

Common Mistakes:

• Skipping .shadow() and using .find() directly
• Using non-existent commands like cy.shadow()
• Confusing host selector with inner element selector

3. Given the following Cypress code, what will be the result of the assertion?

cy.get('custom-element').shadow().find('.title').should('have.text', 'Welcome')

medium

A. The test throws a syntax error due to incorrect chaining.

B. The test fails because .shadow() cannot be chained after .get().

C. The test passes if the element with class 'title' inside the Shadow DOM has text 'Welcome'.

D. The test passes if any element with class 'title' on the page has text 'Welcome'.

Solution

1. Step 1: Understand the command chain

   The code correctly gets the Shadow DOM host custom-element, enters its Shadow DOM with .shadow(), then finds the element with class title.

2. Step 2: Evaluate the assertion

   The assertion checks if the found element's text is exactly 'Welcome'. If true, the test passes; otherwise, it fails.

3. Final Answer:

   The test passes if the element with class 'title' inside the Shadow DOM has text 'Welcome'. -> Option C

4. Quick Check:

   Correct chaining + assertion = The test passes if the element with class 'title' inside the Shadow DOM has text 'Welcome'. [OK]

Hint: Correct .shadow() chaining accesses Shadow DOM elements properly [OK]

Common Mistakes:

• Assuming .shadow() is invalid after .get()
• Confusing global elements with Shadow DOM elements
• Misunderstanding assertion target scope

4. You wrote this Cypress test but it fails to find the button inside Shadow DOM:

cy.get('widget-component').find('button.submit').click()

What is the most likely reason?

medium

A. You forgot to use .shadow() before .find() to access Shadow DOM.

B. The selector 'widget-component' is incorrect.

C. The button does not have class 'submit'.

D. Cypress cannot click buttons inside Shadow DOM.

Solution

1. Step 1: Analyze the command chain

   The code tries to find a button inside widget-component without entering Shadow DOM.

2. Step 2: Identify missing Shadow DOM access

   To access elements inside Shadow DOM, .shadow() must be used before .find(). Missing it causes failure to locate the button.

3. Final Answer:

   You forgot to use .shadow() before .find() to access Shadow DOM. -> Option A

4. Quick Check:

   Missing .shadow() causes element not found [OK]

Hint: Always insert .shadow() before .find() for Shadow DOM elements [OK]

Common Mistakes:

• Skipping .shadow() when accessing Shadow DOM
• Assuming .find() works globally inside Shadow DOM host
• Blaming selector syntax without checking Shadow DOM usage

5. You want to test a nested Shadow DOM structure where outer-component hosts a Shadow DOM containing inner-component, which itself hosts another Shadow DOM with a button #confirm. Which Cypress command chain correctly clicks the button?

hard

A. cy.get('outer-component').shadow().shadow().find('inner-component').find('#confirm').click()

B. cy.get('outer-component').find('inner-component').shadow().find('#confirm').click()

C. cy.get('outer-component').shadow().find('inner-component').find('#confirm').click()

D. cy.get('outer-component').shadow().find('inner-component').shadow().find('#confirm').click()

Solution

1. Step 1: Access the first Shadow DOM

   Start with cy.get('outer-component') and enter its Shadow DOM using .shadow().

2. Step 2: Access the nested Shadow DOM

   Find inner-component inside the first Shadow DOM, then enter its Shadow DOM again with .shadow().

3. Step 3: Find and click the button

   Inside the nested Shadow DOM, find the button with id #confirm and perform .click().

4. Final Answer:

   cy.get('outer-component').shadow().find('inner-component').shadow().find('#confirm').click() -> Option D

5. Quick Check:

   Nested Shadow DOM requires chaining .shadow() twice [OK]

Hint: Chain .shadow() for each Shadow DOM level before .find() [OK]

Common Mistakes:

• Trying to access nested Shadow DOM without multiple .shadow() calls
• Using .find() directly without entering Shadow DOM
• Confusing order of .shadow() and .find() calls