internal: Clear AUT Url and prompt for new url when removing a visit command from the test via Studio (#32131)

* internal: remove default url when setting the url so that the url can be properly cleared

* clear urlInProgress after we set the studio url

* add test

* add more tests

* clear test editor text using invoke instead

Author: mabela416

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

@@ -1,5 +1,7 @@
 import { launchStudio, loadProjectAndRunSpec, assertClosingPanelWithoutChanges } from './helper'
 
+const urlPrompt = '// Visit a page by entering a url in the address bar or typing a cy.visit command here'
+
 describe('Cypress Studio', () => {
   function incrementCounter (initialCount: number) {
     cy.getAutIframe().within(() => {
@@ -751,4 +753,61 @@ describe('studio functionality', () => {
 
     cy.location().its('hash').and('not.contain', 'suiteId=').and('not.contain', 'studio=')
   })
+
+  describe('prompt for a new url', () => {
+    const autUrl = 'http://localhost:4455/cypress/e2e/index.html'
+    const visitUrl = 'cypress/e2e/index.html'
+
+    const clearUrl = () => {
+      cy.findByTestId('aut-url-input').should('have.value', autUrl)
+
+      cy.get('.cm-content').invoke('text', '')
+
+      cy.findByTestId('studio-save-button').click()
+
+      cy.findByTestId('aut-url-input').should('have.value', '')
+
+      cy.findByTestId('aut-url-input').should('have.focus')
+
+      cy.get('.cm-line').should('contain.text', urlPrompt)
+    }
+
+    const assertAutUrlInput = () => {
+      cy.findByTestId('aut-url-input').should('have.value', autUrl)
+
+      cy.get('.cm-line').should('not.contain.text', urlPrompt)
+
+      cy.get('.cm-line').should('contain.text', `cy.visit('${visitUrl}')`)
+    }
+
+    const clearAndAddAutUrl = () => {
+      clearUrl()
+      cy.findByTestId('aut-url-input').type(`${visitUrl}{enter}`)
+      assertAutUrlInput()
+    }
+
+    const clearAndAddTestBlockEditorUrl = () => {
+      clearUrl()
+      cy.get('.cm-content').invoke('text', 'cy.visit(\'cypress/e2e/index.html\')')
+      cy.findByTestId('studio-save-button').click()
+      assertAutUrlInput()
+    }
+
+    beforeEach(() => {
+      launchStudio()
+    })
+
+    it('when an existing visit command is cleared and adds a new url via the aut url input', () => {
+      clearAndAddAutUrl()
+    })
+
+    it('when an existing visit command is cleared and adds a new url via test block editor', () => {
+      clearAndAddTestBlockEditorUrl()
+    })
+
+    it('ensures we clear the aut url input properly in between adding and clearing urls', () => {
+      clearAndAddAutUrl()
+      clearAndAddTestBlockEditorUrl()
+    })
+  })
 })

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -225,7 +225,10 @@ function setStudioUrl (event: Event) {
 }
 
 function visitUrl () {
-  studioStore.visitUrl(urlInProgress.value)
+  studioStore.setUrl(urlInProgress.value)
+  // once we set the url in studio, we can clear the urlInProgress
+  // since we'll rerun the test which will set the url in the autStore
+  urlInProgress.value = ''
 }
 
 function openExternally () {

packages/app/src/store/studio-store.ts

@@ -271,7 +271,7 @@ export const useStudioStore = defineStore('studioRecorder', {
       const autStore = useAutStore()
 
       if (this._initialUrl || this.url) {
-        this.visitUrl(this._initialUrl)
+        this.setUrl(this._initialUrl)
       }
 
       if (!this.url && autStore.url) {
@@ -331,20 +331,6 @@ export const useStudioStore = defineStore('studioRecorder', {
       getEventManager().emit('studio:save', payload)
     },
 
-    visitUrl (url?: string) {
-      this.setUrl(url ?? this.url)
-
-      // if we're visiting a new url, add the visit log
-      if (url) {
-        this.logs.push({
-          id: this._getId(),
-          selector: undefined,
-          name: 'visit',
-          message: this.url,
-        })
-      }
-    },
-
     _removeLastLogIfType (selector?: string) {
       const lastLog = this.logs[this.logs.length - 1]