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.
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')
})
})
})
- Log in to post comments