Skip to main content

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.

cypress search in a dynamic table

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.

no data found dynamic smart table

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)
    })
    })
  })

Tags
Submitted by tgoswami on August 18, 2021

Tarun has 11+ years of experience in Quality Assurance in different domains like Banking, E-commerce, Health and Education.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.