misc: (studio) add support for url routing

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 3/11/2025 (PENDING)_
 
+**Misc:**
+
+- Updated Cypress Studio with url routing to support maintaining state when reloading. Addresses [#31000](https://github.com/cypress-io/cypress/issues/31000) and [#30996](https://github.com/cypress-io/cypress/issues/30996).
+
 **Dependency Updates:**
 
 - Upgraded `cli-table3` from `0.5.1` to `0.6.5`. Addressed in [#31166](https://github.com/cypress-io/cypress/pull/31166).

packages/app/cypress.config.ts

@@ -26,9 +26,13 @@ export default defineConfig({
       framework: 'vue',
     },
   },
+  hosts: {
+    'foobar.com': '127.0.0.1',
+  },
   'e2e': {
     experimentalRunAllSpecs: true,
     experimentalStudio: true,
+    experimentalOriginDependencies: true,
     baseUrl: 'http://localhost:5555',
     supportFile: 'cypress/e2e/support/e2eSupport.ts',
     async setupNodeEvents (on, config) {

packages/app/cypress/e2e/studio/helper.ts

@@ -1,25 +1,34 @@
-export function launchStudio () {
+export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false, cliArgs = [''] } = {}) {
   cy.scaffoldProject('experimental-studio')
-  cy.openProject('experimental-studio')
+  cy.openProject('experimental-studio', cliArgs)
   cy.startAppServer('e2e')
   cy.visitApp()
   cy.specsPageIsVisible()
-  cy.get(`[data-cy-row="spec.cy.js"]`).click()
+  cy.get(`[data-cy-row="${specName}"]`).click()
 
   cy.waitForSpecToFinish()
 
   // Should not show "Studio Commands" until we've started a new Studio session.
   cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
 
-  cy
-  .contains('visits a basic html page')
-  .closest('.runnable-wrapper')
+  if (createNewTest) {
+    cy.contains('studio functionality').as('item')
+  } else {
+    cy.contains('visits a basic html page').as('item')
+  }
+
+  cy.get('@item')
+  .closest('.runnable-wrapper').as('runnable-wrapper')
   .realHover()
+
+  cy.get('@runnable-wrapper')
   .findByTestId('launch-studio')
   .click()
 
   // Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
   cy.waitForSpecToFinish()
 
-  cy.get('[data-cy="hook-name-studio commands"]').should('exist')
+  if (!createNewTest) {
+    cy.get('[data-cy="hook-name-studio commands"]').should('exist')
+  }
 }