Cypress Studio: give data-testid priority when picking up a selector for recorded interaction

[jayarjo]

What would you like?

Cypress Studio is an awesome feature, however it frequently picks less than optimal selector for the any particular step. Consider DOM structure like the following:

<button type="button" aria-label="Add New" data-testid="Button::Add New">
  <span class="style_label__O3pAy">
    <div class="c-h-flex">
      <i class="Icon_icon__R1RDX Icon_small__Q8FfZ style_pageControlIcon__3kvpN style_pageControlIconLoading__P+QzK">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
          <path fill-rule="evenodd" d="M12 4c-.78 0-1.412.632-1.412 1.412v5.176H5.412a1.412 1.412 0 000 2.824h5.176v5.176a1.412 1.412 0 002.824 0v-5.176h5.176a1.412 1.412 0 000-2.824h-5.176V5.412C13.412 4.632 12.78 4 12 4z" clip-rule="evenodd"></path>
        </svg>
      </i>
      <p aria-hidden="true" class="copy-5 style_pageControlLabel__TsIAb">Add New</p>
    </div>
  </span>
</button>

As you can notice it is a button with an icon and text, some of the classes have random suffixes. But there's also a data-testid, on a button, however when it is clicked Cypress Studio picks: .c-h-flex > .copy-5 instead, which - yes, is static, but far from being unique. data-testid (and it's alternatives like: data-cy and data-test) should be given priority. Or at least there should be a config option that would allow us to give them priority. So if any kind of data-testid is present, Cypress Studio should pick it instead of it's descendants or ancestors.

Why is this needed?

It is needed to always pick the most unique selector of the element, when it is available.

Other

No response

[Sh1d0w]

Excuse me, but this is not a low priority issue as it is categorised now.

Most of the applications that use some sort of css processing/minifcation have randomised class names. In the current state Cypress Studio will generate most interactions like this:

.css-d3j13h > .button-cdak21

Which obviously can't be useful as on the next build it will fail when the given elements get new class names.

[islami00]

I think this was covered by another issue: #25305

[marktnoonan]

This is currently how Studio works, it prioritizes this set of selectors which is shared between Cypress Playground and Cypress Studio.

Totally agree that long class-based selectors are not ideal, especially with modern frameworks and utility css.

Going to close for now. If this is not actually working as expected for you, let us know, that would be a bug.