Shadow DOM access in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element inside the shadow DOM.

Cypress

cy.get('custom-element').shadow().find('[1]')

Drag options to blanks, or click blank then click option'

Abutton

BshadowRoot

Cdocument

Dwindow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'shadowRoot' instead of a CSS selector inside find()

Trying to access 'document' or 'window' inside shadow DOM

Use button to find the button element inside the shadow DOM.

2fill in blank

medium

Complete the code to click a button inside the shadow DOM.

Cypress

cy.get('my-component').[1]().find('button').click()

Drag options to blanks, or click blank then click option'

Ashadow

BshadowRoot

Croot

DshadowDom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'shadowRoot' which is not a Cypress command

Using 'shadowDom' or 'root' which do not exist in Cypress

The shadow() command is used in Cypress to access shadow DOM elements.

3fill in blank

hard

Fix the error in the code to correctly access a nested shadow DOM element.

Cypress

cy.get('outer-element').shadow().[1]('inner-element').shadow().find('button')

Drag options to blanks, or click blank then click option'

Achildren

Bget

Cshadow

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using get() which searches from the root document, not inside shadow DOM

Using shadow() twice without finding the nested element first

Use find() to locate the nested shadow host before calling shadow() again.

4fill in blank

hard

Fill both blanks to correctly assert the text inside a shadow DOM element.

Cypress

cy.get('custom-el').[1]().find('p').should('[2]', 'Hello World')

Drag options to blanks, or click blank then click option'

Ashadow

Bcontain.text

Chave.text

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using contain.text which allows partial match

Not using shadow() before find()

Use shadow() to access shadow DOM, then should('have.text', ...) to assert exact text.

5fill in blank

hard

Fill all three blanks to correctly chain commands to check a checkbox inside nested shadow DOM.

Cypress

cy.get('[1]').[2]().find('[3]').check()

Drag options to blanks, or click blank then click option'

Aouter-component

Bshadow

Cinput[type="checkbox"]

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using find instead of shadow() to enter shadow DOM

Selecting the wrong element selector for the checkbox

Start by getting the outer shadow host, use shadow() to enter shadow DOM, then find the checkbox input to check it.