Studio uses selectors after an action has occurred, causing failing tests

[panzarino]

Current behavior

Studio will use selectors for elements after an action has occurred. For example, if clicking a button adds an .active class, studio might use that class to select the button. However, this will cause a broken test since the button does not have the .active class until after it's been clicked.

Desired behavior

Studio should only use properties of the element before an action has taken place to select that element.

Test code to reproduce

<button class="btn">button</button>
<button class="btn">button</button>
<script>
  const btn = document.getElementsByClassName('btn')[0]

  btn.addEventListener('mousedown', function() {
    btn.classList.add('active')
  })
</script>

Enter studio and visit the page with the above html content. Click on the first button to generate a command like the following:

You can see that Studio picked a selector that only existed after the mousedown (but before the click completed). Therefore, when the test runs, it will fail as the selector isn't there yet.

Originally reported by @dverbiest #14339 (comment)

[cypress-bot]

The code for this is done in cypress-io/cypress#14788, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 6.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v6.4.0, please open a new issue.