spike: Cypress Studio

[lmiller1990]

• Closes Cypress Studio Reimplementation Spike #22870

Note: nothing to review w.r.t code here - main info is in this description and this slack channel (Cypress team only).

User facing changelog

N/A

Additional details

• Useful: Studio related PRs: https://github.com/cypress-io/cypress/pulls?q=is%3Apr+is%3Aclosed+author%3Apanzarino++studio
• Especially: Original feature implementation: feat: Cypress Studio - record test steps through interacting with your site #9542

---

I looked into hooking up Cypress Studio in Cypress 10. Most of the code and infrastructure is still there, so it's a matter of wiring it all up. I think to get it working the correct fashion with all the requisite error handling, it's an additional ~30 hours of effort.

Video demo of basic funtionality working (had to hard code some variables and did not implement full UI): https://user-images.githubusercontent.com/19196536/183324807-41237d67-ee96-468b-be19-5f88098488be.mp4.

In addition, we need to have a UI that matches with the existing design system. The main thing we don't have is a kind of overlay with focused tooltip for "enter a URL".

Here is a list of all the Studio UI elements - I'm not sure if we need to update them to be in line with our new design system, or we are happy to push this out under as-is under the experimental flag.

Studio URL Overlay

Studio Controls

Studio Modal

Steps to test

It's not meant to be tested - this is just a spike branch.

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[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.

[lmiller1990]

File above this (hidden by GitHub by default) is the store, ported to Pinia.

[lmiller1990]

Demo:
https://user-images.githubusercontent.com/19196536/183324807-41237d67-ee96-468b-be19-5f88098488be.mp4

[cypress]

---

Test summary

37832 • 0 • 615 • 0 • 7

---

Run details

Project	cypress
Status	Passed
Commit	87fb624
Started	Aug 17, 2022 5:53 AM
Ended	Aug 17, 2022 6:08 AM
Duration	15:00 💡
OS	Linux Debian - 11.3
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/e2e/commands/net_stubbing.cy.ts		5
1	network stubbing > intercepting request > can delay with deprecated delayMs param
2	network stubbing > intercepting request > can delay with deprecated delayMs param
3	network stubbing > intercepting request > can delay with deprecated delayMs param
4	network stubbing > intercepting request > can delay with deprecated delayMs param
5	network stubbing > intercepting request > can delay with deprecated delayMs param
This comment includes only the first 5 flaky tests. See all 7 flaky tests in the Cypress Dashboard.

---

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

[lmiller1990]

In favor of #23413