Cypress: How to select visible element?

[ghost]

My page contains 3 copies of a button element, either of which may become visible and clickable (the other 2 stay hidden and disabled)

How can I get just the visible button?

[jennifer-shehane]

You should be able to use the :visible selector. cy.get('button:visible').

In the future, issues in our GitHub repo are reserved for potential bugs or feature requests.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

Alternatively, signing up for any of you paid plans gives you access to our team for support via email. If you would like something higher touch, we also offer screen sharing and workshops with our premium support options.

[ghost]

I tried using that selector, and it doesn't work. Hence opening the issue.

If you want people to use your community chat, please link it via the README, for visibility.

FYI these kinds of questions are also easily avoided if your documentation was any good.

The section about assertions in particular is very poor and provides pretty much zero useful information.

EG your docs state assertions can be used with either expect or should - however, no expect command exists in your documentation, only should.

The docs then go on to use expect in the examples - this makes no sense because of the issue mentioned above.

So, using should for an exist assertion, maybe it would be should().to.exist (replacing expect with should, because again, expect is not in the command list)

BUT its not that, it's should('exist').

[jennifer-shehane]

We'll need the html you are testing against in order to narrow down why cy.get('button:visible') is not working. Can you provide an example of the html you are testing?

Our community chat is the very first thing linked in our issue template when opening an issue. We don't have the resources to answer every question about how to use Cypress unfortunately, which is why we rely on our amazing community.

<!-- Is this a question? Don't open an issue. Ask in our chat https://gitter.im/cypress-io/cypress-->

Sorry to hear the documentation has not been helpful for you. expect assertions come from mocha and .should() are a construct of cypress to make chaining assertions easier. I'd recommend reviewing this section for a more thorough explanation of the difference between the two - and also reading the Introduction to Cypress in general before getting started.

Our docs are open source also, so contributions are welcome when it is not clear. Thanks for the feedback.

[AmazingJaze]

@jennifer-shehane , unless I am mistaken, the selector :visible that you suggested, doesn't work if an element has opacity 0 or visibility hidden, right? That's how jQuery's :hidden selector works but what I'd really like to see is a way to select only the elements within a collection that adhere to Cypress' definition of visibility

On a page where I have 3 elements like these:

<span class="sortingIndicator-asc"> 

and 2 of which have css style visibility:hidden I want a way to select and assert that

cy.get(.sortingIndicator-asc).visible().should("have.length, 1")

[AmazingJaze]

updated code snippet for correctness.

[nikitahl]

@AmazingJaze that assertion didn't work for me, however, this one did, I'm using own selector:

  cy.get('.vce-button--style-basic')
    .should('be.visible')
    .its('length')
    .should('be.eq', 1)

[jennifer-shehane]

@AmazingJaze To use Cypress' internal definition of visibility you can use Cypress.dom.isVisible($el) documented here: https://on.cypress.io/dom#Is-visible

cy.get('img').then(($el) => {
  Cypress.dom.isVisible($el) // true
})

[sorayaM]

Is there a way to tell cypress from which of all the found elements to focus on? like say the cy.get() and all the following nesting of specifications still throws you at least 5 essentially identical elements... can you tell cypress to focus on the nth incidence?

[cyrus-eh]

@sorayaM You can chain .first() or .eq() to select an element.
Ex: cy.get("[data-cy=box]").eq(0) will select the first non-unique element.

[sorayaM]

@cyrus-eh thanks a lot!

[simonwebdev000000001]

another case, i have a list of children, like ul > li, there are over 20 li, and not all of them available on the view, so when loading all li cy.get("ul li") cypress focusing to the middle of the ul, and my cy.get("ul li").eq(0) throwing an error Timed out retrying: cy.click() failed because this element is not visible:

[JessefSpecialisterren]

@AmazingJaze wrote:

unless I am mistaken, the selector :visible that you suggested, doesn't work if an element has opacity 0 or visibility hidden, right? That's how jQuery's :hidden selector works but what I'd really like to see is a way to select only the elements within a collection that adhere to Cypress' definition of visibility

Turns out Cypress overwrites the visible/hidden logic of the included jQuery with its own. As a consequence, cy.get(':visible') and .should('be.visible') and their hidden counterparts all follow Cypress' definition of visibility . I've opened https://github.com/cypress-io/cypress-documentation/issues/3243 to update the documentation with this information.

@AmazingJaze not sure if you're still active, but it's worth a try: could you perhaps edit your comment to include (a link to) this information? This issue is the first hit on google for cypress get visible elements, so you might save some people time and confusion 😊

[bubooon]

@AmazingJaze To use Cypress' internal definition of visibility you can use Cypress.dom.isVisible($el) documented here: https://on.cypress.io/dom#Is-visible

cy.get('img').then(($el) => {
  Cypress.dom.isVisible($el) // true
})

It looks like if we can see only part of the element then it will return false, am I right?

[talyh]

Assuming Cypress's definition of visibility are sufficient for you, filtering the get result based on visibility will select the element(s) visible. (If there's more than one result, you may need to chain further filters/functions to specialize the result until you get to the single element you want to interact with).

   cy.get('your-selector-that-matches-both-visible-and-hidden-elements').filter(':visible')