I am building an automation framework using Cucumber, Page Object Model and Cypress, and I am not sure if it is better to use Data-testid or testing library, as Best Practice of Cypress recommends using data-testid, but on the other hand, a lot of people suggest using testing library, and the best options which are recommended by Testing Library are to use findByRole or findByText (instead of testid), it means, the opposite of Best Practice of Cypress. On the other hand, if I use testing library, I don’t understand what is the goal of cypress assertions like webElement.should('have.text', 'expectedText'); as this webElement must be caught using the text by findByRole or findByText, and if the text isn’t the expected the webElement won’t be caught, so I see the duplicity of actions using testing library. What is your recommendation? Thanks for the help

sigh, you can select things by role (it is just an attribute on html) or by text (use

cy.contains

command)

it doesn't answer my question, https://docs.cypress.io/guides/references/best-practices#Selecting-Elements and https://testing-library.com/docs/ are following the opposite idea, so what is the best?

The ideas are not really in opposite. You use attributes to select elements. If there is role attribute you can use it (without testing library). If there is data test id or data cy attribute, you can use that.

I recently did a presentation on "choosing the best selectors" at work the other day, I think it might help explain something here. So, we're going to need to break apart a couple things. There's selector queries and assertions. Those two are completely separate. Disclaimer: My terminology might not match Cypress docs, but it might help provide some insight. For example, the selector query

cy.contains('string')

selects anything that contains that string. It's not an assertion, it doesn't assert or check that something contains that string before trying to find it. The assertion is

.should('contain', "string")

So, separating those two topics ahead of time is important.

I can share my article about this if you are interested: https://css-tricks.com/front-end-test-element-locators/ I recommend using testing library for certain things like

findByLabelText

and in some cases

findByRole

, but I would do most element selection with

cy.contains()

when that is possible. Combining some of@fast-artist-45202's examples, I would do something like this:

cy.get('button[data-id="loginButton"]', 'Log In').should('be.visible')

Because I want to find the element with a certain data attribute, but it should also use a real button element have the expected text (using judgement about whether the text matters). You can get these things "for free" with

contains

, in a very clean, short way. I have post coming soon about this on the Cypress blog, I'll updated when it is posted. > If there is role attribute you can use it (without testing library). @gray-kilobyte-89541 I think people use

findByRole

not specifically expecting a role attribute to be added on the element, but to also include implicit roles that elements have. For example finding by role

link

would find anchor elements (with no

role

attr) or find a div that has the

role

attribute added and does navigation by JS or something. So the test doesn't care about how the role is created, only that the role is present. I still prefer the app to use real HTML in almost all cases, so I barely ever use

findByRole

but afaik we can't replicate it with CSS selectors (maybe there's some way to get an OR in there that I'm not thinking of). To that point though - Cypress Testing Library is useful if you are testing an app that has been written in a good accessible way and all those roles and labels etc are correctly associated with the proper elements. Often that's not the case and in many apps you will do just fine with lots of

cy.get('[data-test=login'])

.

Okay, thanks a lot for your answers, they are very useful and interesting. That is exactly which i was looking for! 👏 one two things @wonderful-match-15836 : 1. Could you have the missing link of the Cypress and Testing Library section? Please, share with me if you had it 😄 2. As https://docs.cypress.io/guides/references/best-practices#Text-Content says, if the text is important for us, then we should use cy.contains(...) to get the element, so my question is when should we use should assertion to check that a expected text is the right? 🤔 Thanks a lot again!

This is incorrect.

cy.contains

retries if it does not find an element with matching text

Has this been the same in previous versions? I’m almost certain that it’s failed for me because of failing to retry in the past.

nope, it was always retrying and the existence assertion is built-in

I remember at one point how I seemed to never have certain problems other people used to have with Cypress, and I eventually realized that the free retries and reliability of cy.contains probably the cause, exactly as Gleb said - the built-in retrying and assertions. Let me check on that link, I feel like we don't have a specific section for that.

Talking about my question, any answer? > As https://docs.cypress.io/guides/references/best-practices#Text-Content says, if the text is important for us, then we should use cy.contains(...) to get the element, so my question is when should we use should assertion to check that a expected text is the right? 🤔