Merge branch 'develop' into issue-33162

Author: nnyouung

cli/CHANGELOG.md

@@ -26,6 +26,9 @@ _Released 01/27/2026 (PENDING)_
 - Upgraded `shell-env` to `4.0.1` and `@cypress/commit-info` to `2.2.2`. This removes the [GMS-2020-2](https://gitlab.com/gitlab-org/security-products/gemnasium-db/-/blob/master/npm/execa/GMS-2020-2.yml) vulnerability being reported in security scans. Addressed in [#33226](https://github.com/cypress-io/cypress/pull/33226) and [#33263](https://github.com/cypress-io/cypress/pull/33263).
 - Upgraded `lodash` to `4.17.23`. This removes the [CVE-2025-13465](https://github.com/advisories/GHSA-xxjr-mmjv-4gpg) vulnerability being reported in security scans. Addresses [#33269](https://github.com/cypress-io/cypress/issues/33269).
 
+**Bugfixes:**
+
+- Fixed an issue where the user did not always have the ability to create a new test in Studio. Also, fixed an issue where creating a new test from an empty spec would display the welcome to studio screen instead of the form to name the new test. Addressed in [#33236](https://github.com/cypress-io/cypress/pull/33236).
 
 ## 15.9.0
 

package.json

@@ -270,7 +270,7 @@
     "@definitelytyped/typescript-versions": "0.1.9",
     "@types/react": "18.3.12",
     "browserify-sign": "4.2.5",
-    "devtools-protocol": "0.0.1568893",
+    "devtools-protocol": "0.0.1573491",
     "node-abi": "4.9.0",
     "vue-template-compiler": "2.6.12",
     "yargs-unparser": "1.6.4"

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

@@ -14,6 +14,12 @@ export function loadProjectAndRunSpec ({ projectName = 'experimental-studio' as
   cy.waitForSpecToFinish()
 }
 
+export function openNewTestFromSpecHeader () {
+  cy.get('[data-cy="runnable-options-button"]').click()
+  cy.get('[data-cy="more-options-runnable-popover"]').should('be.visible')
+  cy.get('[data-cy="runnable-popover-new-test"]').click()
+}
+
 export function launchStudio ({ specName = 'spec.cy.js', createNewTestFromSuite = false, createNewTestFromSpecHeader = false, cliArgs = [''] } = {}) {
   loadProjectAndRunSpec({ specName, cliArgs })
 
@@ -30,9 +36,7 @@ export function launchStudio ({ specName = 'spec.cy.js', createNewTestFromSuite
 
   if (createNewTestFromSuite || createNewTestFromSpecHeader) {
     if (createNewTestFromSpecHeader) {
-      cy.get('[data-cy="runnable-options-button"]').click()
-      cy.get('[data-cy="more-options-runnable-popover"]').should('be.visible')
-      cy.get('[data-cy="runnable-popover-new-test"]').click()
+      openNewTestFromSpecHeader()
     } else {
       cy.get('@runnable-wrapper').realHover()
       cy.findByTestId('create-new-test-from-suite').click()
@@ -55,12 +59,7 @@ export function launchStudio ({ specName = 'spec.cy.js', createNewTestFromSuite
   }
 }
 
-export function inputNewTestName ({ name = 'new-test', creatingNewTestFromWelcomeScreen = true }: { name?: string, creatingNewTestFromWelcomeScreen?: boolean } = {}) {
-  if (creatingNewTestFromWelcomeScreen) {
-    // we only need to click the new test button if we are not creating a new test from a suite or spec header
-    cy.findByTestId('new-test-button').click()
-  }
-
+export function inputNewTestName ({ name = 'new-test' }: { name?: string } = {}) {
   cy.findByTestId('test-name-input').type(name)
   cy.findByTestId('create-test-button').click()
 

packages/app/cypress/e2e/studio/studio-navigation.cy.ts

@@ -1,4 +1,4 @@
-import { launchStudio, loadProjectAndRunSpec, incrementCounter, inputNewTestName } from './helper'
+import { launchStudio, loadProjectAndRunSpec, incrementCounter, inputNewTestName, openNewTestFromSpecHeader } from './helper'
 
 describe('Cypress Studio - Navigation and URL Management', () => {
   it('does not re-enter studio mode when changing pages and then coming back', () => {
@@ -43,7 +43,7 @@ describe('Cypress Studio - Navigation and URL Management', () => {
   it('updates the AUT url when creating a new test', () => {
     launchStudio({ specName: 'navigation.cy.js', createNewTestFromSuite: true })
 
-    inputNewTestName({ creatingNewTestFromWelcomeScreen: false })
+    inputNewTestName()
 
     cy.findByTestId('aut-url-input').should('have.focus').type('cypress/e2e/navigation.html{enter}')
 
@@ -73,26 +73,43 @@ describe('Cypress Studio - Navigation and URL Management', () => {
   it('update the url with the suiteId and studio parameters when entering studio with a suite', () => {
     launchStudio({ createNewTestFromSuite: true })
 
-    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=').and('contain', 'sessionId=')
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=').and('contain', 'sessionId=').and('contain', 'entrySource=new-test-suite')
+  })
+
+  it('removes entrySource parameter when going to a different page', () => {
+    launchStudio({ createNewTestFromSuite: true })
+
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=').and('contain', 'entrySource=new-test-suite')
+
+    // go to the runs page
+    cy.findByTestId('sidebar-link-runs-page').click()
+
+    cy.location().its('hash').should('contain', '/runs').and('not.contain', 'testId=').and('not.contain', 'studio=').and('not.contain', 'entrySource=')
   })
 
-  // TODO: unskip with https://github.com/cypress-io/cypress/pull/33236
-  it.skip('updates the studio url parameters and displays the single test view after creating a new test', () => {
+  it('updates the studio url parameters and displays the single test view after creating a new test', () => {
     loadProjectAndRunSpec()
 
-    // open the studio panel to create a new test in the root suite
-    cy.findByTestId('studio-button').click()
-    cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=').and('contain', 'sessionId=')
+    // open the spec header to create a new test in the root suite
+    openNewTestFromSpecHeader()
+    cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=').and('contain', 'sessionId=').and('contain', 'entrySource=new-test-root')
 
     // create a new test in the root suite
     inputNewTestName()
 
     // the studio url parameters should be removed
-    cy.location().its('hash').and('not.contain', 'suiteId=').and('contain', 'studio=').and('contain', 'testId=r2')
+    cy.location().its('hash').and('not.contain', 'suiteId=').and('contain', 'studio=').and('contain', 'testId=r2').and('not.contain', 'entrySource=')
 
     cy.get('.studio-single-test-container').should('be.visible')
 
     cy.percySnapshot()
+
+    // after reloading, it should still display the single test view
+    cy.reload()
+
+    // the studio url parameters should be removed
+    cy.location().its('hash').and('not.contain', 'suiteId=').and('contain', 'studio=').and('contain', 'testId=r2').and('not.contain', 'entrySource=')
+    cy.get('.studio-single-test-container').should('be.visible')
   })
 
   it('does not remove the studio url parameters when saving test changes', () => {
@@ -188,10 +205,10 @@ describe('studio functionality', () => {
   it('removes the studio url parameters when closing studio new test', () => {
     launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSuite: true })
 
-    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=').and('contain', 'entrySource=new-test-suite')
 
     cy.findByTestId('studio-header-studio-button').click()
 
-    cy.location().its('hash').and('not.contain', 'suiteId=').and('not.contain', 'studio=')
+    cy.location().its('hash').and('not.contain', 'suiteId=').and('not.contain', 'studio=').and('not.contain', 'entrySource=')
   })
 })

packages/app/cypress/e2e/studio/studio-new-tests.cy.ts

@@ -1,4 +1,4 @@
-import { launchStudio, loadProjectAndRunSpec, incrementCounter, inputNewTestName } from './helper'
+import { launchStudio, loadProjectAndRunSpec, incrementCounter, inputNewTestName, openNewTestFromSpecHeader } from './helper'
 
 describe('Cypress Studio - New Test Creation', () => {
   it('does not enter single test mode when creating a new test', () => {
@@ -15,7 +15,7 @@ describe('Cypress Studio - New Test Creation', () => {
   it('creates a new test from spec header', () => {
     launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSpecHeader: true })
 
-    inputNewTestName({ creatingNewTestFromWelcomeScreen: false })
+    inputNewTestName()
 
     cy.contains('new-test').click()
 
@@ -128,7 +128,7 @@ describe('studio functionality', () => {
   it('creates a new test for a specific suite with the url already defined', () => {
     launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSuite: true })
 
-    inputNewTestName({ creatingNewTestFromWelcomeScreen: false })
+    inputNewTestName()
 
     // make sure that the visit has run and we're recording studio commands
     cy.get('[data-cy="record-button-recording"]').should('be.visible')
@@ -160,10 +160,41 @@ describe('studio functionality', () => {
     })
   })
 
-  // TODO: unskip with https://github.com/cypress-io/cypress/pull/33236
-  it.skip('creates a new test from an empty spec', () => {
+  it('creates a new test from an empty spec', () => {
+    loadProjectAndRunSpec({ specName: 'empty.cy.js', specSelector: 'title' })
+
+    cy.contains('Create test with Cypress Studio').click()
+
+    inputNewTestName()
+
+    // Cypress re-runs after the new test is saved.
+    cy.waitForSpecToFinish()
+
+    cy.get('.cm-content').invoke('text', 'cy.visit("cypress/e2e/index.html")')
+
+    cy.findByTestId('studio-save-button').click()
+
+    // verify recording is enabled to ensure the panel is fully ready
+    cy.findByTestId('record-button-recording').should('have.text', 'Recording...')
+
+    // we should have the commands we executed after we save
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/empty.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.equal(`
+it('new-test', function() {
+    cy.visit("cypress/e2e/index.html")
+});`.trim())
+    })
+  })
+
+  it('opens the name test screen from the welcome screen and creates a new test from an empty spec', () => {
     loadProjectAndRunSpec({ specName: 'empty.cy.js', specSelector: 'title' })
 
+    cy.findByTestId('studio-button').click()
+
+    cy.get('[data-cy="studio-panel"]').should('be.visible')
+
     cy.contains('Create test with Cypress Studio').click()
 
     inputNewTestName()
@@ -207,17 +238,15 @@ it('new-test', function() {
     cy.findByTestId('studio-single-test-title').should('have.text', 'should be the only test to run normally')
   })
 
-  // TODO: unskip with https://github.com/cypress-io/cypress/pull/33236
-  it.skip('creates and runs new tests in studio mode when there is a .only test in the spec file', () => {
+  it('creates and runs new tests in studio mode when there is a .only test in the spec file', () => {
     loadProjectAndRunSpec({ specName: 'spec-with-only.cy.js' })
 
     cy.get('.test').should('have.length', 1)
     cy.get('.test').contains('should be the only test to run normally').should('be.visible')
+    // create a new test from the spec header
+    openNewTestFromSpecHeader()
 
-    // launch studio and create a new test
-    cy.findByTestId('studio-button').click()
     cy.findByTestId('studio-panel').should('be.visible').within(() => {
-      cy.contains('button', 'New test').click()
       cy.get('[data-cy="test-name-input"]').type('new test{enter}')
     })
 
@@ -226,6 +255,49 @@ it('new-test', function() {
     cy.get('[data-cy="studio-single-test-title"]').should('have.text', 'new test')
   })
 
+  it('continues to display the welcome screen after reloading', () => {
+    loadProjectAndRunSpec({ specName: 'spec-w-visit.cy.js' })
+
+    // open welcome screen
+    cy.findByTestId('studio-button').click()
+
+    cy.findByTestId('new-test-features').should('be.visible')
+    cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=').and('contain', 'entrySource=welcome')
+
+    cy.reload()
+
+    cy.findByTestId('new-test-features').should('be.visible')
+    cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=').and('contain', 'entrySource=welcome')
+  })
+
+  it('continues to display the name test screen after reloading the page for a new test from root suite', () => {
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSpecHeader: true })
+
+    cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=').and('contain', 'entrySource=new-test-root')
+
+    cy.get('[data-cy="name-test-container"]').should('be.visible')
+
+    cy.reload()
+
+    cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=').and('contain', 'entrySource=new-test-root')
+
+    cy.get('[data-cy="name-test-container"]').should('be.visible')
+  })
+
+  it('continues to display the name test screen after reloading the page for a new test from suite', () => {
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSuite: true })
+
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=').and('contain', 'entrySource=new-test-suite')
+
+    cy.get('[data-cy="name-test-container"]').should('be.visible')
+
+    cy.reload()
+
+    cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=').and('contain', 'entrySource=new-test-suite')
+
+    cy.get('[data-cy="name-test-container"]').should('be.visible')
+  })
+
   describe('prompt for a new url', () => {
     const urlPrompt = '// Visit a page by entering a url in the address bar or typing a cy.visit command here'
     const autUrl = 'http://localhost:4455/cypress/e2e/index.html'

packages/app/cypress/e2e/studio/studio-ui.cy.ts

@@ -35,15 +35,13 @@ describe('studio functionality', () => {
     })
   })
 
-  // TODO: unskip with https://github.com/cypress-io/cypress/pull/33236
-  it.skip('opens studio panel to new test when clicking on studio button (from the app) next to url', () => {
+  it('opens studio panel to welcome screen when clicking on studio button (from the app) next to url', () => {
     cy.viewport(1500, 1000)
     loadProjectAndRunSpec()
     // studio button should be visible when using cloud studio
     cy.findByTestId('studio-button').should('be.visible').click()
     cy.findByTestId('studio-panel').should('be.visible')
-
-    cy.contains('New test')
+    cy.findByTestId('new-test-features').should('be.visible')
 
     cy.percySnapshot()
   })
@@ -85,22 +83,21 @@ describe('studio functionality', () => {
     cy.percySnapshot()
   })
 
-  // TODO: unskip with https://github.com/cypress-io/cypress/pull/33236
-  it.skip('shows test body sections correctly when studio panel is open and page is refreshed', () => {
+  it('shows test body sections correctly when studio panel is open and page is refreshed', () => {
     loadProjectAndRunSpec()
 
     cy.waitForSpecToFinish()
 
     cy.findByTestId('studio-button').click()
     cy.findByTestId('studio-panel').should('be.visible')
-    cy.findByTestId('new-test-button').should('be.visible')
+    cy.findByTestId('new-test-features').should('be.visible')
 
     cy.reload()
 
     cy.waitForSpecToFinish()
 
     cy.findByTestId('studio-panel').should('be.visible')
-    cy.findByTestId('new-test-button').should('be.visible')
+    cy.findByTestId('new-test-features').should('be.visible')
 
     // verify test body section is visible after refresh
     cy.get('.runnable-instruments').should('be.visible')
@@ -116,15 +113,14 @@ describe('studio functionality', () => {
     cy.location().its('hash').should('contain', 'suiteId=r1').and('not.contain', 'testId=')
   })
 
-  // TODO: unskip with https://github.com/cypress-io/cypress/pull/33236
-  it.skip('stays in new test mode when studio panel is opened when the spec is running', () => {
+  it('stays in the welcome screen when studio panel is opened while the spec is running', () => {
     loadProjectAndRunSpec()
 
     cy.waitForSpecToFinish()
 
     cy.findByTestId('studio-button').click()
     cy.findByTestId('studio-panel').should('be.visible')
-    cy.findByTestId('new-test-button').should('be.visible')
+    cy.findByTestId('new-test-features').should('be.visible')
 
     // Verify we're initially in new test mode
     cy.location().its('hash').should('contain', 'suiteId=r1').and('not.contain', 'testId=')
@@ -139,7 +135,7 @@ describe('studio functionality', () => {
 
     // verify we're still in new test mode
     cy.findByTestId('studio-panel').should('be.visible')
-    cy.findByTestId('new-test-button').should('be.visible')
+    cy.findByTestId('new-test-features').should('be.visible')
 
     // these should not exist if we stayed in new test mode
     cy.findByTestId('studio-single-test-title').should('not.exist')

packages/app/src/runner/ResizablePanels.cy.tsx

@@ -331,4 +331,16 @@ describe('<ResizablePanels />', { viewportWidth: 1500 }, () => {
       assertWidth('panel3', 1160)
     })
   })
+
+  describe('panel attributes', () => {
+    it('should have the correct aut-panel identifiers', () => {
+      cy.mount(() => (
+        <div class="h-screen">
+          <ResizablePanels maxTotalWidth={1500} v-slots={slotContents} />
+        </div>
+      ))
+
+      cy.get('[data-cy="aut-panel"]').should('have.id', 'aut-panel')
+    })
+  })
 })

packages/app/src/runner/ResizablePanels.vue

@@ -44,6 +44,7 @@
     </div>
 
     <div
+      id="aut-panel"
       data-cy="aut-panel"
       class="grow h-full bg-gray-100 relative"
       :class="{ 'pointer-events-none': panel2IsDragging || panel4IsDragging }"

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -112,6 +112,7 @@
             :has-requested-project-access="hasRequestedProjectAccess"
             :request-project-access-mutation="requestProjectAccessMutation"
             :spec-dirty-data-store="specDirtyDataStore"
+            :aut-snapshot-store="snapshotStore"
           />
         </HideDuringScreenshot>
       </template>
@@ -155,6 +156,7 @@ import PromptMoreInfoNeededModal from '../prompt/PromptMoreInfoNeededModal.vue'
 import { usePromptStore } from '../store/prompt-store'
 import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 import { useSpecDirtyDataStore } from '../store/spec-dirty-data-store'
+import { useSnapshotStore } from './snapshot-store'
 
 // this is used by the StudioPanel to access the AUT URL input
 const autUrlSelector = '.aut-url-input'
@@ -170,6 +172,7 @@ const {
 
 const userProjectStatusStore = useUserProjectStatusStore()
 const specDirtyDataStore = useSpecDirtyDataStore()
+const snapshotStore = useSnapshotStore()
 
 gql`
 fragment SpecRunner_Preferences on Query {