Slot testing in Cypress - Test Execution Trace

Test Overview

This test checks if a web page correctly displays content passed into a named slot in a web component. It verifies that the slot content is rendered and visible to the user.

Test Code - Cypress

Cypress

describe('Slot testing', () => {
  it('should display content inside the named slot', () => {
    cy.visit('/slot-test-page')
    cy.get('my-component').shadow().find('slot[name="header"]').then(slot => {
      cy.wrap(slot).invoke('prop', 'assignedNodes').should('have.length.greaterThan', 0)
    })
    cy.get('my-component').contains('Header Content').should('be.visible')
  })
})

Execution Trace - 4 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to '/slot-test-page'	Page with <my-component> loaded, slot elements present in shadow DOM	-	PASS
3	Find the named slot 'header' inside the shadow DOM of <my-component>	Slot element located inside shadow root	Check that slot has assigned nodes (content passed into slot)	PASS
4	Verify that the content 'Header Content' is visible on the page	Content inside slot is rendered and visible	Assert that 'Header Content' text is visible	PASS

Failure Scenario

Failing Condition: The named slot 'header' has no assigned content or the content is not visible

Execution Trace Quiz - 3 Questions

What does the test verify about the named slot 'header'?

A That the slot has content assigned and it is visible

B That the slot is empty

C That the slot is hidden

D That the slot is disabled

Key Result

Always verify that content passed into slots is actually rendered and visible, especially when testing web components with shadow DOM.