How 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

user_7310028 0
Viewed 389

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

enter image description here

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.

cypress ui-automation mouseclick-event javascript
3 Answers

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()
user_45712710

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:

enter image description here

user_169977070

You can use the :visible selector.

cy.get('.your-link-selector:visible')

If you want it to be more readable with cypress commands you can use .filter()

cy.get('.your-linke-selector')
  .filter(':visible')
user_179178090
Related