"contains" and visibility

[mistic100]

Hello

I have a page with two buttons labeled "Cancel", one is visible, and one is hidden (inside a closed drawer).

I use cy.contains('button', 'Cancel') to find my button. Per documentation, "contains" only yield the first element in the dom (in my case the hidden one).

So I tried to use :visible pseudo-selector with cy.contains('button:visible', 'Cancel'), however that doesn't change anything, it still yields the first (hidden) button and of course cannot "click" on it (it is not the right button anyway).

---

To explain why I am not refining my selector : I create a internal testing framework with Cypress and Cucumber and steps must be as simple as I click on the "Cancel" button in order to have non technical people write the non-regression tests.

[michallbanas]

Hey @mistic100 👋

If you know there only are two buttons, you can try one of the option:

cy.contains('button:last', 'Cancel')
cy.contains('button:eq(1)', 'Cancel')

Let me know if it helps 🙂

[mistic100]

There is no guarantee of that, dynamic app is dynamic :-)

I mean, there should not be more than one visible button with the same label, but their order in the dom is not known.

[michallbanas]

Yeah, get it, and what about

cy.get("button:contains('Cancel')").filter(':visible')

In this case, button:contains('Cancel') should yeld both elements.

[mistic100]

Okay that works 👍

What is the difference in term of text analysis between "contains()" method and ":contains" selector ?

[michallbanas]

I believe it's because cy.contains() can return only the first matched element (it can be an issue for dynamic content as you pointed out), while button:contains() uses CSS selector to find elements and it can return multiple elements that match the selector.

[mistic100]

I meant : is there a difference of which elements could be matched (independently of the cardinality) ? Like a different processing of line breaks, non-breaking spaces, etc.

I think I understood that cy.contains internally uses a :cy-contains pseudo selector, so it is not same has :contains ...

Thus what is the point of "cy.contains" after all ?