Cypress Search in a Dynamic Smart Table

In previous video we inserted and updated rows in our smart table. In this video we will perform search operation in our smart table and verify the result after that.

In below screenshot you can see when we are entering value 40 in Age search field, It is retrieving all the record with age 40.

And in another scenario when data does not exist in age we are getting no data found. For example, in below screenshot you can see we are getting No data found for value 100.

Code:

it.only('search smart table', () => {
    //Visit home page
    cy.visit("/");

    // Click on Tables & Data link
    cy.contains("Tables & Data").click()

    // Click on Smart table link
    cy.contains("Smart Table").click()
   
    // constant array with 4 elements
    const age = [20,30,40,150];

    // Iterate through each element of age
    cy.wrap(age).each(age =>{
    
    //clear and type in age search box
    cy.get('thead [placeholder="Age"]').clear().type(age)
    
    // Wait for 1 second for result to display
    cy.wait(1000)

    // Iterate through each row of search result
    cy.get('tbody tr').each(tableRow => {
      
      // When age is greater than 100 it should display no data found
      // else it should check in 7th column of each row that the age is as expected
      if(age > 100)
      cy.wrap(tableRow).should('contain','No data found')
      else
        cy.wrap(tableRow).find('td').eq(6).should('contain',age)
    })
    })
  })