Edit

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

• Cypress Testing Library on GitHub

Usage

Cypress Testing Library extends Cypress's cy commands.

Add this line to your project's cypress/support/commands.js:

import '@testing-library/cypress/add-commands';

With TypeScript

Typings are defined in @types/testing-library__cypress at DefinitelyTyped, and should be added as follows in tsconfig.json:

{
  "compilerOptions": {
    "types": ["cypress", "@types/testing-library__cypress"]
  }
}

You can now use all of DOM Testing Library's getBy, getAllBy, queryBy and queryAllBy commands. See DOM Testing Library API for reference

Examples

You can find all library definitions here.

To show some simple examples (from https://github.com/testing-library/cypress-testing-library/tree/master/cypress/integration):

cy.findAllByText(/^Button Text \d$/)
  .should('have.length', 2)
  .click({ multiple: true })
  .should('contain', 'Button Clicked')
cy.queryByText('Button Text 1')
  .click()
  .should('contain', 'Button Clicked')
cy.queryByText('Non-existing Button Text', { timeout: 100 }).should('not.exist')
cy.queryByLabelText('Label 1')
  .click()
  .type('Hello Input Labelled By Id')
cy.get('#nested').within(() => {
  cy.queryByText('Button Text 2').click()
})
cy.get('#nested').then(subject => {
  cy.queryByText(/^Button Text/, { container: subject }).click()
})

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.