Shadow DOM access in Cypress - Test Execution Trace

Test Overview

This test opens a webpage containing a shadow DOM element. It accesses a button inside the shadow DOM and clicks it. Then it verifies that clicking the button changes the text inside the shadow DOM as expected.

Test Code - Cypress

Cypress

describe('Shadow DOM access test', () => {
  it('should click button inside shadow DOM and verify text change', () => {
    cy.visit('https://example.com/shadowdom')
    cy.get('my-shadow-host').shadow().find('button#shadow-btn').click()
    cy.get('my-shadow-host').shadow().find('span#status').should('have.text', 'Clicked!')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.com/shadowdom'	Browser shows the page with a custom element 'my-shadow-host' containing shadow DOM	-	PASS
3	Find 'my-shadow-host' element and access its shadow DOM	'my-shadow-host' element is found, shadow DOM is accessible	-	PASS
4	Find button with id 'shadow-btn' inside shadow DOM and click it	Button inside shadow DOM is found and clicked	-	PASS
5	Find span with id 'status' inside shadow DOM and check its text	Span inside shadow DOM is found	Verify span text is 'Clicked!'	PASS
6	Test ends	Test completed successfully	-	PASS

Failure Scenario

Failing Condition: The button inside the shadow DOM is not found or not clickable

Execution Trace Quiz - 3 Questions

Which Cypress command is used to access elements inside the shadow DOM?

A .shadow()

B .findShadow()

C .shadowRoot()

D .getShadow()

Key Result

When testing elements inside shadow DOM, use the '.shadow()' command in Cypress to access the shadow root before finding elements. This ensures reliable interaction with shadow DOM elements.