Skip to main content

Cypress Insert row in a Dynamic Smart Table

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

    })
  })

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.