feat: Cypress Studio - record test steps through interacting with your site

[panzarino]

• Closes Console output with suggested test from selector (record/wizard mode) #73

User facing changelog

Cypress Studio - record test steps through interacting with your site

Additional details

Users are able to add additional commands to their existing tests by clicking the new studio button. When clicked, that test will rerun and stop at its ending state. From here, users are able to interact with their site and have Cypress commands auto generated from their actions.

In addition to extending currently existing tests, users are also able to add a test to existing suites. In this case, the before and beforeEach hooks will run before tracking interactions.

Currently supported commands

• cy.click()
• cy.type()
• cy.select()
• cy.check()
• cy.uncheck()
• cy.visit()

Documentation - cypress-io/cypress-documentation#3394

Extending a Test

Creating a New Test

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?
• Have API changes been updated in the type definitions?
• Have new configuration options been added to the cypress.schema.json?

[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

9263 • 0 • 118 • 3 • 1

---

Run details

Project	cypress
Status	Passed
Commit	d19a0f2
Started	Jan 19, 2021 3:00 PM
Ended	Jan 19, 2021 3:15 PM
Duration	14:57 💡
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

[chrisbreiding]

Overall, this looks good to me.

Some change in the CSS related to the padding on the right is causing the percy snapshot failures though, so that will have to be fixed.

[panzarino]

@chrisbreiding I've fixed all the failing Percy snapshots - there's still one that's failing but that's intentional since I added a min-height to commands to prevent the occasional jittery effect that used to happen on hover