Cypress Testing Library allows the use of dom-testing queries withinCypress end-to-end browser tests.

npminstall --save-dev cypress @testing-library/cypress

yarnadd --dev cypress @testing-library/cypress

• Cypress Testing Library on GitHub

Usage​

Cypress Testing Library extends Cypress'scy commands.

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

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

You can now use some ofDOM Testing Library'sfindBy, andfindAllBycommands off the globalcy object.See theAbout queries docs for reference.

Note: theget* queries are not supported because for reasonable Cypresstests you need retryability andfind* queries already support that.query*queries are no longer necessary since v5 and will be removed in v6.find*fully support built-in Cypress assertions (removes the only use-case forquery*).

With TypeScript​

Typings should be added as follows intsconfig.json:

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

You can findall Library definitions here.

Examples​

To show some simple examples (fromcypress/integration/find.spec.js):

cy.findByRole('button',{name:/Jackie Chan/i}).click()
cy.findByRole('button',{name:/Button Text/i}).should('exist')
cy.findByRole('button',{name:/Non-existing Button Text/i}).should('not.exist')
cy.findByLabelText(/Label text/i,{timeout:7000}).should('exist')

// findByRole _inside_ a form element
cy.get('form')
.findByRole('button',{name:/Button Text/i})
.should('exist')
cy.findByRole('dialog').within(()=>{
  cy.findByRole('button',{name:/confirm/i})
})

Cypress Testing Library supports both jQuery elements and DOM nodes. This isnecessary because Cypress uses jQuery elements, whileDOM Testing Libraryexpects DOM nodes. When you pass a jQuery element ascontainer, it will getthe first DOM node from the collection and use that as thecontainer parameterfor theDOM Testing Library functions.