search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.72k stars 3.16k forks source link

select styled-component class using wildcard matcher? #5465

Closed thian4 closed 4 years ago

thian4 commented 4 years ago

We used styled-components in our project, this the generated DOM have this kind of classes

Picker_Wrap-sc-7s0sn0-0 iJqSNC

How can I select them without specifying in the html? I would be a pain to do that to the entire application

I thought of this

cy.get('.Picker_Wrap-*')

but it doesn't work :(

jennifer-shehane commented 4 years ago

Unfortunately we have to close this issue as there is not enough information to reproduce the problem. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example and we will reopen the issue. 🙏

RyanWarner commented 4 years ago

I'm interested in this as well. I don't think this issue needs a reproducible example - it's more of a question or discussion.

Is there any way to cy.get() with a class name that is generated on build (dynamic classes)?

According to the docs, this would be a bad practice.

Best Practice: Use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.

So @thian4 I think we are stuck adding data-cy attributes to our elements. To me, this feels redundant in a styled-components application.

For example:

// .jsx
<Menu data-cy='menu' />

// .spec
cy.get('[data-cy=menu]')

It would be nice not to have to repeat "menu" here. @thian4 's proposed solution would look like:

// .jsx
<Menu />

// .spec
cy.get('.Menu-*')

This also means we have extra code being shipped to the end user (unless we strip the data-cy attribute using something like babel-plugin-jsx-remove-data-test-id)

jennifer-shehane commented 4 years ago

@RyanWarner There is a long discussion already in this thread. https://github.com/cypress-io/cypress/issues/1212

Our issue are reserved for bug reports and features so that our engineers can focus all their time on these instead of answering questions and having discussions.

We use jQuery (Sizzle) selectors, so anything that is possible in there is possible in Cypress so please see their documentation.

Some examples:

cy.get('[id^=btn]') // All id's starting with 'btn'
cy.get('a[href*="questions"]') // all links with questions anywhere in href.