Cypress Testing Library
Cypress Testing Library allows the use of dom-testing queries within
Cypress end-to-end browser tests.
npm install --save-dev cypress @testing-library/cypress
Usage
Cypress Testing Library extends Cypress' cy command.
Add this line to your project's cypress/support/commands.js:
import '@testing-library/cypress/add-commands';
You can now use all of DOM Testing Library's getBy, getAllBy, queryBy
and queryAllBy commands.
See DOM Testing Library API for reference
Examples
To show some simple examples (from https://github.com/testing-library/cypress-testing-library/blob/master/cypress/integration/commands.spec.js):
cy.getAllByText('Jackie Chan').click()
cy.queryByText('Button Text').should('exist')
cy.queryByText('Non-existing Button Text').should('not.exist')
cy.queryByLabelText('Label text', { timeout: 7000 }).should('exist')
cy.get('form').within(() => {
cy.getByText('Button Text').should('exist')
})
cy.get('form').then(subject => {
cy.getByText('Button Text', { container: subject }).should('exist')
})
Cypress Testing Library supports both jQuery elements and DOM nodes. This is
necessary because Cypress uses jQuery elements, while DOM Testing Library
expects DOM nodes. When you pass a jQuery element as container, it will get
the first DOM node from the collection and use that as the container parameter
for the DOM Testing Library functions.