[FIXED] How to get data displaying in a table <td> in Cypress.io test?

Issue

In a Cypress.io test, while checking for the 'data' displayed in a table after applying the filter, it throws "CypressError: Timed out retrying: Cannot read property 'eq' of undefined". Can someone please advise how to fix the problem in below test? Table HTML image added below.

describe('Filter Test', function() {
    it.only('Check if the records are filtered successfully', function() {
        cy.visit('http://www.seleniumeasy.com/test/table-search-filter-demo.html')          
        cy.get('button').contains('Filter').click()
        cy.get('input[placeholder="Username"]').type('jacobs')  
        cy.get('table').should(($tr) => {
        const $tds = $tr.find('td') // find all the tds
        expect($tds.cells.eq(0)).to.contain('jacobs')   
        })

    })      

})

Solution

There are multiple ways to do this, but the contains() function is by far the simplest in this case:

cy.get('table').contains('td', 'jacobs');

This will get the table element and assert that it contains a td tag with the text jacobs.

---

It's worth noting that contains() also acts as a selector, and in typical Cypress fashion you can continue chaining off it, like so:

cy.get('table').contains('td', 'jacobs').should('be.visible');

cy.get('table').contains('td', 'jacobs').then(elem => {
    // Do something with this specific element...
});

// etc...

Answered By - Joshua Wade

Answer Checked By - Gilberto Lyons (PHPFixing Admin)