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().