cypress-testing-library - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is cypress-testing-library used for?

It helps you write tests that find elements the way users do, by their text or role, making tests easier to read and maintain.

beginner

How does cypress-testing-library improve test selectors compared to CSS selectors?

It encourages using queries like findByRole or findByText that match what users see, instead of fragile CSS selectors that can break easily.

beginner

What command do you use to install cypress-testing-library?

Run npm install --save-dev @testing-library/cypress to add it to your project.

intermediate

How do you add cypress-testing-library commands to Cypress?

Import <code>@testing-library/cypress/add-commands</code> in your <code>cypress/support/e2e.js</code> file to enable its commands.

intermediate

Give an example of using cypress-testing-library to find a button by its role and click it.

Example:<br>cy.findByRole('button', { name: /submit/i }).click()<br>This finds a button with accessible name 'submit' and clicks it.

Which command is provided by cypress-testing-library to find elements by their accessible role?

A querySelector

B getByClass

C findByRole

D getById

The findByRole command finds elements by their ARIA role, matching how users identify elements.

What is the main benefit of using cypress-testing-library selectors over CSS selectors?

A They match user-visible text or roles, making tests more reliable

B They are faster to run

C They require less code

D They only work with buttons

Selectors based on user-visible text or roles are more stable and reflect how users interact with the app.

Where should you import @testing-library/cypress/add-commands in your Cypress project?

A cypress/plugins/index.js

B cypress/support/e2e.js

C cypress.json

D package.json

The support file e2e.js is the right place to add custom commands for Cypress.

Which of these is a valid way to find a button with the text 'Submit' using cypress-testing-library?

A cy.findByRole('button', { name: /submit/i })

B cy.findById('submit')

C cy.get('button.submit')

D cy.findByText('Submit')

Using findByRole with the accessible name option is the recommended way to find buttons.

What does the cy.findByText() command do?

A Finds elements by their CSS class

B Finds elements by their HTML tag

C Finds elements by their ID

D Finds elements containing specific visible text

findByText searches for elements that contain the given visible text, similar to how a user reads the page.

Explain how cypress-testing-library helps improve the reliability and readability of Cypress tests.

Think about how users find elements on a page.

Describe the steps to set up cypress-testing-library in a new Cypress project.

Focus on installation and configuration.