feat(studio): generate clear before type commands

[panzarino]

• Closes Studio does not properly handle typing into an input with existing value #15023

User facing changelog

Updates how Studio records typing by using the value of the input rather than the keys that were pressed. Studio no longer records pressing special keys (such as arrows or ctrl) except for Enter.

Additional details

While it could be beneficial to record all keys that were pressed in an input field, usually users only care about the content within that field and are often pressing characters like backspace or arrows in order to correct a mistype. With that said, while these changes may hurt a portion of users, I feel that a majority of users will benefit from the cleaner code that does what they want.

In addition, the real issue arises when users place their cursor in the middle of the input field, mode/delete some characters by highlighting, or change text that was already in the input field. These are events that are extremely difficult to track accurately and would be really tough for us to generate a system that compares the diff before/after an event and generates a appropriate Cypress commands.

Therefore, before every typing event we'll record a cy.clear() and then cy.type() with the value of whatever is in that input field. While this will not perfectly mimic the user's behavior and might potentially cause some issues with use cases that break when the input is cleared (or something like that), for the majority of users it will behave in the way that they would expect it to, with the final value being exactly what they see when they record the actions.

I'm marking this as a feature rather than a fix since it fundamentally changes the behavior of studio when recording typing. This would probably be a breaking change but since we're experimental it's okay.

How has the user experience changed?

When modifying an input with existing value:

What would have happened before these changes:

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

9333 • 0 • 118 • 3 • 1

---

Run details

Project	cypress
Status	Passed
Commit	434ebec
Started	Feb 22, 2021 6:03 PM
Ended	Feb 22, 2021 6:14 PM
Duration	11:06 💡
OS	Linux Debian - 10.5
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/integration/retries.ui.spec.js		1
1	runner/cypress retries.ui.spec > opens attempt on each attempt failure for the screenshot, and closes after test passes

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[jennifer-shehane]

Yah, I actually ran into this situation when I first used Studio. I was trying to write something like 'Cypress', but I misspelled it so started backspacing and fixing and it ended up like 'Cp{backspace}ypress' and I was like....well....yah I guess that is what I typed...

I think this is a much more intuitive implementation. Will it meet 100% of use cases? Probably not, but I think it will hit the majority.

The cy.get('input').clear() and cy.get('input').type('message') would be nice to clear up doing extra gets, but it works fine.

[panzarino]

@jennifer-shehane Not quite sure what you mean at the end there - do you mean combining them into something like cy.get('.selector').clear().type('words')? I definitely think this would be a good enhancement that we can add in the future (we can probably combine all commands where the selector matches).