Slot testing in Cypress

Introduction

Slot testing helps check parts of a web page that can change or hold different content. It makes sure these parts work well and show the right things.

When testing a web component that uses slots to insert different content.

When verifying that dynamic content appears correctly inside a slot area.

When checking that fallback content shows if no slot content is provided.

When ensuring that user interactions inside a slot behave as expected.

When testing reusable components that accept different slot content.

Syntax

Cypress

cy.get('slot-selector').should('contain.text', 'expected text')

Use a proper CSS selector to find the slot or its container.

Assertions check if the slot content matches what you expect.

Examples

Check that the slot named 'header' contains the text 'Welcome'.

Cypress

cy.get('my-component slot[name="header"]').should('contain.text', 'Welcome')

Verify that a slot element exists on the page.

Cypress

cy.get('slot').should('exist')

Check that there is exactly one slot inside 'my-component'.

Cypress

cy.get('my-component slot').then(slot => {
  expect(slot).to.have.length(1)
})

Sample Program

This test visits a page with a component 'my-card' that uses slots. It checks the 'title' slot has 'Card Title' text and the 'subtitle' slot shows fallback text 'Default subtitle' if no content is provided.

Cypress

describe('Slot testing example', () => {
  beforeEach(() => {
    cy.visit('/slot-test-page')
  })

  it('checks slot content is correct', () => {
    cy.get('my-card slot[name="title"]').should('contain.text', 'Card Title')
  })

  it('checks fallback content in slot', () => {
    cy.get('my-card slot[name="subtitle"]').should('contain.text', 'Default subtitle')
  })
})

Important Notes

Slots are placeholders inside web components where content can be inserted.

Always use clear selectors to target slots or their containers.

Check both filled slots and fallback content to cover all cases.

Summary

Slot testing ensures dynamic content areas in components work correctly.

Use Cypress commands to find slots and check their content.

Test both presence and correctness of slot content and fallback.