Cypress Update row in a Dynamic Smart Table

Profile picture for user devraj

In previous example, we have inserted row in our dynamic smart table, in this tutorial we will try to update any record of the table. To update record first you need to search any value in table first, consider you don't have any search feature in table and you want to update one recently added record with email id snow@gmail.com.

Cypress: Update row in a dynamic smart table

For that first you need to find the record by iterating through email column of each row and then you need to click on edit icon of that same row. Once you will click on edit icon, you will see tick mark and you will able to edit all the fields in the row as shown in below image:

cypress update table

Now, consider you want to update the age of the snow to 25, which is 20 right now and save the record by clicking on tick icon. After that you want to verify for the same row, with value snow@gmail.com age is updated to 25.

Code:

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

    // Click on Tables & Data in left menu
    cy.contains("Tables & Data").click()

    // Click on Smart Table menu in Table & Data
    cy.contains("Smart Table").click()

    // Find the row containing value snow@gmail.com
    cy.get('tbody').contains('tr','snow@gmail.com').then(tableRow =>{
      // Click on edit icon
      cy.wrap(tableRow).find('.nb-edit').click()

      // Clear and update age column
      cy.wrap(tableRow).find("[placeholder='Age']").clear().type(25)

      // Click on tick icon
      cy.wrap(tableRow).find('.nb-checkmark').click()

      // Verify age value is updated by accessing the column by index
      cy.wrap(tableRow).find('td').eq(6).should('contain',25);
    })
  })