Shadow DOM access in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test accessing Shadow DOM?

Consider the following Cypress test code snippet that tries to get a button inside a Shadow DOM and click it. What will be the test execution result?

Cypress

cy.get('custom-element').shadow().find('button#submit').click();

A Test fails with error: Element not found because shadow() is not a valid Cypress command

B Test fails with error: Cannot read property 'find' of undefined

C Test passes but does not click the button inside Shadow DOM

D Test passes and clicks the button inside Shadow DOM

💡 Hint

Remember that Cypress supports shadow() to access Shadow DOM elements.

The shadow() command in Cypress allows access to the shadow root of a web component. Then find() locates the button inside it. This code correctly clicks the button inside Shadow DOM, so the test passes.

❓ assertion

intermediate

Which assertion correctly verifies text inside Shadow DOM?

You want to check that a <span> inside a Shadow DOM contains the text "Hello World". Which Cypress assertion is correct?

Cypress

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

A .should('contain.text', 'Hello World')

B .should('contain', 'Hello World')

C .should('have.text', 'Hello World')

D .should('include.text', 'Hello World')

💡 Hint

Use the assertion that exactly matches the full text content.

have.text asserts the element's full text content equals the given string. contain.text is not a valid Cypress assertion. contain performs partial text matching, while include.text is unsupported.

❓ locator

advanced

Which locator correctly selects a nested Shadow DOM element?

Given a web component <outer-comp> with a Shadow DOM containing <inner-comp> which also has Shadow DOM, which contains a button with id btn. Which Cypress command correctly locates the button?

A cy.get('outer-comp').shadow().shadow().find('button#btn')

B cy.get('outer-comp').shadow().find('inner-comp').shadow().find('button#btn')

C cy.get('outer-comp').shadow().find('inner-comp').find('button#btn')

D cy.get('outer-comp').find('inner-comp').shadow().find('button#btn')

💡 Hint

Remember each Shadow DOM requires a separate shadow() call.

Each Shadow DOM layer must be accessed with shadow(). Option B correctly accesses outer-comp shadow root, then inner-comp shadow root, then finds the button. Other options miss a shadow() call or misuse it.

🔧 Debug

advanced

Why does this Cypress test fail to find Shadow DOM element?

This test fails with Timed out retrying: Expected to find element: 'button#save', but never found it. What is the likely cause?

cy.get('custom-el').find('button#save').click();

A The <code>find()</code> does not penetrate Shadow DOM; need to use <code>shadow()</code> first

B The button does not exist in the DOM at all

C The selector <code>button#save</code> is invalid CSS

D The <code>click()</code> command is deprecated and causes failure

💡 Hint

Think about how Shadow DOM elements are accessed in Cypress.

find() cannot access elements inside Shadow DOM unless shadow() is used first to enter the shadow root. The failure is due to missing shadow() call.

❓ framework

expert

Which Cypress configuration enables automatic Shadow DOM support for all commands?

You want Cypress to automatically pierce Shadow DOM for all get and find commands without calling shadow() explicitly. Which configuration option achieves this?

A "experimentalShadowDomSupport": true in <code>cypress.json</code>

B "autoShadow": true in <code>cypress.json</code>

C "shadowDomSupport": true in <code>cypress.config.js</code>

D "enableShadow": true in <code>cypress.json</code>

💡 Hint

Check Cypress official docs for Shadow DOM configuration.

The Cypress config option to enable automatic Shadow DOM traversal is experimentalShadowDomSupport: true in cypress.json (experimental feature in earlier versions). Other options do not exist. Modern versions use explicit shadow().

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