Shadow DOM access in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the Shadow DOM in web development?

Shadow DOM is a hidden, separate part of the DOM tree that allows encapsulation of HTML, CSS, and JavaScript, so styles and scripts do not leak out or in.

beginner

How does Cypress access elements inside the Shadow DOM?

Cypress uses the shadow() command to pierce the Shadow DOM boundary and access elements inside it.

beginner

Why can't regular CSS selectors access Shadow DOM elements directly?

Because Shadow DOM creates a separate DOM tree, regular selectors from the main DOM cannot reach inside it due to encapsulation.

intermediate

Example: How to get a button inside Shadow DOM using Cypress?

Use cy.get('host-element').shadow().find('button') to access the button inside the Shadow DOM of the host element.

intermediate

What is the benefit of Shadow DOM access in testing?

It allows tests to interact with encapsulated components as users would, ensuring components work correctly without breaking encapsulation.

Which Cypress command is used to access elements inside Shadow DOM?

A findShadow()

B shadow()

C getShadow()

D accessShadow()

The correct command is shadow() which allows Cypress to access elements inside the Shadow DOM.

Why is Shadow DOM used in web components?

A To disable JavaScript inside components

B To make the page load faster

C To allow direct access from any CSS selector

D To hide implementation details and encapsulate styles

Shadow DOM encapsulates styles and markup to prevent outside interference and hide implementation details.

What happens if you try to use cy.get() alone on a Shadow DOM element?

A It will fail because it cannot pierce Shadow DOM boundary

B It will always succeed

C It will access the element but with warnings

D It will access the element only if it has an ID

cy.get() alone cannot access Shadow DOM elements because of encapsulation.

Which of these is a correct way to chain Cypress commands to get a Shadow DOM button?

A cy.get('host').shadow().find('button')

B cy.shadow('host').get('button')

C cy.find('host').shadow('button')

D cy.get('button').shadow('host')

You first get the host element, then use shadow() to access its Shadow DOM, then find the button inside.

What is a key challenge when testing Shadow DOM elements?

A Shadow DOM disables JavaScript events

B Shadow DOM elements are invisible

C Regular selectors cannot reach inside Shadow DOM

D Shadow DOM elements cannot be clicked

Because Shadow DOM encapsulates its content, normal selectors cannot access elements inside it without special commands.

Explain how Cypress accesses elements inside the Shadow DOM and why this is necessary.

Think about how Shadow DOM hides elements and how Cypress commands help reach inside.

Describe the benefits of Shadow DOM in web components and how it affects testing.

Consider why Shadow DOM exists and what challenges it creates for testers.

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