Slot testing in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is slot testing in software testing?

Slot testing is a technique where you test specific parts or 'slots' of a user interface component to ensure they display and behave correctly.

beginner

Why is slot testing important in UI testing?

It helps verify that dynamic content or child elements inside a component render correctly and interact as expected, improving UI reliability.

intermediate

How do you select a slot element in Cypress for testing?

You use CSS selectors targeting the slot attribute or the element inside the slot, for example: cy.get('slot[name="header"]') or cy.get('component').shadow().find('slot').

intermediate

What assertion would you use to check if a slot contains specific text in Cypress?

Use cy.get() to find the slot content, then .should('contain.text', 'expected text') to verify the text is present.

intermediate

Give an example of a simple Cypress test checking a slot's content.

cy.get('my-component').shadow().find('slot[name="title"]').should('contain.text', 'Welcome') checks if the 'title' slot contains 'Welcome'.

What does slot testing primarily focus on?

A Testing database connections

B Testing backend APIs

C Testing specific parts of a UI component

D Testing network speed

Slot testing focuses on parts or slots of UI components to verify their content and behavior.

In Cypress, how do you access a slot inside a shadow DOM?

A cy.get('slot')

B cy.get('component').shadow().find('slot')

C cy.shadow('slot')

D cy.find('slot')

You use .shadow() to access shadow DOM, then .find('slot') to select the slot element.

Which assertion checks if a slot contains the text 'Hello'?

A .should('contain.text', 'Hello')

B .should('text', 'Hello')

C .should('include.text', 'Hello')

D .should('have.text', 'Hello')

The correct Cypress assertion is .should('contain.text', 'Hello') to check partial text.

Why might you test slots separately in UI components?

A To measure CPU usage

B To test server response times

C To check database schema

D To verify dynamic content renders correctly

Slots often hold dynamic content, so testing them ensures correct rendering and behavior.

Which Cypress command is used to select elements?

A cy.get()

B cy.select()

C cy.find()

D cy.query()

cy.get() is the standard command to select elements in Cypress.

Explain what slot testing is and why it is useful in UI testing.

Think about testing parts inside a component.

Describe how you would write a Cypress test to check the content of a named slot inside a shadow DOM.

Remember shadow DOM needs special access.