How to get one that is not hidden tag?

September 22, 2022

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.

>Solution :

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