Select element with class name that starts with using Cypress

Question

I have some classes which are dynamically generated in React. They always have the same prefix but they all end differently

How can I use Cypress to select a class name that begins with X?

<div class="this-is-always-the-same-abcd"></>
<div class="this-is-always-the-same-efgh"></>
<div class="this-is-always-the-same-ijkl"></>

Answer 1

To everyone who really need to target class and cannot (Or do not want) use data- attributes for some reasons. Solution is to use standard css selector.

cy.get('*[class^="this-is-always-the-same"]')

This will get all elements that has class starting with this-is-always-the-same.

Answer 2

According to their Best Practices Documentation, you should use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.

It's suggested that you follow these guidelines:

• Don’t target elements based on CSS attributes such as: id, class, tag.
• Don’t target elements that may change their textContent.
• Add data-* attributes to make it easier to target elements.

Instead, you should add a data-cy attribute to target the selector that you're testing.

You can use this playground to determine an unique selector.