Prepare Studio Feature branch for review

[lmiller1990]

Part of #23230

Studio support is in feature branch feat/studio-cypress-10

Once all the other Studio stories are complete, we need to do a final pass on the feature branch, test it all out, and prepare it for a thorough review and QA.

AC:

• it all works
• add lots of tests
• fix up any obvious tech debt from 9.x

[lmiller1990]

This is blocked until all other things in #23230 are completed.

[lmiller1990]

Testing

There are quite a number of workflows we need to consider to have feature parity. I'll document those here. I'll use Cypress 9 to document the stories, since that's the parity we are aiming for.

1. Basic "happy" path

• Create an empty spec, eg untitled.spec.js.
• Run it.

You should be prompted to create a test with Cypress Studio:

• Click "Create test with Cypress Studio".
• You will be greeted with a modal:

• Click "Get Started".
• You should see the default blank page and be prompted to enter a URL.
• We do not validate this URL - just that something is entered.
• Enter a valid URL.

• Upon doing so, the runner refreshes (to update the domain). You visit the URL. It'll look something like this

• Note the Studio Toolbar is showing:

• Click around. It'll record the commands as actions in the command log.

• Hit "Save Commands". It'll prompt you for a new test name:

• Hit "Save Test". It will write the test to file, and re-execute the test (which should pass).

This is what was generated for mine:

/* ==== Test Created with Cypress Studio ==== */
it('My awesome test', function() {
  /* ==== Generated with Cypress Studio ==== */
  cy.visit('https://lmiller1990.github.io');
  cy.get('.center').click();
  cy.get('.job-title > strong').click();
  /* ==== End Cypress Studio ==== */
});

• You can extend a test, too! Click the wand in the command log:

• Cypress executing the test, then waits.
• Click around a bit more, and hit "Save Commands" again.
• It should update your spec file in this fashion:

/* ==== Test Created with Cypress Studio ==== */
it('jj', function() {
  /* ==== Generated with Cypress Studio ==== */
  cy.visit('https://lmiller1990.github.io/');
  cy.get(':nth-child(3) > :nth-child(3)').click();
  /* ==== End Cypress Studio ==== */
  /* ==== Generated with Cypress Studio ==== */
  cy.get('.resume > :nth-child(5)').click();
  cy.get('.resume > :nth-child(5)').click();
  cy.get('.resume > :nth-child(5)').click();
  /* ==== End Cypress Studio ==== */
});

[cypress-bot]

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

[cypress-bot]

Released in 10.7.0.

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