0
251
ViewsHow to click on a link in web table using cypress for which I am getting message element not visible because it's CSS property is display: none
I have a web table and I have to click on first link which is enabled in 'Action' column. So in this example first two rows does not have link enabled, so I have to click on '8.5 AccountH'
When I inspect this element then following is the HTML for it
I have tried many solutions and some of them are as follow: -
cy.get('.data-table-ctn.mb-3 .data-table div.td').find('span.link').eq(1).click()
OR
cy.get('.data-table-ctn.mb-3 .data-table div.td i.far.check.fa-square').next().click()
OR
cy.get('.data-table-ctn.mb-3 .data-table div.td').find('span.link').eq(1).click({force:true})
OR
cy.get('.data-table-ctn.mb-3 .data-table div.td').find('span.link').first().click()
But none is working. It would be great if community helps me in resolving this.
3 answers
Answer question0
You can use force: true it should work.
cy.get('.data-table-ctn.mb-3 .data-table div.td')
.find('span.link')
.eq(0)
.click({force: true})
OR
cy.get('.data-table-ctn.mb-3 .data-table div.td')
.find('span.link')
.first()
.click({force: true})
OR, You can directly use the content and click it, something like:
cy.contains(
'span.link',
'AccountHolder Consumer Lending Postgre Move- Prior 3 months data'
).click()
0
Since events bubble, you can try clicking on the cell and the link should respond.
cy.get('.data-table-ctn.mb-3 .data-table div.td').click()
Select by cell content
Using text in the cell to select is a stronger selector.
cy.contains('.data-table-ctn.mb-3 .data-table div.td', 'Prior 3 months data')
.click()
Select first enabled row
Using :enabled pseudo selector, there's a few possible options to try
Note: you may have to examine the "row" element to choose a suitable selector - the key thing is to append :enabled to the row selector.
Clicking row
cy.get('.data-table-ctn.mb-3 .data-table')
.find('.tr:enabled').first() // first enabled row (not sure what selector to use)
.click() // click the row
Clicking cell
cy.get('.data-table-ctn.mb-3 .data-table')
.find('.tr:enabled').first() // first enabled row
.find('.td.check-td') // checkbox cell
.next() // next cell
.click()
Clicking span with toggle-group
cy.get('.data-table-ctn.mb-3 .data-table')
.find('.tr:enabled').first() // first enabled row
.find('.td.check-td') // checkbox cell
.next() // next cell
.find('span.toggle-group')
.click({force:true}) // force because hidden
Clicking span with description
cy.get('.data-table-ctn.mb-3 .data-table')
.find('tr:enabled').first() // first enabled row
.find('td.check-td') // checkbox cell
.next() // next cell
.find('span.toggle-group')
.next()
.click()
Ref MDN Events
Example diagram:
