Identifying and validating text based elements with Cypress Testing Library

Today we will learn now we can integrate another awesome library with Cypress. The Cypress Testing Library will allow us to identify and validate text based elements in the page rather than inspecting element and writing the selector or the XPath.

To add the library, first run the following npm command

npm install --save-dev @testing-library/cypress        

Next add the following import command on top of your Cypress test file

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

Next lets change the following login script to work with Cypress Testing Library

require('cypress-xpath')
///?<reference?types="cypress"?/>
///?<reference?types="cypress-xpath"?/>
describe('Kushan?First?Test',?function(){
????it('Guru?99?Login',function(){
????????cy.visit('https://demo.guru99.com/v4/')
????????cy.xpath("https://input[@name='uid']").type('mngr332873')
????????cy.xpath("https://input[@name='password']").type('umEtyvy')
????????cy.xpath("https://input[@name='btnLogin']").click()
????????cy.xpath("https://tr[@class='heading3']/td").should('have.text',?'Manger?Id?:?mngr332873')
????})        

})        

Modified script

require('cypress-xpath')
import?'@testing-library/cypress/add-commands'
///?<reference?types="cypress"?/>
///?<reference?types="cypress-xpath"?/>
describe('Kushan?First?Test',?function(){
????it('Guru?99?Login',function(){
????????cy.visit('https://demo.guru99.com/v4/')
????????cy.xpath("https://input[@name='uid']").type('mngr332873')
????????cy.xpath("https://input[@name='password']").type('umEtyvy')
????????cy.findAllByText('LOGIN').click()
????????cy.findAllByText('Manger?Id?:?mngr332873').should('have.text',?'Manger?Id?:?mngr332873')
?????
????})        

})