Cypress Insert row in a Dynamic Smart Table

Profile picture for user devraj

Handling Dynamic Web Table with Cypress is lot easier compared to Selenium because it provide easier way to handle dynamic tables, like Selenium you don't need to use long xpath to handle it.

In this demo we will consider smart table of our ngx-admin application. Where when we will click on + icon then a new row will be created and after that we will insert First Name, Last name and UserName and later we will click on tick icon to insert the data in table as shown in image below.

cypress insert row in a dynamic smart table

Code

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

    // Click on Tables & Data Link
    cy.contains("Tables & Data").click()
    
    // Click on Smart Table in Tables & Data Link
    cy.contains("Smart Table").click()
   
    // Click on + icon to insert tow
    cy.get('thead').find('.nb-plus').click();
    
    // work on the 2nd table row which is for inserting data using index 2
    cy.get('thead').find('tr').eq(2).then(tableRow => {
      // Insert First Name, Last Name and UserName
      cy.wrap(tableRow).find('[placeholder="First Name"]').type("Tarun")
      cy.wrap(tableRow).find('[placeholder="Last Name"]').type("Goswami")
      cy.wrap(tableRow).find('[placeholder="Username"]').type("tgoswami")
      
      // Click on checkmark
      cy.wrap(tableRow).find('i.nb-checkmark').click();
    });

    //Verify Data after insertion using column index. e.g index 2 is for First Name
    cy.get('tbody tr').first().find('td').then(tableColumn => {
      cy.wrap(tableColumn).eq(2).should('contain','Tarun')
      cy.wrap(tableColumn).eq(3).should('contain','Goswami')
      cy.wrap(tableColumn).eq(4).should('contain','tgoswami')
    })

    })
  })