From 3d5a598708b404cc863a1984f67ca52b50c9206f Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Thu, 27 Feb 2025 14:06:32 -0700
Subject: [PATCH 01/14] update url with studio params

---
 packages/app/src/runner/event-manager.ts | 11 +---
 packages/app/src/runner/index.ts         |  2 +-
 packages/app/src/store/studio-store.ts   | 72 +++++++++++++++++++-----
 packages/types/src/driver.ts             |  3 +-
 packages/types/src/reporter.ts           |  6 --
 5 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index 34e780694746..d70c16cd04a6 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -419,7 +419,7 @@ export class EventManager {
 
           const hideCommandLog = Cypress.config('hideCommandLog')
 
-          this.studioStore.initialize(config, runState)
+          this.studioStore.initialize(config)
 
           const runnables = Cypress.runner.normalizeAll(runState.tests, hideCommandLog, testFilter)
 
@@ -485,14 +485,7 @@ export class EventManager {
 
       return new Bluebird((resolve) => {
         this.reporterBus.emit('reporter:collect:run:state', (reporterState: ReporterRunState) => {
-          resolve({
-            ...reporterState,
-            studio: {
-              testId: this.studioStore.testId,
-              suiteId: this.studioStore.suiteId,
-              url: this.studioStore.url,
-            },
-          })
+          resolve({ reporterState })
         })
       })
     })
diff --git a/packages/app/src/runner/index.ts b/packages/app/src/runner/index.ts
index 89c8d8c589c1..d8c6cdd2768f 100644
--- a/packages/app/src/runner/index.ts
+++ b/packages/app/src/runner/index.ts
@@ -356,7 +356,7 @@ async function initialize () {
 
   const studioStore = useStudioStore()
 
-  studioStore.cancel()
+  studioStore.reset()
 
   // TODO(lachlan): UNIFY-1318 - use GraphQL to get the viewport dimensions
   // once it is more practical to do so
diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
index f5855e8014ed..0eda4e8f50f2 100644
--- a/packages/app/src/store/studio-store.ts
+++ b/packages/app/src/store/studio-store.ts
@@ -138,11 +138,13 @@ export const useStudioStore = defineStore('studioRecorder', {
   actions: {
     setTestId (testId: string) {
       this.testId = testId
+      this._updateUrlParams()
     },
 
     setSuiteId (suiteId: string) {
       this.suiteId = suiteId
       this.testId = undefined
+      this._updateUrlParams()
     },
 
     clearRunnableIds () {
@@ -182,21 +184,15 @@ export const useStudioStore = defineStore('studioRecorder', {
       this.isFailed = true
     },
 
-    initialize (config, state) {
-      const { studio } = state
+    initialize (config) {
+      const studio = this._getUrlParams()
 
-      if (studio) {
-        if (studio.testId) {
-          this.setTestId(studio.testId)
-        }
-
-        if (studio.suiteId) {
-          this.setSuiteId(studio.suiteId)
-        }
+      if (studio.testId) {
+        this.setTestId(studio.testId)
+      }
 
-        if (studio.url) {
-          this.setUrl(studio.url)
-        }
+      if (studio.suiteId) {
+        this.setSuiteId(studio.suiteId)
       }
 
       if (this.testId || this.suiteId) {
@@ -271,6 +267,7 @@ export const useStudioStore = defineStore('studioRecorder', {
     cancel () {
       this.reset()
       this.clearRunnableIds()
+      this._removeUrlParams()
     },
 
     startSave () {
@@ -284,6 +281,7 @@ export const useStudioStore = defineStore('studioRecorder', {
     save (testName?: string) {
       this.closeSaveModal()
       this.stop()
+      this._removeUrlParams()
 
       assertNonNullish(this.absoluteFile, `absoluteFile should exist`)
 
@@ -527,6 +525,54 @@ export const useStudioStore = defineStore('studioRecorder', {
       return Promise.resolve()
     },
 
+    _getUrlParams () {
+      const url = new URL(window.location.href)
+      const hashParams = new URLSearchParams(url.hash)
+
+      const testId = hashParams.get('testId')
+      const suiteId = hashParams.get('suiteId')
+
+      return { testId, suiteId }
+    },
+
+    _updateUrlParams () {
+      // if we don't have studio params, we don't need to update them
+      if (!this.testId && !this.suiteId) return
+
+      // if we have studio params, we need to remove them before adding them back
+      this._removeUrlParams()
+
+      const url = new URL(window.location.href)
+      const hashParams = new URLSearchParams(url.hash)
+
+      // set the studio params
+      hashParams.set('studio', '')
+      if (this.testId) hashParams.set('testId', this.testId)
+
+      if (this.suiteId) hashParams.set('suiteId', this.suiteId)
+
+      // update the url
+      url.hash = decodeURIComponent(hashParams.toString())
+      window.history.replaceState({}, '', url.toString())
+    },
+
+    _removeUrlParams () {
+      const url = new URL(window.location.href)
+      const hashParams = new URLSearchParams(url.hash)
+
+      // if we don't have studio params, we don't need to remove them
+      if (!hashParams.has('studio')) return
+
+      // remove the studio params
+      hashParams.delete('studio')
+      hashParams.delete('testId')
+      hashParams.delete('suiteId')
+
+      // update the url
+      url.hash = decodeURIComponent(hashParams.toString())
+      window.history.replaceState({}, '', url.toString())
+    },
+
     _trustEvent (event) {
       // only capture events sent by the actual user
       // but disable the check if we're in a test
diff --git a/packages/types/src/driver.ts b/packages/types/src/driver.ts
index fec0163d61b5..62575b931e7e 100644
--- a/packages/types/src/driver.ts
+++ b/packages/types/src/driver.ts
@@ -1,4 +1,4 @@
-import type { ReporterRunState, StudioRecorderState } from './reporter'
+import type { ReporterRunState } from './reporter'
 
 interface MochaRunnerState {
   startTime?: number
@@ -12,7 +12,6 @@ interface MochaRunnerState {
 }
 
 export type RunState = MochaRunnerState & ReporterRunState & {
-  studio?: StudioRecorderState
   isSpecsListOpen?: boolean
 }
 
diff --git a/packages/types/src/reporter.ts b/packages/types/src/reporter.ts
index 69b06f335fbd..5df729a94556 100644
--- a/packages/types/src/reporter.ts
+++ b/packages/types/src/reporter.ts
@@ -1,9 +1,3 @@
-export interface StudioRecorderState {
-  suiteId?: string
-  testId?: string
-  url?: string
-}
-
 export interface ReporterRunState {
   autoScrollingEnabled?: boolean
   scrollTop?: number

From 99185d0e715e7171ff71e4a1e8f3673349773ebe Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 28 Feb 2025 09:05:05 -0700
Subject: [PATCH 02/14] updates

---
 packages/app/cypress/e2e/studio/helper.ts     |   4 +-
 packages/app/cypress/e2e/studio/studio.cy.ts  | 218 +++++++++++++++++-
 .../app/src/runner/studio/StudioControls.vue  |  14 +-
 3 files changed, 221 insertions(+), 15 deletions(-)

diff --git a/packages/app/cypress/e2e/studio/helper.ts b/packages/app/cypress/e2e/studio/helper.ts
index fbc25ac4b420..15bd1aa91322 100644
--- a/packages/app/cypress/e2e/studio/helper.ts
+++ b/packages/app/cypress/e2e/studio/helper.ts
@@ -13,8 +13,10 @@ export function launchStudio () {
 
   cy
   .contains('visits a basic html page')
-  .closest('.runnable-wrapper')
+  .closest('.runnable-wrapper').as('runnable-wrapper')
   .realHover()
+
+  cy.get('@runnable-wrapper')
   .findByTestId('launch-studio')
   .click()
 
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index f332f231b51d..853d28c2cf8e 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -172,7 +172,7 @@ it('visits a basic html page', () => {
     })
   })
 
-  it('creates a test using Studio, but cancels and does not write to file', () => {
+  it('updates a test but cancels and does not write to file', () => {
     launchStudio()
 
     cy.getAutIframe().within(() => {
@@ -196,11 +196,9 @@ it('visits a basic html page', () => {
       cy.get('.command-name-click').should('contain.text', 'click')
     })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('exist')
-
     cy.get('a').contains('Cancel').click()
 
-    // Cyprss re-runs after you cancel Studio.
+    // Cypress re-runs after you cancel Studio.
     // Original spec should pass
     cy.waitForSpecToFinish({ passCount: 1 })
 
@@ -225,7 +223,99 @@ it('visits a basic html page', () => {
     })
   })
 
-  // TODO: Can we somehow do the "Create Test" workflow within Cypress in Cypress?
+  it('removes pending commands when restarting studio', () => {
+    launchStudio()
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 1)
+      cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
+    })
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
+      })
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.get('[data-cy=studio-toolbar]').get('button[data-cy=restart-studio]').click()
+
+    cy.waitForSpecToFinish()
+
+    // all of the pending studio commands should have been removed
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 1)
+      cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
+    })
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      // No change, since we cancelled.
+      expect(spec.trim().replace(/\r/g, '')).to.eq(`
+it('visits a basic html page', () => {
+  cy.visit('cypress/e2e/index.html')
+})`.trim())
+    })
+  })
+
+  it('does not create a new test if the Save test modal is closed', () => {
+    cy.scaffoldProject('experimental-studio')
+    cy.openProject('experimental-studio')
+    cy.startAppServer('e2e')
+    cy.visitApp()
+    cy.specsPageIsVisible()
+    cy.get(`[title="empty.cy.js"]`).should('be.visible').click()
+
+    cy.waitForSpecToFinish()
+
+    cy.contains('Create test with Cypress Studio').click()
+    cy.get('[data-cy="aut-url"]').as('urlPrompt')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').should('be.disabled')
+    })
+
+    cy.get('@urlPrompt').type('/cypress/e2e/index.html')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').click()
+    })
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+      cy.get('#increment').realClick()
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.get('#testName').type('new-test')
+
+    cy.get('button[aria-label=Close]').click()
+
+    // all of the existing studio commands should still be there since we didn't save
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 3)
+      cy.get('.command-name-visit').should('contain.text', '/cypress/e2e/index.html')
+      cy.get('.command-name-get').should('contain.text', '#increment')
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+  })
+
   it('creates a brand new test', () => {
     cy.scaffoldProject('experimental-studio')
     cy.openProject('experimental-studio')
@@ -243,17 +333,44 @@ it('visits a basic html page', () => {
       cy.contains('Continue ➜').should('be.disabled')
     })
 
-    cy.get('@urlPrompt').type('http://localhost:4455/cypress/e2e/index.html')
+    cy.get('@urlPrompt').type('/cypress/e2e/index.html')
 
     cy.get('@urlPrompt').within(() => {
-      cy.contains('Continue ➜').should('not.be.disabled')
-      cy.contains('Cancel').click()
+      cy.contains('Continue ➜').click()
     })
 
-    // TODO: Can we somehow do the "Create Test" workflow within Cypress in Cypress?
-    // If we hit "Continue" here, it updates the domain (as expected) but since we are
-    // Cypress in Cypress, it redirects us the the spec page, which is not what normally
-    // would happen in production.
+    cy.get('button').contains('Save Commands').click()
+
+    // the save button is disabled until we add a test name
+    cy.get('button[type=submit]').should('be.disabled')
+
+    cy.get('#testName').type('new-test')
+
+    cy.get('button[type=submit]').click()
+
+    // Cypress re-runs after the new test is saved.
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.get('.command').should('have.length', 1)
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/empty.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.equal(`
+/* ==== Test Created with Cypress Studio ==== */
+it('new-test', function() {
+  /* ==== Generated with Cypress Studio ==== */
+  cy.visit('/cypress/e2e/index.html');
+  /* ==== End Cypress Studio ==== */
+});
+`.trim())
+    })
   })
 
   it('shows menu and submenu correctly', () => {
@@ -278,4 +395,81 @@ it('visits a basic html page', () => {
       .should('be.visible')
     })
   })
+
+  describe('URL parameters', () => {
+    it('should update the url with the testId and studio parameters', () => {
+      launchStudio()
+
+      cy.location().then((location) => {
+        const hashSearchParams = new URLSearchParams(location.hash)
+        const testId = hashSearchParams.get('testId')
+        const studio = hashSearchParams.get('studio')
+
+        expect(testId).to.equal('r2')
+        expect(studio).to.equal('')
+      })
+    })
+
+    it('should update the url with the suiteId and studio parameters', () => {
+      launchStudio()
+
+      cy.location().then((location) => {
+        const hashSearchParams = new URLSearchParams(location.hash)
+        const testId = hashSearchParams.get('testId')
+        const studio = hashSearchParams.get('studio')
+
+        expect(testId).to.equal('r2')
+        expect(studio).to.equal('')
+      })
+    })
+
+    it('should remove the studio parameters when saving the test', () => {
+      launchStudio()
+
+      cy.getAutIframe().within(() => {
+        cy.get('#increment').realClick()
+      })
+
+      cy.get('button').contains('Save Commands').click()
+
+      cy.location().then((location) => {
+        const hashSearchParams = new URLSearchParams(location.hash)
+        const testId = hashSearchParams.get('testId')
+        const studio = hashSearchParams.get('studio')
+
+        expect(testId).to.be.null
+        expect(studio).to.be.null
+      })
+    })
+
+    it('should remove the studio parameters when cancelling', () => {
+      launchStudio()
+
+      cy.get('a').contains('Cancel').click()
+
+      cy.location().then((location) => {
+        const hashSearchParams = new URLSearchParams(location.hash)
+        const testId = hashSearchParams.get('testId')
+        const studio = hashSearchParams.get('studio')
+
+        expect(testId).to.be.null
+        expect(studio).to.be.null
+      })
+    })
+
+    it('should remove the studio parameters when navigating away', () => {
+      launchStudio()
+
+      cy.visit('/')
+
+      cy.location().then((location) => {
+        const hashSearchParams = new URLSearchParams(location.hash)
+        const testId = hashSearchParams.get('testId')
+        const studio = hashSearchParams.get('studio')
+
+        expect(testId).to.be.null
+        expect(studio).to.be.null
+      })
+    })
+  })
 })
diff --git a/packages/app/src/runner/studio/StudioControls.vue b/packages/app/src/runner/studio/StudioControls.vue
index 311f7efaeb5c..47a7ce049b0e 100644
--- a/packages/app/src/runner/studio/StudioControls.vue
+++ b/packages/app/src/runner/studio/StudioControls.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="border-y flex border-gray-50 w-full justify-between">
+  <div
+    class="border-y flex border-gray-50 w-full justify-between"
+    data-cy="studio-toolbar"
+  >
     <div class="flex">
       <div class="flex pr-5 pl-5 items-center">
         <span
@@ -26,7 +29,10 @@
       </div>
     </div>
 
-    <div class="flex">
+    <div
+      class="flex"
+      data-cy="studio-toolbar-controls"
+    >
       <div class="border rounded-md flex border-gray-100 m-1">
         <Tooltip
           placement="top"
@@ -34,6 +40,7 @@
           <button
             :class="`border-r ${controlsClassName}`"
             :disabled="studioStore.isLoading"
+            data-cy="close-studio"
             @click="handleClose"
           >
             <i-cy-delete_x16 />
@@ -49,6 +56,7 @@
           <button
             :class="`border-r ${controlsClassName}`"
             :disabled="studioStore.isLoading"
+            data-cy="restart-studio"
             @click="handleRestart"
           >
             <i-cy-action-restart_x16 />
@@ -64,6 +72,7 @@
           <button
             :class="controlsClassName"
             :disabled="studioStore.isLoading || studioStore.isEmpty"
+            data-cy="copy-commands"
             @click="handleCopyCommands"
             @mouseleave="() => commandsCopied = false"
           >
@@ -82,6 +91,7 @@
         <button
           class="rounded-md bg-indigo-500 mx-3 text-white py-2 px-3 hover:bg-indigo-400 disabled:opacity-50 disabled:pointer-events-none"
           :disabled="studioStore.isLoading || studioStore.isEmpty || studioStore.isFailed"
+          data-cy="save"
           @click="handleSaveCommands"
         >
           {{ t('runner.studio.saveTestButton') }}

From 6fe28b717daabfbbab4e583cafb914efbed51aac Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 28 Feb 2025 17:28:30 -0700
Subject: [PATCH 03/14] spec updates

---
 packages/app/cypress/e2e/studio/helper.ts     |  17 +-
 packages/app/cypress/e2e/studio/studio.cy.ts  | 687 +++++++++++++++---
 packages/app/src/store/studio-store.ts        |  14 +
 .../cypress/e2e/spec-w-visit.cy.js            |   9 +
 .../cypress/e2e/spec.cy.js                    |   6 +-
 5 files changed, 625 insertions(+), 108 deletions(-)
 create mode 100644 system-tests/projects/experimental-studio/cypress/e2e/spec-w-visit.cy.js

diff --git a/packages/app/cypress/e2e/studio/helper.ts b/packages/app/cypress/e2e/studio/helper.ts
index 15bd1aa91322..4bfc920d45a8 100644
--- a/packages/app/cypress/e2e/studio/helper.ts
+++ b/packages/app/cypress/e2e/studio/helper.ts
@@ -1,18 +1,23 @@
-export function launchStudio () {
+export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false } = {}) {
   cy.scaffoldProject('experimental-studio')
   cy.openProject('experimental-studio')
   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')
+  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()
 
@@ -23,5 +28,7 @@ export function launchStudio () {
   // 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')
+  }
 }
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index 853d28c2cf8e..19b7681141b9 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -1,7 +1,7 @@
 import { launchStudio } from './helper'
 
 describe('Cypress Studio', () => {
-  it('updates an existing test with a click action', () => {
+  it('updates an existing test with an action', () => {
     function addStudioClick (initialCount: number) {
       cy.getAutIframe().within(() => {
         cy.get('p').contains(`Count is ${initialCount}`)
@@ -47,11 +47,89 @@ describe('Cypress Studio', () => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
-it('visits a basic html page', () => {
-  cy.visit('cypress/e2e/index.html')
-  /* ==== Generated with Cypress Studio ==== */
-  cy.get('#increment').click();
-  /* ==== End Cypress Studio ==== */
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#increment').click();
+    /* ==== End Cypress Studio ==== */
+  })
+})`.trim())
+    })
+
+    // Studio re-executes the test after writing it file.
+    // It should pass
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    // Assert the commands we input via Studio are executed.
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('.command-name-get').within(() => {
+      cy.contains('get')
+      cy.contains('#increment')
+    })
+
+    cy.get('.command-name-click').within(() => {
+      cy.contains('click')
+    })
+  })
+
+  it('updates an existing test with an action using studio controls', () => {
+    function addStudioClick (initialCount: number) {
+      cy.getAutIframe().within(() => {
+        cy.get('p').contains(`Count is ${initialCount}`)
+
+        // (1) First Studio action - get
+        cy.get('#increment')
+
+        // (2) Second Studio action - click
+        .realClick().then(() => {
+          cy.get('p').contains(`Count is ${initialCount + 1}`)
+        })
+      })
+    }
+
+    launchStudio()
+
+    cy.get('button').contains('Save Commands').should('be.disabled')
+
+    addStudioClick(0)
+
+    cy.get('button').contains('Save Commands').should('not.be.disabled')
+
+    cy.get('.studio-command-remove').click()
+
+    cy.get('button').contains('Save Commands').should('be.disabled')
+
+    addStudioClick(1)
+
+    cy.get('button').contains('Save Commands').should('not.be.disabled')
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.get('[data-cy=studio-toolbar-controls').get('[data-cy=save]').click()
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.eq(`
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#increment').click();
+    /* ==== End Cypress Studio ==== */
+  })
 })`.trim())
     })
 
@@ -75,7 +153,7 @@ it('visits a basic html page', () => {
     })
   })
 
-  it('writes a test with all kinds of assertions', () => {
+  it('updates an existing test with assertions', () => {
     function assertStudioHookCount (num: number) {
       cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
         cy.get('.command').should('have.length', num)
@@ -158,21 +236,22 @@ it('visits a basic html page', () => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
-it('visits a basic html page', () => {
-  cy.visit('cypress/e2e/index.html')
-  /* ==== Generated with Cypress Studio ==== */
-  cy.get('#increment').should('be.enabled');
-  cy.get('#increment').should('be.visible');
-  cy.get('#increment').should('have.text', 'Increment');
-  cy.get('#increment').should('have.id', 'increment');
-  cy.get('#increment').should('have.attr', 'onclick', 'increment()');
-  /* ==== End Cypress Studio ==== */
-})`
-      .trim())
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#increment').should('be.enabled');
+    cy.get('#increment').should('be.visible');
+    cy.get('#increment').should('have.text', 'Increment');
+    cy.get('#increment').should('have.id', 'increment');
+    cy.get('#increment').should('have.attr', 'onclick', 'increment()');
+    /* ==== End Cypress Studio ==== */
+  })
+})`.trim())
     })
   })
 
-  it('updates a test but cancels and does not write to file', () => {
+  it('does not update the test when it is cancelled', () => {
     launchStudio()
 
     cy.getAutIframe().within(() => {
@@ -217,8 +296,63 @@ it('visits a basic html page', () => {
 
       // No change, since we cancelled.
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
-it('visits a basic html page', () => {
-  cy.visit('cypress/e2e/index.html')
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
+})`.trim())
+    })
+  })
+
+  it('does not update the test when studio is closed using studio controls', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
+      })
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=close-studio]').click()
+
+    // Cypress re-runs after you cancel Studio.
+    // Original spec should pass
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.get('.command').should('have.length', 1)
+
+    // Assert the spec was executed without any new commands.
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      // No change, since we closed studio
+      expect(spec.trim().replace(/\r/g, '')).to.eq(`
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
 })`.trim())
     })
   })
@@ -267,13 +401,15 @@ it('visits a basic html page', () => {
 
       // No change, since we cancelled.
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
-it('visits a basic html page', () => {
-  cy.visit('cypress/e2e/index.html')
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
 })`.trim())
     })
   })
 
-  it('does not create a new test if the Save test modal is closed', () => {
+  it('creates a new test from an empty spec', () => {
     cy.scaffoldProject('experimental-studio')
     cy.openProject('experimental-studio')
     cy.startAppServer('e2e')
@@ -296,37 +432,43 @@ it('visits a basic html page', () => {
       cy.contains('Continue ➜').click()
     })
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-      cy.get('#increment').realClick()
-    })
-
     cy.get('button').contains('Save Commands').click()
 
+    // the save button is disabled until we add a test name
+    cy.get('button[type=submit]').should('be.disabled')
+
     cy.get('#testName').type('new-test')
 
-    cy.get('button[aria-label=Close]').click()
+    cy.get('button[type=submit]').click()
 
-    // all of the existing studio commands should still be there since we didn't save
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 3)
-      cy.get('.command-name-visit').should('contain.text', '/cypress/e2e/index.html')
-      cy.get('.command-name-get').should('contain.text', '#increment')
-      cy.get('.command-name-click').should('contain.text', 'click')
+    // Cypress re-runs after the new test is saved.
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.get('.command').should('have.length', 1)
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
     })
-  })
 
-  it('creates a brand new test', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.openProject('experimental-studio')
-    cy.startAppServer('e2e')
-    cy.visitApp()
-    cy.specsPageIsVisible()
-    cy.get(`[title="empty.cy.js"]`).should('be.visible').click()
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
 
-    cy.waitForSpecToFinish()
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/empty.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.equal(`
+/* ==== Test Created with Cypress Studio ==== */
+it('new-test', function() {
+  /* ==== Generated with Cypress Studio ==== */
+  cy.visit('/cypress/e2e/index.html');
+  /* ==== End Cypress Studio ==== */
+});
+`.trim())
+    })
+  })
+
+  it('creates a new test for an existing spec', () => {
+    launchStudio({ createNewTest: true })
 
-    cy.contains('Create test with Cypress Studio').click()
     cy.get('[data-cy="aut-url"]').as('urlPrompt')
 
     cy.get('@urlPrompt').within(() => {
@@ -349,8 +491,9 @@ it('visits a basic html page', () => {
     cy.get('button[type=submit]').click()
 
     // Cypress re-runs after the new test is saved.
-    cy.waitForSpecToFinish({ passCount: 1 })
+    cy.waitForSpecToFinish({ passCount: 2 })
 
+    cy.contains('new-test').click()
     cy.get('.command').should('have.length', 1)
     cy.get('.command-name-visit').within(() => {
       cy.contains('visit')
@@ -360,20 +503,141 @@ it('visits a basic html page', () => {
     cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
 
     cy.withCtx(async (ctx) => {
-      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/empty.cy.js')
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
 
       expect(spec.trim().replace(/\r/g, '')).to.equal(`
-/* ==== Test Created with Cypress Studio ==== */
-it('new-test', function() {
-  /* ==== Generated with Cypress Studio ==== */
-  cy.visit('/cypress/e2e/index.html');
-  /* ==== End Cypress Studio ==== */
-});
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
+
+  /* ==== Test Created with Cypress Studio ==== */
+  it('new-test', function() {
+    /* ==== Generated with Cypress Studio ==== */
+    cy.visit('/cypress/e2e/index.html');
+    /* ==== End Cypress Studio ==== */
+  });
+})
 `.trim())
     })
   })
 
-  it('shows menu and submenu correctly', () => {
+  it('creates a new test for an existing spec with the url already defined', () => {
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
+      })
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    // the save button is disabled until we add a test name
+    cy.get('button[type=submit]').should('be.disabled')
+
+    cy.get('#testName').type('new-test')
+
+    cy.get('button[type=submit]').click()
+
+    // Cypress re-runs after the new test is saved.
+    cy.waitForSpecToFinish({ passCount: 2 })
+
+    cy.contains('new-test').click()
+
+    cy.get('.command').should('have.length', 3)
+
+    // Assert the commands we input via Studio are executed.
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('.command-name-get').within(() => {
+      cy.contains('get')
+      cy.contains('#increment')
+    })
+
+    cy.get('.command-name-click').within(() => {
+      cy.contains('click')
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec-w-visit.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.equal(`
+describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.visit('cypress/e2e/index.html')
+  })
+
+  it('visits a basic html page', () => {
+    cy.get('h1').should('have.text', 'Hello, Studio!')
+  })
+
+  /* ==== Test Created with Cypress Studio ==== */
+  it('new-test', function() {
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#increment').click();
+    /* ==== End Cypress Studio ==== */
+  });
+})
+`.trim())
+    })
+  })
+
+  it('does not create a new test if the Save test modal is closed', () => {
+    cy.scaffoldProject('experimental-studio')
+    cy.openProject('experimental-studio')
+    cy.startAppServer('e2e')
+    cy.visitApp()
+    cy.specsPageIsVisible()
+    cy.get(`[title="empty.cy.js"]`).should('be.visible').click()
+
+    cy.waitForSpecToFinish()
+
+    cy.contains('Create test with Cypress Studio').click()
+    cy.get('[data-cy="aut-url"]').as('urlPrompt')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').should('be.disabled')
+    })
+
+    cy.get('@urlPrompt').type('/cypress/e2e/index.html')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').click()
+    })
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+      cy.get('#increment').realClick()
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.get('#testName').type('new-test')
+
+    cy.get('button[aria-label=Close]').click()
+
+    // all of the existing studio commands should still be there since we didn't save
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 3)
+      cy.get('.command-name-visit').should('contain.text', '/cypress/e2e/index.html')
+      cy.get('.command-name-get').should('contain.text', '#increment')
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+  })
+
+  it('shows assertions menu and submenu correctly', () => {
     launchStudio()
 
     cy.getAutIframe().within(() => {
@@ -396,80 +660,301 @@ it('new-test', function() {
     })
   })
 
-  describe('URL parameters', () => {
-    it('should update the url with the testId and studio parameters', () => {
-      launchStudio()
+  it('copies the studio commands to the clipboard', () => {
+    launchStudio()
 
-      cy.location().then((location) => {
-        const hashSearchParams = new URLSearchParams(location.hash)
-        const testId = hashSearchParams.get('testId')
-        const studio = hashSearchParams.get('studio')
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
 
-        expect(testId).to.equal('r2')
-        expect(studio).to.equal('')
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
       })
     })
 
-    it('should update the url with the suiteId and studio parameters', () => {
-      launchStudio()
+    // spy on the clipboard to check if the commands are copied
+    cy.window().its('navigator.clipboard').then((clipboard) => {
+      cy.spy(clipboard, 'writeText').as('writeText')
+    })
+
+    cy.get('button.studio-copy').click()
+
+    cy.get('@writeText').should('have.been.calledOnceWith',
+`/* ==== Generated with Cypress Studio ==== */
+cy.get('#increment').click();
+/* ==== End Cypress Studio ==== */`)
+  })
+
+  it('copies the studio commands to the clipboard using studio controls', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
 
-      cy.location().then((location) => {
-        const hashSearchParams = new URLSearchParams(location.hash)
-        const testId = hashSearchParams.get('testId')
-        const studio = hashSearchParams.get('studio')
+      // (1) First Studio action - get
+      cy.get('#increment')
 
-        expect(testId).to.equal('r2')
-        expect(studio).to.equal('')
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
       })
     })
 
-    it('should remove the studio parameters when saving the test', () => {
-      launchStudio()
+    // spy on the clipboard to check if the commands are copied
+    cy.window().its('navigator.clipboard').then((clipboard) => {
+      cy.spy(clipboard, 'writeText').as('writeText')
+    })
 
-      cy.getAutIframe().within(() => {
-        cy.get('#increment').realClick()
+    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=copy-commands]').click()
+
+    cy.get('@writeText').should('have.been.calledOnceWith',
+`/* ==== Generated with Cypress Studio ==== */
+cy.get('#increment').click();
+/* ==== End Cypress Studio ==== */`)
+  })
+
+  // TODO: when reloading, we incorrectly go to the spec page of the /app project instead of the /experimental-studio project
+  it.skip('removes pending commands if the page is reloaded', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
       })
+    })
 
-      cy.get('button').contains('Save Commands').click()
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.reload()
 
-      cy.location().then((location) => {
-        const hashSearchParams = new URLSearchParams(location.hash)
-        const testId = hashSearchParams.get('testId')
-        const studio = hashSearchParams.get('studio')
+    cy.waitForSpecToFinish()
 
-        expect(testId).to.be.null
-        expect(studio).to.be.null
+    // after reloading we should still be in studio mode but the commands should be removed
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 1)
+      cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
+    })
+
+    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=save]').should('be.disabled')
+  })
+
+  it('removes pending commands when rerunning the test', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
       })
     })
 
-    it('should remove the studio parameters when cancelling', () => {
-      launchStudio()
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
 
-      cy.get('a').contains('Cancel').click()
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.get('button[aria-label="Rerun all tests"]').click()
+
+    cy.waitForSpecToFinish()
+
+    // after reloading we should still be in studio mode but the commands should be removed
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 1)
+      cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
+    })
+
+    // TODO: the Save button should be disabled but it is incorrectly enabled
+    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=save]').should('be.enabled')
+  })
+
+  it('does not re-enter studio mode when changing pages and then coming back', () => {
+    launchStudio()
 
-      cy.location().then((location) => {
-        const hashSearchParams = new URLSearchParams(location.hash)
-        const testId = hashSearchParams.get('testId')
-        const studio = hashSearchParams.get('studio')
+    cy.get('[data-cy="hook-name-studio commands"]')
 
-        expect(testId).to.be.null
-        expect(studio).to.be.null
+    // go to the runs page
+    cy.get('[data-cy=sidebar-link-runs-page]').click()
+
+    // go back to the specs page
+    cy.get('[data-cy=sidebar-link-specs-page]').click()
+    cy.contains('spec.cy.js').click()
+
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.location().its('hash').should('not.contain', 'testId=').and('not.contain', 'studio=')
+  })
+
+  it('exits studio mode if the spec is changed on the file system', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
       })
     })
 
-    it('should remove the studio parameters when navigating away', () => {
-      launchStudio()
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
 
-      cy.visit('/')
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
 
-      cy.location().then((location) => {
-        const hashSearchParams = new URLSearchParams(location.hash)
-        const testId = hashSearchParams.get('testId')
-        const studio = hashSearchParams.get('studio')
+    // update the spec on the file system
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+
+    // new command
+    cy.get('h1').should('have.text', 'Hello, Studio!')
+  })
+})`)
+    })
 
-        expect(testId).to.be.null
-        expect(studio).to.be.null
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+
+    // assert the commands we wrote directly to the spec are executed
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('.command-name-get').within(() => {
+      cy.contains('get')
+      cy.contains('h1')
+    })
+
+    cy.get('.command-name-assert').within(() => {
+      cy.contains('assert')
+      cy.contains('expected <h1> to have text Hello, Studio!')
+    })
+  })
+
+  it('exits studio mode if the spec is removed on the file system', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
       })
     })
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    // update the spec on the file system
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.removeFileInProject('cypress/e2e/spec.cy.js')
+    })
+
+    cy.location().its('hash').should('equal', '#/specs').and('not.contain', 'testId=').and('not.contain', 'studio=')
+    cy.get('[data-cy=alert]').should('contain.text', 'Spec not found')
+    cy.get('[data-cy=alert-body]').should('contain.text', 'There is no spec matching the following location: cypress/e2e/spec.cy.js')
+  })
+
+  it('removes url parameters when selecting a different spec', () => {
+    launchStudio()
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+
+    // select a different spec
+    cy.get('[aria-controls=reporter-inline-specs-list]').click()
+    cy.get('a').contains('spec-w-visit.cy.js').click()
+    cy.get('[aria-controls=reporter-inline-specs-list]').click()
+
+    cy.location().its('hash').should('not.contain', 'testId=').and('not.contain', 'studio=')
+  })
+
+  it('removes url parameters when going to a different page', () => {
+    launchStudio()
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+
+    // go to the runs page
+    cy.get('[data-cy=sidebar-link-runs-page]').click()
+
+    cy.location().its('hash').should('contain', '/runs').and('not.contain', 'testId=').and('not.contain', 'studio=')
+  })
+
+  it('updates the url with the testId and studio parameters when entering studio with a test', () => {
+    launchStudio()
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+  })
+
+  it('update the url with the suiteId and studio parameters when entering studio with a suite', () => {
+    launchStudio({ createNewTest: true })
+
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
+  })
+
+  it('removes the studio parameters when saving the test', () => {
+    launchStudio()
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').realClick()
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.location().its('hash').and('not.contain', 'testId=').and('not.contain', 'studio=')
+  })
+
+  it('removes the studio parameters when cancelling', () => {
+    launchStudio()
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+
+    cy.get('a').contains('Cancel').click()
+
+    cy.location().its('hash').and('not.contain', 'testId=').and('not.contain', 'studio=')
   })
 })
diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
index 0eda4e8f50f2..dea928f1ede2 100644
--- a/packages/app/src/store/studio-store.ts
+++ b/packages/app/src/store/studio-store.ts
@@ -262,6 +262,8 @@ export const useStudioStore = defineStore('studioRecorder', {
       this._hasStarted = false
       this._currentId = 1
       this.isFailed = false
+
+      this._maybeResetRunnables()
     },
 
     cancel () {
@@ -281,6 +283,7 @@ export const useStudioStore = defineStore('studioRecorder', {
     save (testName?: string) {
       this.closeSaveModal()
       this.stop()
+      // TODO: what happens if the save fails?
       this._removeUrlParams()
 
       assertNonNullish(this.absoluteFile, `absoluteFile should exist`)
@@ -525,6 +528,17 @@ export const useStudioStore = defineStore('studioRecorder', {
       return Promise.resolve()
     },
 
+    _maybeResetRunnables () {
+      const url = new URL(window.location.href)
+      const hashParams = new URLSearchParams(url.hash)
+
+      // if we don't have studio params, then we can reset the runnables
+      // otherwise, we need to keep the runnables since we're still in studio
+      if (!hashParams.has('studio')) {
+        this.clearRunnableIds()
+      }
+    },
+
     _getUrlParams () {
       const url = new URL(window.location.href)
       const hashParams = new URLSearchParams(url.hash)
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec-w-visit.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec-w-visit.cy.js
new file mode 100644
index 000000000000..b88d2b245b9a
--- /dev/null
+++ b/system-tests/projects/experimental-studio/cypress/e2e/spec-w-visit.cy.js
@@ -0,0 +1,9 @@
+describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.visit('cypress/e2e/index.html')
+  })
+
+  it('visits a basic html page', () => {
+    cy.get('h1').should('have.text', 'Hello, Studio!')
+  })
+})
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
index 14398fef3b5c..d770ab93d996 100644
--- a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
+++ b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
@@ -1,3 +1,5 @@
-it('visits a basic html page', () => {
-  cy.visit('cypress/e2e/index.html')
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
 })

From 6816e2792339b41fb1b79c39241bf53744cf4cc5 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 28 Feb 2025 19:12:20 -0700
Subject: [PATCH 04/14] adding tests

---
 packages/app/cypress/e2e/studio/helper.ts    |   4 +-
 packages/app/cypress/e2e/studio/studio.cy.ts | 440 +++++++++++--------
 packages/app/src/runner/event-manager.ts     |   2 +
 packages/app/src/store/studio-store.ts       |   8 +-
 4 files changed, 254 insertions(+), 200 deletions(-)

diff --git a/packages/app/cypress/e2e/studio/helper.ts b/packages/app/cypress/e2e/studio/helper.ts
index 4bfc920d45a8..52d006bd2321 100644
--- a/packages/app/cypress/e2e/studio/helper.ts
+++ b/packages/app/cypress/e2e/studio/helper.ts
@@ -1,6 +1,6 @@
-export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false } = {}) {
+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()
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index 19b7681141b9..490c50735c6b 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -1,26 +1,32 @@
 import { launchStudio } from './helper'
 
 describe('Cypress Studio', () => {
-  it('updates an existing test with an action', () => {
-    function addStudioClick (initialCount: number) {
-      cy.getAutIframe().within(() => {
-        cy.get('p').contains(`Count is ${initialCount}`)
+  function incrementCounter (initialCount: number) {
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains(`Count is ${initialCount}`)
 
-        // (1) First Studio action - get
-        cy.get('#increment')
+      // (1) First Studio action - get
+      cy.get('#increment')
 
-        // (2) Second Studio action - click
-        .realClick().then(() => {
-          cy.get('p').contains(`Count is ${initialCount + 1}`)
-        })
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains(`Count is ${initialCount + 1}`)
       })
-    }
+    })
+  }
+
+  function assertStudioHookCommandCount (num: number) {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', num)
+    })
+  }
 
+  it('updates an existing test with an action', () => {
     launchStudio()
 
     cy.get('button').contains('Save Commands').should('be.disabled')
 
-    addStudioClick(0)
+    incrementCounter(0)
 
     cy.get('button').contains('Save Commands').should('not.be.disabled')
 
@@ -28,12 +34,13 @@ describe('Cypress Studio', () => {
 
     cy.get('button').contains('Save Commands').should('be.disabled')
 
-    addStudioClick(1)
+    incrementCounter(1)
 
     cy.get('button').contains('Save Commands').should('not.be.disabled')
 
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -77,26 +84,12 @@ describe('studio functionality', () => {
     })
   })
 
-  it('updates an existing test with an action using studio controls', () => {
-    function addStudioClick (initialCount: number) {
-      cy.getAutIframe().within(() => {
-        cy.get('p').contains(`Count is ${initialCount}`)
-
-        // (1) First Studio action - get
-        cy.get('#increment')
-
-        // (2) Second Studio action - click
-        .realClick().then(() => {
-          cy.get('p').contains(`Count is ${initialCount + 1}`)
-        })
-      })
-    }
-
+  it('updates an existing test with an action using studio toolbar', () => {
     launchStudio()
 
     cy.get('button').contains('Save Commands').should('be.disabled')
 
-    addStudioClick(0)
+    incrementCounter(0)
 
     cy.get('button').contains('Save Commands').should('not.be.disabled')
 
@@ -104,12 +97,12 @@ describe('studio functionality', () => {
 
     cy.get('button').contains('Save Commands').should('be.disabled')
 
-    addStudioClick(1)
+    incrementCounter(1)
 
     cy.get('button').contains('Save Commands').should('not.be.disabled')
 
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -117,7 +110,7 @@ describe('studio functionality', () => {
       cy.get('.command-name-click').should('contain.text', 'click')
     })
 
-    cy.get('[data-cy=studio-toolbar-controls').get('[data-cy=save]').click()
+    cy.findByTestId('studio-toolbar-controls').findByTestId('save').click()
 
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
@@ -154,12 +147,6 @@ describe('studio functionality', () => {
   })
 
   it('updates an existing test with assertions', () => {
-    function assertStudioHookCount (num: number) {
-      cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-        cy.get('.command').should('have.length', num)
-      })
-    }
-
     launchStudio()
 
     cy.getAutIframe().within(() => {
@@ -168,14 +155,14 @@ describe('studio functionality', () => {
       })
     })
 
-    assertStudioHookCount(2)
+    assertStudioHookCommandCount(2)
     cy.getAutIframe().within(() => {
       cy.get('#increment').rightclick().then(() => {
         cy.get('.__cypress-studio-assertions-menu').shadow().contains('be visible').realClick()
       })
     })
 
-    assertStudioHookCount(4)
+    assertStudioHookCommandCount(4)
 
     cy.getAutIframe().within(() => {
       cy.get('#increment').rightclick().then(() => {
@@ -184,7 +171,7 @@ describe('studio functionality', () => {
       })
     })
 
-    assertStudioHookCount(6)
+    assertStudioHookCommandCount(6)
 
     cy.getAutIframe().within(() => {
       cy.get('#increment').rightclick().then(() => {
@@ -193,7 +180,7 @@ describe('studio functionality', () => {
       })
     })
 
-    assertStudioHookCount(8)
+    assertStudioHookCommandCount(8)
 
     cy.getAutIframe().within(() => {
       cy.get('#increment').rightclick().then(() => {
@@ -202,9 +189,9 @@ describe('studio functionality', () => {
       })
     })
 
-    assertStudioHookCount(10)
+    assertStudioHookCommandCount(10)
 
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // 10 Commands - 5 assertions, each is a child of the subject's `cy.get`
       cy.get('.command').should('have.length', 10)
 
@@ -254,20 +241,10 @@ describe('studio functionality', () => {
   it('does not update the test when it is cancelled', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
+    incrementCounter(0)
 
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
-
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -289,7 +266,7 @@ describe('studio functionality', () => {
       cy.contains('cypress/e2e/index.html')
     })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
 
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
@@ -304,23 +281,13 @@ describe('studio functionality', () => {
     })
   })
 
-  it('does not update the test when studio is closed using studio controls', () => {
+  it('does not update the test when studio is closed using studio toolbar', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
-
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
+    incrementCounter(0)
 
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -328,7 +295,7 @@ describe('studio functionality', () => {
       cy.get('.command-name-click').should('contain.text', 'click')
     })
 
-    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=close-studio]').click()
+    cy.findByTestId('studio-toolbar-controls').findByTestId('close-studio').click()
 
     // Cypress re-runs after you cancel Studio.
     // Original spec should pass
@@ -342,7 +309,7 @@ describe('studio functionality', () => {
       cy.contains('cypress/e2e/index.html')
     })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
 
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
@@ -360,25 +327,15 @@ describe('studio functionality', () => {
   it('removes pending commands when restarting studio', () => {
     launchStudio()
 
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 1)
       cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
     })
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
+    incrementCounter(0)
 
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
-
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -386,12 +343,12 @@ describe('studio functionality', () => {
       cy.get('.command-name-click').should('contain.text', 'click')
     })
 
-    cy.get('[data-cy=studio-toolbar]').get('button[data-cy=restart-studio]').click()
+    cy.findByTestId('studio-toolbar').findByTestId('restart-studio').click()
 
     cy.waitForSpecToFinish()
 
     // all of the pending studio commands should have been removed
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 1)
       cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
     })
@@ -420,7 +377,7 @@ describe('studio functionality', () => {
     cy.waitForSpecToFinish()
 
     cy.contains('Create test with Cypress Studio').click()
-    cy.get('[data-cy="aut-url"]').as('urlPrompt')
+    cy.findByTestId('aut-url').as('urlPrompt')
 
     cy.get('@urlPrompt').within(() => {
       cy.contains('Continue ➜').should('be.disabled')
@@ -450,7 +407,7 @@ describe('studio functionality', () => {
       cy.contains('cypress/e2e/index.html')
     })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
 
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/empty.cy.js')
@@ -469,7 +426,7 @@ it('new-test', function() {
   it('creates a new test for an existing spec', () => {
     launchStudio({ createNewTest: true })
 
-    cy.get('[data-cy="aut-url"]').as('urlPrompt')
+    cy.findByTestId('aut-url').as('urlPrompt')
 
     cy.get('@urlPrompt').within(() => {
       cy.contains('Continue ➜').should('be.disabled')
@@ -500,7 +457,7 @@ it('new-test', function() {
       cy.contains('cypress/e2e/index.html')
     })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
 
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
@@ -525,17 +482,7 @@ describe('studio functionality', () => {
   it('creates a new test for an existing spec with the url already defined', () => {
     launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
-
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
+    incrementCounter(0)
 
     cy.get('button').contains('Save Commands').click()
 
@@ -568,7 +515,7 @@ describe('studio functionality', () => {
       cy.contains('click')
     })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
 
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec-w-visit.cy.js')
@@ -605,7 +552,7 @@ describe('studio functionality', () => {
     cy.waitForSpecToFinish()
 
     cy.contains('Create test with Cypress Studio').click()
-    cy.get('[data-cy="aut-url"]').as('urlPrompt')
+    cy.findByTestId('aut-url').as('urlPrompt')
 
     cy.get('@urlPrompt').within(() => {
       cy.contains('Continue ➜').should('be.disabled')
@@ -629,7 +576,7 @@ describe('studio functionality', () => {
     cy.get('button[aria-label=Close]').click()
 
     // all of the existing studio commands should still be there since we didn't save
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 3)
       cy.get('.command-name-visit').should('contain.text', '/cypress/e2e/index.html')
       cy.get('.command-name-get').should('contain.text', '#increment')
@@ -663,17 +610,7 @@ describe('studio functionality', () => {
   it('copies the studio commands to the clipboard', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
-
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
+    incrementCounter(0)
 
     // spy on the clipboard to check if the commands are copied
     cy.window().its('navigator.clipboard').then((clipboard) => {
@@ -688,27 +625,17 @@ cy.get('#increment').click();
 /* ==== End Cypress Studio ==== */`)
   })
 
-  it('copies the studio commands to the clipboard using studio controls', () => {
+  it('copies the studio commands to the clipboard using studio toolbar', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
-
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
+    incrementCounter(0)
 
     // spy on the clipboard to check if the commands are copied
     cy.window().its('navigator.clipboard').then((clipboard) => {
       cy.spy(clipboard, 'writeText').as('writeText')
     })
 
-    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=copy-commands]').click()
+    cy.findByTestId('studio-toolbar-controls').findByTestId('copy-commands').click()
 
     cy.get('@writeText').should('have.been.calledOnceWith',
 `/* ==== Generated with Cypress Studio ==== */
@@ -720,19 +647,9 @@ cy.get('#increment').click();
   it.skip('removes pending commands if the page is reloaded', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
+    incrementCounter(0)
 
-      // (1) First Studio action - get
-      cy.get('#increment')
-
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
-
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 2)
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
@@ -746,31 +663,21 @@ cy.get('#increment').click();
     cy.waitForSpecToFinish()
 
     // after reloading we should still be in studio mode but the commands should be removed
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 1)
       cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
     })
 
-    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=save]').should('be.disabled')
+    cy.findByTestId('studio-toolbar-controls').findByTestId('save').should('be.disabled')
   })
 
   it('removes pending commands when rerunning the test', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      cy.get('p').contains('Count is 0')
-
-      // (1) First Studio action - get
-      cy.get('#increment')
+    incrementCounter(0)
 
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
-
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -783,48 +690,40 @@ cy.get('#increment').click();
     cy.waitForSpecToFinish()
 
     // after reloading we should still be in studio mode but the commands should be removed
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 1)
       cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
     })
 
     // TODO: the Save button should be disabled but it is incorrectly enabled
-    cy.get('[data-cy=studio-toolbar-controls]').get('[data-cy=save]').should('be.enabled')
+    cy.findByTestId('studio-toolbar-controls').findByTestId('save').should('be.enabled')
   })
 
   it('does not re-enter studio mode when changing pages and then coming back', () => {
     launchStudio()
 
-    cy.get('[data-cy="hook-name-studio commands"]')
+    cy.findByTestId('hook-name-studio commands')
 
     // go to the runs page
-    cy.get('[data-cy=sidebar-link-runs-page]').click()
+    cy.findByTestId('sidebar-link-runs-page').click()
 
     // go back to the specs page
-    cy.get('[data-cy=sidebar-link-specs-page]').click()
+    cy.findByTestId('sidebar-link-specs-page').click()
     cy.contains('spec.cy.js').click()
 
     cy.waitForSpecToFinish({ passCount: 1 })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
     cy.location().its('hash').should('not.contain', 'testId=').and('not.contain', 'studio=')
   })
 
   it('exits studio mode if the spec is changed on the file system', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      // (1) First Studio action - get
-      cy.get('#increment')
-
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
+    incrementCounter(0)
 
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
-      cy.get('.command').should('have.length', 2)
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
 
@@ -847,7 +746,7 @@ describe('studio functionality', () => {
 
     cy.waitForSpecToFinish({ passCount: 1 })
 
-    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
 
     // assert the commands we wrote directly to the spec are executed
     cy.get('.command-name-visit').within(() => {
@@ -869,17 +768,10 @@ describe('studio functionality', () => {
   it('exits studio mode if the spec is removed on the file system', () => {
     launchStudio()
 
-    cy.getAutIframe().within(() => {
-      // (1) First Studio action - get
-      cy.get('#increment')
+    incrementCounter(0)
 
-      // (2) Second Studio action - click
-      .realClick().then(() => {
-        cy.get('p').contains('Count is 1')
-      })
-    })
-
-    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
       cy.get('.command').should('have.length', 2)
       // (1) Get Command
       cy.get('.command-name-get').should('contain.text', '#increment')
@@ -894,8 +786,113 @@ describe('studio functionality', () => {
     })
 
     cy.location().its('hash').should('equal', '#/specs').and('not.contain', 'testId=').and('not.contain', 'studio=')
-    cy.get('[data-cy=alert]').should('contain.text', 'Spec not found')
-    cy.get('[data-cy=alert-body]').should('contain.text', 'There is no spec matching the following location: cypress/e2e/spec.cy.js')
+    cy.findByTestId('alert').should('contain.text', 'Spec not found')
+    cy.findByTestId('alert-body').should('contain.text', 'There is no spec matching the following location: cypress/e2e/spec.cy.js')
+  })
+
+  it('appends the studio commands to the commands added to the test on the file system when file watching is disabled', () => {
+    launchStudio({ cliArgs: ['--config', 'watchForFileChanges=false'] })
+
+    incrementCounter(0)
+
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    // update the spec on the file system
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+
+    // new command
+    cy.get('h1').should('have.text', 'Hello, Studio!')
+  })
+})`)
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.findByTestId('hook-name-studio commands').should('not.exist')
+
+    // assert the commands we wrote directly to the spec are executed
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('.command-name-get').eq(0).within(() => {
+      cy.contains('get')
+      cy.contains('h1')
+    })
+
+    cy.get('.command-name-assert').within(() => {
+      cy.contains('assert')
+      cy.contains('expected <h1> to have text Hello, Studio!')
+    })
+
+    cy.get('.command-name-get').eq(1).within(() => {
+      cy.contains('get')
+      cy.contains('#increment')
+    })
+
+    cy.get('.command-name-click').within(() => {
+      cy.contains('click')
+    })
+  })
+
+  it('remains in studio mode when the test name is changed on the file system and file watching is disabled', () => {
+    launchStudio({ cliArgs: ['--config', 'watchForFileChanges=false'] })
+
+    incrementCounter(0)
+
+    assertStudioHookCommandCount(2)
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    // update the spec on the file system by changing the
+    // test name which will cause the save to fail since
+    // the test won't be found
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
+describe('studio functionality', () => {
+  it('CHANGED - visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+
+    // new command
+    cy.get('h1').should('have.text', 'Hello, Studio!')
+  })
+})`)
+    })
+
+    cy.findByTestId('studio-toolbar-controls').should('exist')
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.findByTestId('studio-toolbar-controls').should('exist')
+    cy.get('button').contains('Save Commands')
+
+    cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
   })
 
   it('removes url parameters when selecting a different spec', () => {
@@ -917,7 +914,7 @@ describe('studio functionality', () => {
     cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
 
     // go to the runs page
-    cy.get('[data-cy=sidebar-link-runs-page]').click()
+    cy.findByTestId('sidebar-link-runs-page').click()
 
     cy.location().its('hash').should('contain', '/runs').and('not.contain', 'testId=').and('not.contain', 'studio=')
   })
@@ -934,7 +931,7 @@ describe('studio functionality', () => {
     cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
   })
 
-  it('removes the studio parameters when saving the test', () => {
+  it('removes the studio url parameters when saving test changes', () => {
     launchStudio()
 
     cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
@@ -948,7 +945,23 @@ describe('studio functionality', () => {
     cy.location().its('hash').and('not.contain', 'testId=').and('not.contain', 'studio=')
   })
 
-  it('removes the studio parameters when cancelling', () => {
+  it('removes the studio url parameters when saving a new test', () => {
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
+
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').realClick()
+    })
+
+    cy.get('button').contains('Save Commands').click()
+    cy.get('#testName').type('new-test')
+    cy.get('button[type=submit]').click()
+
+    cy.location().its('hash').and('not.contain', 'suiteId=').and('not.contain', 'studio=')
+  })
+
+  it('removes the studio url parameters when cancelling test changes', () => {
     launchStudio()
 
     cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
@@ -957,4 +970,41 @@ describe('studio functionality', () => {
 
     cy.location().its('hash').and('not.contain', 'testId=').and('not.contain', 'studio=')
   })
+
+  it('removes the studio url parameters when cancelling a new test', () => {
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
+
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
+
+    cy.get('a').contains('Cancel').click()
+
+    cy.location().its('hash').and('not.contain', 'suiteId=').and('not.contain', 'studio=')
+  })
+
+  it('does not remove the studio url parameters if saving fails', () => {
+    launchStudio({ cliArgs: ['--config', 'watchForFileChanges=false'] })
+
+    incrementCounter(0)
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+
+    // update the spec on the file system by changing the
+    // test name which will cause the save to fail since
+    // the test won't be found
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
+describe('studio functionality', () => {
+  it('CHANGED - visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+
+    // new command
+    cy.get('h1').should('have.text', 'Hello, Studio!')
+  })
+})`)
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.location().its('hash').should('contain', 'testId=r3').and('contain', 'studio=')
+  })
 })
diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index d70c16cd04a6..eed4ba977485 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -315,6 +315,8 @@ export class EventManager {
       this.ws.emit('studio:save', saveInfo, (err) => {
         if (err) {
           this.reporterBus.emit('test:set:state', this.studioStore.saveError(err), noop)
+        } else {
+          this.studioStore.saveSuccess()
         }
       })
     })
diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
index dea928f1ede2..bc42aeff1bee 100644
--- a/packages/app/src/store/studio-store.ts
+++ b/packages/app/src/store/studio-store.ts
@@ -282,9 +282,6 @@ export const useStudioStore = defineStore('studioRecorder', {
 
     save (testName?: string) {
       this.closeSaveModal()
-      this.stop()
-      // TODO: what happens if the save fails?
-      this._removeUrlParams()
 
       assertNonNullish(this.absoluteFile, `absoluteFile should exist`)
 
@@ -424,6 +421,11 @@ export const useStudioStore = defineStore('studioRecorder', {
       this._closeAssertionsMenu()
     },
 
+    saveSuccess () {
+      this.stop()
+      this._removeUrlParams()
+    },
+
     saveError (err: Error) {
       return {
         id: this.testId,

From c9055dbc4149e4fa196841441eb5469408282127 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 28 Feb 2025 19:42:50 -0700
Subject: [PATCH 05/14] updating changelog

---
 cli/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index e48c8958e728..d6631e609d5a 100644
--- a/cli/CHANGELOG.md
+++ b/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).

From 8367e9117e8f6f716e414c6d2c4622c17e702249 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Tue, 4 Mar 2025 09:20:16 -0700
Subject: [PATCH 06/14] skip adding visit log during start

---
 packages/app/cypress/e2e/studio/studio.cy.ts | 14 +++++++++-----
 packages/app/src/store/studio-store.ts       | 18 ++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index 490c50735c6b..1ad877799528 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -643,8 +643,7 @@ cy.get('#increment').click();
 /* ==== End Cypress Studio ==== */`)
   })
 
-  // TODO: when reloading, we incorrectly go to the spec page of the /app project instead of the /experimental-studio project
-  it.skip('removes pending commands if the page is reloaded', () => {
+  it('removes pending commands if the page is reloaded', () => {
     launchStudio()
 
     incrementCounter(0)
@@ -658,7 +657,13 @@ cy.get('#increment').click();
       cy.get('.command-name-click').should('contain.text', 'click')
     })
 
-    cy.reload()
+    cy.window().then((win) => {
+      // calling cy.reload() or win.location.reload() confuses the test runner
+      // and causes it to go to the spec list of the main runner instead of reloading the inner runner,
+      // so we need to navigate to the same url to trigger a reload
+      // eslint-disable-next-line no-self-assign
+      win.location.href = win.location.href
+    })
 
     cy.waitForSpecToFinish()
 
@@ -695,8 +700,7 @@ cy.get('#increment').click();
       cy.get('.studio-prompt').should('contain.text', 'Interact with your site to add test commands. Right click to add assertions.')
     })
 
-    // TODO: the Save button should be disabled but it is incorrectly enabled
-    cy.findByTestId('studio-toolbar-controls').findByTestId('save').should('be.enabled')
+    cy.findByTestId('studio-toolbar-controls').findByTestId('save').should('be.disabled')
   })
 
   it('does not re-enter studio mode when changing pages and then coming back', () => {
diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
index bc42aeff1bee..ca2d3fc4a2ef 100644
--- a/packages/app/src/store/studio-store.ts
+++ b/packages/app/src/store/studio-store.ts
@@ -237,7 +237,7 @@ export const useStudioStore = defineStore('studioRecorder', {
       const autStore = useAutStore()
 
       if (this.url) {
-        this.visitUrl()
+        this.visitUrl(this.url, { log: false })
       }
 
       if (!this.url && autStore.url) {
@@ -298,17 +298,19 @@ export const useStudioStore = defineStore('studioRecorder', {
       getEventManager().emit('studio:save', payload)
     },
 
-    visitUrl (url?: string) {
+    visitUrl (url?: string, { log = true } = {}) {
       this.setUrl(url ?? this.url)
 
       getCypress().cy.visit(this.url)
 
-      this.logs.push({
-        id: this._getId(),
-        selector: undefined,
-        name: 'visit',
-        message: this.url,
-      })
+      if (log) {
+        this.logs.push({
+          id: this._getId(),
+          selector: undefined,
+          name: 'visit',
+          message: this.url,
+        })
+      }
     },
 
     _recordEvent (event) {

From cf8f58ed0eda2b86c0c92218860c32a71177b7ad Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Tue, 4 Mar 2025 15:54:24 -0700
Subject: [PATCH 07/14] update url support

---
 packages/app/src/store/studio-store.ts | 62 +++++++++++++++++---------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
index ca2d3fc4a2ef..8ddf8cbbae22 100644
--- a/packages/app/src/store/studio-store.ts
+++ b/packages/app/src/store/studio-store.ts
@@ -108,6 +108,7 @@ interface StudioRecorderState {
   testId?: string
   suiteId?: string
   url?: string
+  _initialUrl?: string
 
   fileDetails?: FileDetails
   absoluteFile?: string
@@ -138,13 +139,13 @@ export const useStudioStore = defineStore('studioRecorder', {
   actions: {
     setTestId (testId: string) {
       this.testId = testId
-      this._updateUrlParams()
+      this._updateUrlParams(['testId', 'suiteId'])
     },
 
     setSuiteId (suiteId: string) {
       this.suiteId = suiteId
       this.testId = undefined
-      this._updateUrlParams()
+      this._updateUrlParams(['testId', 'suiteId'])
     },
 
     clearRunnableIds () {
@@ -195,6 +196,10 @@ export const useStudioStore = defineStore('studioRecorder', {
         this.setSuiteId(studio.suiteId)
       }
 
+      if (studio.url) {
+        this._initialUrl = studio.url
+      }
+
       if (this.testId || this.suiteId) {
         this.setAbsoluteFile(config.spec.absolute)
         this.startLoading()
@@ -236,8 +241,8 @@ export const useStudioStore = defineStore('studioRecorder', {
 
       const autStore = useAutStore()
 
-      if (this.url) {
-        this.visitUrl(this.url, { log: false })
+      if (this._initialUrl || this.url) {
+        this.visitUrl(this._initialUrl)
       }
 
       if (!this.url && autStore.url) {
@@ -270,6 +275,7 @@ export const useStudioStore = defineStore('studioRecorder', {
       this.reset()
       this.clearRunnableIds()
       this._removeUrlParams()
+      this._initialUrl = undefined
     },
 
     startSave () {
@@ -298,12 +304,21 @@ export const useStudioStore = defineStore('studioRecorder', {
       getEventManager().emit('studio:save', payload)
     },
 
-    visitUrl (url?: string, { log = true } = {}) {
+    visitUrl (url?: string) {
       this.setUrl(url ?? this.url)
 
-      getCypress().cy.visit(this.url)
+      // if we're visiting a new url, update the visit url param
+      if (url) {
+        this._updateUrlParams(['url'])
+      }
+
+      getCypress().cy.visit(this.url).then(() => {
+        // after visiting a new url, remove the visit url param since it shouldn't be needed anymore
+        this._removeUrlParams(['url'])
+      })
 
-      if (log) {
+      // if we're visiting a new url, add the visit log
+      if (url) {
         this.logs.push({
           id: this._getId(),
           selector: undefined,
@@ -426,6 +441,7 @@ export const useStudioStore = defineStore('studioRecorder', {
     saveSuccess () {
       this.stop()
       this._removeUrlParams()
+      this._initialUrl = undefined
     },
 
     saveError (err: Error) {
@@ -549,32 +565,33 @@ export const useStudioStore = defineStore('studioRecorder', {
 
       const testId = hashParams.get('testId')
       const suiteId = hashParams.get('suiteId')
+      const visitUrl = hashParams.get('url')
 
-      return { testId, suiteId }
+      return { testId, suiteId, url: visitUrl }
     },
 
-    _updateUrlParams () {
+    _updateUrlParams (filter: string[] = ['testId', 'suiteId', 'url']) {
       // if we don't have studio params, we don't need to update them
-      if (!this.testId && !this.suiteId) return
-
-      // if we have studio params, we need to remove them before adding them back
-      this._removeUrlParams()
+      if (!this.testId && !this.suiteId && !this.url) return
 
       const url = new URL(window.location.href)
       const hashParams = new URLSearchParams(url.hash)
 
+      // if we have studio params, we need to remove them before adding them back
+      this._removeUrlParams(filter)
+
       // set the studio params
       hashParams.set('studio', '')
-      if (this.testId) hashParams.set('testId', this.testId)
-
-      if (this.suiteId) hashParams.set('suiteId', this.suiteId)
+      filter.forEach((param) => {
+        if (this[param]) hashParams.set(param, this[param])
+      })
 
       // update the url
       url.hash = decodeURIComponent(hashParams.toString())
       window.history.replaceState({}, '', url.toString())
     },
 
-    _removeUrlParams () {
+    _removeUrlParams (filter: string[] = ['testId', 'suiteId', 'url']) {
       const url = new URL(window.location.href)
       const hashParams = new URLSearchParams(url.hash)
 
@@ -582,9 +599,14 @@ export const useStudioStore = defineStore('studioRecorder', {
       if (!hashParams.has('studio')) return
 
       // remove the studio params
-      hashParams.delete('studio')
-      hashParams.delete('testId')
-      hashParams.delete('suiteId')
+      filter.forEach((param) => {
+        hashParams.delete(param)
+      })
+
+      // if the filter includes all the items, we can also remove the studio param
+      if (filter.length === 3) {
+        hashParams.delete('studio')
+      }
 
       // update the url
       url.hash = decodeURIComponent(hashParams.toString())

From ff84aa6d409ab260ce22b150b3a4ae1ca82a780c Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Thu, 6 Mar 2025 17:46:49 -0700
Subject: [PATCH 08/14] cy origin tests

---
 packages/app/cypress.config.ts                |   4 +
 packages/app/cypress/e2e/studio/studio.cy.ts  | 184 ++++++++++++++++++
 packages/app/src/runner/event-manager.ts      |  14 +-
 packages/app/src/runner/index.ts              |   7 -
 packages/driver/src/cypress/script_utils.ts   |   4 +-
 packages/server/lib/routes.ts                 |   8 +-
 packages/server/lib/server-base.ts            |  10 +
 .../cypress/e2e/spec.cy.js                    |  10 +
 8 files changed, 220 insertions(+), 21 deletions(-)

diff --git a/packages/app/cypress.config.ts b/packages/app/cypress.config.ts
index 8b0331d040f6..ca9991e0a18c 100644
--- a/packages/app/cypress.config.ts
+++ b/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) {
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index 1ad877799528..2d25cfdf3180 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -55,6 +55,16 @@ describe('Cypress Studio', () => {
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
     /* ==== Generated with Cypress Studio ==== */
@@ -117,6 +127,16 @@ describe('studio functionality', () => {
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
     /* ==== Generated with Cypress Studio ==== */
@@ -224,6 +244,16 @@ describe('studio functionality', () => {
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
     /* ==== Generated with Cypress Studio ==== */
@@ -274,6 +304,16 @@ describe('studio functionality', () => {
       // No change, since we cancelled.
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -317,6 +357,16 @@ describe('studio functionality', () => {
       // No change, since we closed studio
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -359,6 +409,16 @@ describe('studio functionality', () => {
       // No change, since we cancelled.
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -464,6 +524,16 @@ it('new-test', function() {
 
       expect(spec.trim().replace(/\r/g, '')).to.equal(`
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -479,6 +549,80 @@ describe('studio functionality', () => {
     })
   })
 
+  it('creates a new test with a url that changes top', () => {
+    launchStudio({ createNewTest: true })
+
+    cy.origin('http://foobar.com:4455', () => {
+      Cypress.require('../support/execute-spec')
+      Cypress.require('cypress-real-events/support')
+      Cypress.require('@packages/frontend-shared/cypress/support/e2e')
+    })
+
+    cy.findByTestId('aut-url').as('urlPrompt')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').should('be.disabled')
+    })
+
+    // go to a cross-origin url
+    cy.get('@urlPrompt').type('http://foobar.com:4455/cypress/e2e/index.html')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').click()
+    })
+
+    cy.origin('http://foobar.com:4455', () => {
+      cy.get('button').contains('Save Commands').click()
+
+      // the save button is disabled until we add a test name
+      cy.get('button[type=submit]').should('be.disabled')
+
+      cy.get('#testName').type('new-test')
+
+      cy.get('button[type=submit]').click()
+
+      // Cypress re-runs after the new test is saved.
+      cy.waitForSpecToFinish({ passCount: 2 })
+
+      cy.contains('new-test').click()
+      cy.get('.command').should('have.length', 1)
+      cy.get('.command-name-visit').within(() => {
+        cy.contains('visit')
+        cy.contains('cypress/e2e/index.html')
+      })
+
+      cy.findByTestId('hook-name-studio commands').should('not.exist')
+    })
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.equal(`
+describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
+
+  /* ==== Test Created with Cypress Studio ==== */
+  it('new-test', function() {
+    /* ==== Generated with Cypress Studio ==== */
+    cy.visit('http://foobar.com:4455/cypress/e2e/index.html');
+    /* ==== End Cypress Studio ==== */
+  });
+})`.trim())
+    })
+  })
+
   it('creates a new test for an existing spec with the url already defined', () => {
     launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
 
@@ -739,6 +883,16 @@ cy.get('#increment').click();
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
@@ -812,6 +966,16 @@ describe('studio functionality', () => {
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
@@ -873,6 +1037,16 @@ describe('studio functionality', () => {
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('CHANGED - visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
@@ -998,6 +1172,16 @@ describe('studio functionality', () => {
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('CHANGED - visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index eed4ba977485..3f8105fa92ec 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -768,14 +768,16 @@ export class EventManager {
      * This is also applicable when a user changes their spec file and hot reloads their spec, in which case we need to rebind onMessage
      * with the newly creates Cypress.primaryOriginCommunicator
      */
-    window?.top?.removeEventListener('message', crossOriginOnMessageRef, false)
-    crossOriginOnMessageRef = ({ data, source }) => {
-      Cypress?.primaryOriginCommunicator.onMessage({ data, source })
+    if (!Cypress.env('INTERNAL_E2E_TESTING_SELF')) {
+      window.top.removeEventListener('message', crossOriginOnMessageRef, false)
+      crossOriginOnMessageRef = ({ data, source }) => {
+        Cypress?.primaryOriginCommunicator.onMessage({ data, source })
 
-      return undefined
-    }
+        return undefined
+      }
 
-    window.top.addEventListener('message', crossOriginOnMessageRef, false)
+      window.top.addEventListener('message', crossOriginOnMessageRef, false)
+    }
   }
 
   _runDriver (runState: RunState, testState: CachedTestState) {
diff --git a/packages/app/src/runner/index.ts b/packages/app/src/runner/index.ts
index d8c6cdd2768f..3df4950325f7 100644
--- a/packages/app/src/runner/index.ts
+++ b/packages/app/src/runner/index.ts
@@ -318,13 +318,6 @@ async function runSpecE2E (config, spec: SpecFile) {
     specSrc: encodeURIComponent(spec.relative),
   })
 
-  // FIXME: BILL Determine where to call client with to force browser repaint
-  /**
-   * call the clientWidth to force the browser to repaint for viewport changes
-   * otherwise firefox may fail when changing the viewport in between origins
-   * this.refs.container.clientWidth
-   */
-
   // append to document, so the iframe will execute the spec
   addIframe({
     $container,
diff --git a/packages/driver/src/cypress/script_utils.ts b/packages/driver/src/cypress/script_utils.ts
index e624b0fa0f2d..ca1d58d9eb3d 100644
--- a/packages/driver/src/cypress/script_utils.ts
+++ b/packages/driver/src/cypress/script_utils.ts
@@ -11,7 +11,9 @@ const fetchScript = (scriptWindow, script) => {
 }
 
 const extractSourceMap = ([script, contents]) => {
-  script.fullyQualifiedUrl = `${window.top!.location.origin}${script.relativeUrl}`.replace(/ /g, '%20')
+  if (!Cypress.env('INTERNAL_E2E_TESTING_SELF')) {
+    script.fullyQualifiedUrl = `${window.top!.location.origin}${script.relativeUrl}`.replace(/ /g, '%20')
+  }
 
   const sourceMap = $sourceMapUtils.extractSourceMap(contents)
 
diff --git a/packages/server/lib/routes.ts b/packages/server/lib/routes.ts
index bcfee3db7f24..3a5c28494e61 100644
--- a/packages/server/lib/routes.ts
+++ b/packages/server/lib/routes.ts
@@ -171,13 +171,7 @@ export const createCommonRoutes = ({
     res.sendFile(file, { etag: false })
   })
 
-  // TODO: The below route is not technically correct for cypress in cypress tests.
-  // We should be using 'config.namespace' to provide the namespace instead of hard coding __cypress, however,
-  // In the runner when we create the spec bridge we have no knowledge of the namespace used by the server so
-  // we create a spec bridge for the namespace of the server specified in the config, but that server hasn't been created.
-  // To fix this I think we need to find a way to listen in the cypress in cypress server for routes from the server the
-  // cypress instance thinks should exist, but that's outside the current scope.
-  router.get('/__cypress/spec-bridge-iframes', async (req, res) => {
+  router.get(`/${config.namespace}/spec-bridge-iframes`, async (req, res) => {
     debug('handling cross-origin iframe for domain: %s', req.hostname)
 
     // Chrome plans to make document.domain immutable in Chrome 109, with the default value
diff --git a/packages/server/lib/server-base.ts b/packages/server/lib/server-base.ts
index 794f28e7002b..c5cefead7ad9 100644
--- a/packages/server/lib/server-base.ts
+++ b/packages/server/lib/server-base.ts
@@ -87,6 +87,16 @@ const _forceProxyMiddleware = function (clientRoute, namespace = '__cypress') {
   return function (req, res, next) {
     const trimmedUrl = _.trimEnd(req.proxiedUrl, '/')
 
+    // if this request is a non-proxied cy-in-cy request,
+    // we need to update the proxiedUrl and allow it to pass through
+    if (process.env.CYPRESS_INTERNAL_E2E_TESTING_SELF && _isNonProxiedRequest(req)) {
+      const referrerUrl = new URL(req.headers.referer)
+
+      req.proxiedUrl = `${referrerUrl.origin}${req.proxiedUrl}`
+
+      return next()
+    }
+
     if (_isNonProxiedRequest(req) && !ALLOWED_PROXY_BYPASS_URLS.includes(trimmedUrl) && (trimmedUrl !== trimmedClientRoute)) {
       // this request is non-proxied and non-allowed, redirect to the runner error page
       return res.redirect(clientRoute)
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
index d770ab93d996..772c6c13087a 100644
--- a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
+++ b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
@@ -1,4 +1,14 @@
 describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })

From db18d3b0c6f8ff69f962670a28a8457a38ae1c39 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 7 Mar 2025 16:07:21 -0700
Subject: [PATCH 09/14] fix tests

---
 packages/app/src/runner/event-manager.ts    | 2 ++
 packages/driver/src/cypress/script_utils.ts | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index 3f8105fa92ec..c7f4a50f873e 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -767,6 +767,8 @@ export class EventManager {
      *
      * This is also applicable when a user changes their spec file and hot reloads their spec, in which case we need to rebind onMessage
      * with the newly creates Cypress.primaryOriginCommunicator
+     *
+     * (Skip for the inner Cypress in cy-in-cy tests since it's possible for window.top to be cross-origin)
      */
     if (!Cypress.env('INTERNAL_E2E_TESTING_SELF')) {
       window.top.removeEventListener('message', crossOriginOnMessageRef, false)
diff --git a/packages/driver/src/cypress/script_utils.ts b/packages/driver/src/cypress/script_utils.ts
index ca1d58d9eb3d..620b617554b1 100644
--- a/packages/driver/src/cypress/script_utils.ts
+++ b/packages/driver/src/cypress/script_utils.ts
@@ -11,8 +11,11 @@ const fetchScript = (scriptWindow, script) => {
 }
 
 const extractSourceMap = ([script, contents]) => {
-  if (!Cypress.env('INTERNAL_E2E_TESTING_SELF')) {
+  try {
     script.fullyQualifiedUrl = `${window.top!.location.origin}${script.relativeUrl}`.replace(/ /g, '%20')
+  } catch (error) {
+    // if we can't get the fullyQualifiedUrl, we can't consume source maps, but it shouldn't block Cypress
+    // this can happen in cy-in-cy tests, where the top window is not accessible due to cross-origin restrictions
   }
 
   const sourceMap = $sourceMapUtils.extractSourceMap(contents)

From 16217b9ebb818c97eab8ad27fe8c600067acac45 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 7 Mar 2025 17:00:30 -0700
Subject: [PATCH 10/14] updates

---
 packages/app/src/runner/event-manager.ts    | 10 +++--
 packages/driver/src/cy/snapshots_css.ts     | 46 ++++++++++-----------
 packages/driver/src/cypress/script_utils.ts |  7 +++-
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index c7f4a50f873e..ebdf3d26cff5 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -767,10 +767,8 @@ export class EventManager {
      *
      * This is also applicable when a user changes their spec file and hot reloads their spec, in which case we need to rebind onMessage
      * with the newly creates Cypress.primaryOriginCommunicator
-     *
-     * (Skip for the inner Cypress in cy-in-cy tests since it's possible for window.top to be cross-origin)
      */
-    if (!Cypress.env('INTERNAL_E2E_TESTING_SELF')) {
+    try {
       window.top.removeEventListener('message', crossOriginOnMessageRef, false)
       crossOriginOnMessageRef = ({ data, source }) => {
         Cypress?.primaryOriginCommunicator.onMessage({ data, source })
@@ -779,6 +777,12 @@ export class EventManager {
       }
 
       window.top.addEventListener('message', crossOriginOnMessageRef, false)
+    } catch (error) {
+      // in cy-in-cy tests, window.top may not be accessible due to cross-origin restrictions
+      if (error.name !== 'SecurityError') {
+        // re-throw any error that's not a cross-origin error
+        throw error
+      }
     }
   }
 
diff --git a/packages/driver/src/cy/snapshots_css.ts b/packages/driver/src/cy/snapshots_css.ts
index 0115c668cdde..afc2d1bc4cd3 100644
--- a/packages/driver/src/cy/snapshots_css.ts
+++ b/packages/driver/src/cy/snapshots_css.ts
@@ -33,8 +33,8 @@ const makePathsAbsoluteToDoc = $utils.memoize((styles, doc) => {
   if (!_.isString(styles)) return styles
 
   return styles.replace(anyUrlInCssRe, (_1, _2, filePath) => {
-    //// the href getter will always resolve an absolute path taking into
-    //// account things like the current URL and the <base> tag
+    // the href getter will always resolve an absolute path taking into
+    // account things like the current URL and the <base> tag
     const a = doc.createElement('a')
 
     a.href = filePath
@@ -59,9 +59,9 @@ const makePathsAbsoluteToStylesheet = $utils.memoize((styles, href) => {
 }, makePathsAbsoluteToStylesheetCache)
 
 const getExternalCssContents = (href, stylesheet) => {
-  //// some browsers may throw a SecurityError if the stylesheet is cross-origin
-  //// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet#Notes
-  //// for others, it will just be null
+  // some browsers may throw a SecurityError if the stylesheet is cross-origin
+  // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet#Notes
+  // for others, it will just be null
   try {
     const rules = stylesheet.rules || stylesheet.cssRules
 
@@ -96,14 +96,14 @@ export const create = ($$, state) => {
   const cssHrefToModifiedMap = new LimitedMap()
   let newWindow = false
 
-  //// we invalidate the cache when css is modified by javascript
+  // we invalidate the cache when css is modified by javascript
   const onCssModified = (href) => {
     cssHrefToModifiedMap.set(href, { modified: true })
   }
 
-  //// the lifecycle of a stylesheet is the lifecycle of the window
-  //// so track this to know when to re-evaluate the cache in case
-  //// of css being modified by javascript
+  // the lifecycle of a stylesheet is the lifecycle of the window
+  // so track this to know when to re-evaluate the cache in case
+  // of css being modified by javascript
   const onBeforeWindowLoad = () => {
     newWindow = true
   }
@@ -112,8 +112,8 @@ export const create = ($$, state) => {
     const hrefModified = cssHrefToModifiedMap.get(href) || {}
     const existing = cssHrefToIdMap.get(href)
 
-    //// if we've loaded a new window and the css was invalidated due to javascript
-    //// we need to re-evaluate since this time around javascript might not change the css
+    // if we've loaded a new window and the css was invalidated due to javascript
+    // we need to re-evaluate since this time around javascript might not change the css
     if (existing && !hrefModified.modified && !(newWindow && hrefModified.modifiedLast)) {
       return existing
     }
@@ -125,16 +125,16 @@ export const create = ($$, state) => {
     }
 
     const hashedCssContents = md5(cssContents)
-    //// if we already have these css contents stored, don't store them again
+    // if we already have these css contents stored, don't store them again
     const existingId = cssHashedContentsToIdMap.get(hashedCssContents)
 
-    //// id just needs to be a new object reference
-    //// we add the href for debuggability
+    // id just needs to be a new object reference
+    // we add the href for debuggability
     const id = existingId || { hrefId: href }
 
     cssHrefToIdMap.set(href, id)
 
-    //// if we already have these css contents stored, don't store them again
+    // if we already have these css contents stored, don't store them again
     if (!existingId) {
       cssHashedContentsToIdMap.set(hashedCssContents, id)
       cssIdToContentsMap.set(id, cssContents)
@@ -158,19 +158,19 @@ export const create = ($$, state) => {
     styles = _.filter(styles, isScreenStylesheet)
 
     return _.map(styles, (stylesheet) => {
-      //// in cases where we can get the CSS as a string, make the paths
-      //// absolute so that when they're restored by appending them to the page
-      //// in <style> tags, background images and fonts still properly load
+      // in cases where we can get the CSS as a string, make the paths
+      // absolute so that when they're restored by appending them to the page
+      // in <style> tags, background images and fonts still properly load
       const href = stylesheet.href
 
-      //// if there's an href, it's a link tag
-      //// return the CSS rules as a string, or, if cross-origin,
-      //// a reference to the stylesheet's href
+      // if there's an href, it's a link tag
+      // return the CSS rules as a string, or, if cross-origin,
+      // a reference to the stylesheet's href
       if (href) {
         return getStyleId(href, stylesheets[href]) || { href }
       }
 
-      //// otherwise, it's a style tag, and we can just grab its content
+      // otherwise, it's a style tag, and we can just grab its content
       const cssContents = getInlineCssContents(stylesheet, $$)
 
       return makePathsAbsoluteToDoc(cssContents, doc)
@@ -186,7 +186,7 @@ export const create = ($$, state) => {
       bodyStyleIds: getStyleIdsFor(doc, $$, stylesheets, 'body'),
     }
 
-    //// after getting the all the styles on the page, it's no longer a new window
+    // after getting the all the styles on the page, it's no longer a new window
     newWindow = false
 
     return styleIds
diff --git a/packages/driver/src/cypress/script_utils.ts b/packages/driver/src/cypress/script_utils.ts
index 620b617554b1..36b0c2323ba5 100644
--- a/packages/driver/src/cypress/script_utils.ts
+++ b/packages/driver/src/cypress/script_utils.ts
@@ -14,8 +14,11 @@ const extractSourceMap = ([script, contents]) => {
   try {
     script.fullyQualifiedUrl = `${window.top!.location.origin}${script.relativeUrl}`.replace(/ /g, '%20')
   } catch (error) {
-    // if we can't get the fullyQualifiedUrl, we can't consume source maps, but it shouldn't block Cypress
-    // this can happen in cy-in-cy tests, where the top window is not accessible due to cross-origin restrictions
+    // in cy-in-cy tests, window.top may not be accessible due to cross-origin restrictions
+    if (error.name !== 'SecurityError') {
+      // re-throw any error that's not a cross-origin error
+      throw error
+    }
   }
 
   const sourceMap = $sourceMapUtils.extractSourceMap(contents)

From 8d4354237920e2ee7301ab66c4aa25890310d520 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 7 Mar 2025 18:14:10 -0700
Subject: [PATCH 11/14] update origin test

---
 .../cypress/e2e/origin/simple_origin.cy.js                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/system-tests/projects/session-and-origin-e2e-specs/cypress/e2e/origin/simple_origin.cy.js b/system-tests/projects/session-and-origin-e2e-specs/cypress/e2e/origin/simple_origin.cy.js
index 5c75e36a2e69..795fbae5b85a 100644
--- a/system-tests/projects/session-and-origin-e2e-specs/cypress/e2e/origin/simple_origin.cy.js
+++ b/system-tests/projects/session-and-origin-e2e-specs/cypress/e2e/origin/simple_origin.cy.js
@@ -2,7 +2,7 @@
 // REPLACE THIS COMMENT FOR HOT RELOAD
 describe('simple origin', () => {
   it('passes', () => {
-    cy.origin('http://foobar:4455', () => {
+    cy.origin('http://foobar.com:4455', () => {
       cy.log('log me once')
       cy.log('log me twice')
     })

From c9558bd0b9417a4df841a6b2c9669f131ec6e020 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Sun, 9 Mar 2025 20:59:33 -0600
Subject: [PATCH 12/14] add a wait

---
 packages/app/cypress/e2e/studio/studio.cy.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index 2d25cfdf3180..72ebe53559b7 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -571,6 +571,9 @@ describe('studio functionality', () => {
       cy.contains('Continue ➜').click()
     })
 
+    // need to wait for top to reload
+    cy.wait(10000)
+
     cy.origin('http://foobar.com:4455', () => {
       cy.get('button').contains('Save Commands').click()
 

From 0fe192e1c0d40675a82f0f08f419a803f0bb4850 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Sun, 9 Mar 2025 21:38:53 -0600
Subject: [PATCH 13/14] update

---
 packages/errors/src/stackUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/errors/src/stackUtils.ts b/packages/errors/src/stackUtils.ts
index 4f4d5b0ab75e..e713d3cf442c 100644
--- a/packages/errors/src/stackUtils.ts
+++ b/packages/errors/src/stackUtils.ts
@@ -7,7 +7,7 @@ type MessageLines = [string[], string[]] & {messageEnded?: boolean}
 
 // returns tuple of [message, stack]
 export const splitStack = (stack: string) => {
-  const lines = stack.split('\n')
+  const lines = stack?.split('\n')
 
   return _.reduce(lines, (memo, line) => {
     if (memo.messageEnded || stackLineRegex.test(line)) {

From b37b374fc2f35a5e06cd3d073e4009e681cb5abe Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Mon, 10 Mar 2025 18:03:41 -0600
Subject: [PATCH 14/14] pr updates

---
 packages/app/cypress/e2e/studio/helper.ts     |   4 +-
 packages/app/cypress/e2e/studio/studio.cy.ts  | 121 +-----------------
 .../cypress/e2e/spec-w-foobar.cy.js           |  15 +++
 .../cypress/e2e/spec.cy.js                    |  10 --
 4 files changed, 23 insertions(+), 127 deletions(-)
 create mode 100644 system-tests/projects/experimental-studio/cypress/e2e/spec-w-foobar.cy.js

diff --git a/packages/app/cypress/e2e/studio/helper.ts b/packages/app/cypress/e2e/studio/helper.ts
index 52d006bd2321..c8166b71ebb7 100644
--- a/packages/app/cypress/e2e/studio/helper.ts
+++ b/packages/app/cypress/e2e/studio/helper.ts
@@ -28,7 +28,9 @@ export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false,
   // Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
   cy.waitForSpecToFinish()
 
-  if (!createNewTest) {
+  if (createNewTest) {
+    cy.get('span.runnable-title').contains('New Test').should('exist')
+  } else {
     cy.get('[data-cy="hook-name-studio commands"]').should('exist')
   }
 }
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
index 72ebe53559b7..6d94395124d9 100644
--- a/packages/app/cypress/e2e/studio/studio.cy.ts
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -55,16 +55,6 @@ describe('Cypress Studio', () => {
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
     /* ==== Generated with Cypress Studio ==== */
@@ -127,16 +117,6 @@ describe('studio functionality', () => {
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
     /* ==== Generated with Cypress Studio ==== */
@@ -244,16 +224,6 @@ describe('studio functionality', () => {
 
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
     /* ==== Generated with Cypress Studio ==== */
@@ -304,16 +274,6 @@ describe('studio functionality', () => {
       // No change, since we cancelled.
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -357,16 +317,6 @@ describe('studio functionality', () => {
       // No change, since we closed studio
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -409,16 +359,6 @@ describe('studio functionality', () => {
       // No change, since we cancelled.
       expect(spec.trim().replace(/\r/g, '')).to.eq(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -524,16 +464,6 @@ it('new-test', function() {
 
       expect(spec.trim().replace(/\r/g, '')).to.equal(`
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })
@@ -549,8 +479,10 @@ describe('studio functionality', () => {
     })
   })
 
-  it('creates a new test with a url that changes top', () => {
-    launchStudio({ createNewTest: true })
+  // TODO: this test fails in CI but passes locally
+  // http://github.com/cypress-io/cypress/issues/31248
+  it.skip('creates a new test with a url that changes top', function () {
+    launchStudio({ specName: 'spec-w-foobar.cy.js', createNewTest: true })
 
     cy.origin('http://foobar.com:4455', () => {
       Cypress.require('../support/execute-spec')
@@ -571,9 +503,6 @@ describe('studio functionality', () => {
       cy.contains('Continue ➜').click()
     })
 
-    // need to wait for top to reload
-    cy.wait(10000)
-
     cy.origin('http://foobar.com:4455', () => {
       cy.get('button').contains('Save Commands').click()
 
@@ -598,7 +527,7 @@ describe('studio functionality', () => {
     })
 
     cy.withCtx(async (ctx) => {
-      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec-w-foobar.cy.js')
 
       expect(spec.trim().replace(/\r/g, '')).to.equal(`
 describe('studio functionality', () => {
@@ -886,16 +815,6 @@ cy.get('#increment').click();
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
@@ -969,16 +888,6 @@ describe('studio functionality', () => {
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
@@ -1040,16 +949,6 @@ describe('studio functionality', () => {
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('CHANGED - visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
@@ -1175,16 +1074,6 @@ describe('studio functionality', () => {
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject('cypress/e2e/spec.cy.js', `
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('CHANGED - visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
 
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec-w-foobar.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec-w-foobar.cy.js
new file mode 100644
index 000000000000..772c6c13087a
--- /dev/null
+++ b/system-tests/projects/experimental-studio/cypress/e2e/spec-w-foobar.cy.js
@@ -0,0 +1,15 @@
+describe('studio functionality', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
+      statusCode: 200,
+      body: '<html><body><h1>hello world</h1></body></html>',
+      headers: {
+        'content-type': 'text/html',
+      },
+    })
+  })
+
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/index.html')
+  })
+})
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
index 772c6c13087a..d770ab93d996 100644
--- a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
+++ b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
@@ -1,14 +1,4 @@
 describe('studio functionality', () => {
-  beforeEach(() => {
-    cy.intercept('GET', 'http://foobar.com:4455/cypress/e2e/index.html', {
-      statusCode: 200,
-      body: '<html><body><h1>hello world</h1></body></html>',
-      headers: {
-        'content-type': 'text/html',
-      },
-    })
-  })
-
   it('visits a basic html page', () => {
     cy.visit('cypress/e2e/index.html')
   })