Shoelace & Cypress

Testing Shoelace components with Cypress

Cypress Commands Cheat Sheet

Generic Commands

Generic Cypress commands that can be used for testing Shoelace design system components:

click()

Use to click an element like sl-button or radio item in sl-radio-group:

cy.get(`[data-test-id="item-test-1"]`).click();

should('have.prop')

Use on boolean elements like sl-checkbox and sl-switch to verify whether the input is checked:

cy.get(`[data-test-id="checkbox-checked"]`).should('have.prop', 'checked', true);
cy.get(`[data-test-id="checkbox-not-checked"]`).should('have.prop', 'checked', false);

should('have.value')

Use to check an input’s value. Can be used for text inputs like sl-input, sl-textarea:

cy.get(`[data-test-id="input-test"]`).should('have.value', 'Your text here');

Also for checking the value of sl-radio-group:

cy.get(`[data-test-id="checkbox-group-test"]`).should('have.value', 'option-3');

Can also use to verify that an input does NOT have a certain value:

cy.get(`[data-test-id="checkbox-group-test"]`).should('not.have.value', 'option-1');

Custom Commands

Custom Cypress commands created for testing Shoelace design system components:

cy.slCheckboxCheck()

Use to check boolean elements like sl-checkbox, sl-switch:

cy.slCheckboxCheck(`[data-test-id="checkbox-test"]`);

cy.slCheckboxUncheck()

Use to uncheck boolean elements like sl-checkbox, sl-switch:

cy.slCheckboxUncheck(`[data-test-id="checkbox-test"]`);

cy.slCheckboxGroupValue()

Use to check the value of sl-checkbox-group:

cy.slCheckboxGroupValue(`[data-test-id="checkbox-group-test"]`, ['option-1', 'option-2']);

cy.slInputType()

Use to type in sl-input:

cy.slInputType('[data-test-id="input-test"]', 'Your text here');

cy.slTextAreaType()

Use to type in sl-textarea:

cy.slTextAreaType(`[data-test-id="textarea-test"]`, 'This is long text to type into the textarea for testing.');

cy.slFocus()

Use to focus on elements like sl-input and sl-textarea:

cy.slFocus(`[data-test-id="input-test"]`);

cy.slClear()

Use to clear sl-input:

cy.slClear(`[data-test-id="input-test"]`);

cy.slTextAreaClear()

Use to clear sl-textarea:

cy.slTextAreaClear(`[data-test-id="textarea-test"]`);

cy.slSelectByOptionText()

Use to select an option in sl-select:

cy.slSelectByOptionText(`[data-test-id="select-test"]`, 'Option 1');

cy.slSelectValue()

Use in sl-select, to verify that an option is selected:

cy.slSelectValue(`[data-test-id="select-text"]`).should('equal', 'option-1');

To verify that an option is NOT selected:

cy.slSelectValue(`[data-test-id="select-text"]`).should('not.equal', 'option-2');

Form Components with Cypress Documentation

You can find additional documentation for testing specific components with Cypress, including where to add data-test-id on sl- and ts_form_for components, on the following component documentation pages:

• sl-checkbox
• sl-checkbox-group
• sl-input
• sl-radio-group
• sl-select
• sl-switch
• sl-textarea

Writing Custom Cypress Commands

For the most part, you can use Shoelace components the same way you’d use their HTML equivalents, since they emit many of the same events (click, focus, etc).

But like all web components, Shoelace components encapsulate their internal parts within the shadow dom.

This means that the internals of Shoelace components aren’t available directly on the DOM (via document.querySelector, etc.), but have to be queried via the Element.shadowRoot property.

Cypress provides a convenience method for accessing the shadow DOM via the .shadow() method..

For example, to find the anchor tag within a link button:

cy.get('sl-button[href]').shadow().find('a');

To click on a specific button:

cy.get('[data-test-id="some_sl_button"]').click();

Questions and Feedback

Commands not working as expected? Need a specific command for testing but not seeing it here?

Ping the #design-system Slack channel to let the team know!