0

I have three similar div tags as shown below:

<div data-test="someId" style="position: fixed; visibility: hidden;">more tags</div>
<div data-test="someId" style="position: fixed; visibility: hidden;">more tags</div>
<div data-test="someId" style="position: fixed;">more tags</div>

Note: here data-test id is same for all three.

All I want is the tag that is not hidden i.e third one

I've tried cy.get('[data-test=someId]').should('not.have.css', 'visibility') but it's not working.

Tirath Sojitra
  • 359
  • 4
  • 15

2 Answers2

1

You can use the :visible jQuery selector. Beware of which route you go with cypress retryability.

// get only visible element(s)
cy.get('.element:visible')
  // retry cy.get('.element:visible')
  .should('be.visible')

// get element(s)
cy.get('.element')
  // filter only visible element(s)
  .filter(':visible')
  // retry .filter(':visible')
  .should('be.visible')
jjhelguero
  • 2,281
  • 5
  • 13
  • Thank you! That worked! I was using ```cy.get('.element :visible')```. I was using space that was causing some trouble. But now it's good – Tirath Sojitra Sep 22 '22 at 16:38
0

I see that it's tagged with jQuery so here is one way you can do it:

Jquery: How to check if the element has certain css class/style

justanotherguy
  • 395
  • 4
  • 17