misc: Update cursor when hovering over AUT URL that is already set (c…

…ypress-io#32782)

* misc: Update cursor when hovering over AUT URL that is already set

* changelog entry

cli/CHANGELOG.md

@@ -14,6 +14,7 @@ _Released 10/20/2025 (PENDING)_
 **Misc:**
 
 - Add top padding for command log labels. Addressed in [#32774](https://github.com/cypress-io/cypress/pull/32774).
+- Have cursor on hover of the AUT URL to show as pointer. Addresses [#32777](https://github.com/cypress-io/cypress/issues/32777). Addressed in [#32782](https://github.com/cypress-io/cypress/pull/32782).
 
 **Dependency Updates:**
 

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

@@ -168,7 +168,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       cy.findByTestId('aut-url-input').invoke('val').should('contain', autUrl)
     })
 
-    it('opens aut url externally', () => {
+    it('opens aut url externally when url is readonly', () => {
       const autStore = useAutStore()
       const autUrl = 'http://localhost:3000/todo'
 
@@ -197,6 +197,34 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       cy.wrap(openExternalStub).should('have.been.calledWith', 'http://localhost:3000/todo')
     })
 
+    it('does not open url externally when url is not readonly', () => {
+      const studioStore = useStudioStore()
+
+      // This emulates the 'needsUrl' state in the studio store
+      studioStore.setActive(true)
+      studioStore.setUrl(undefined)
+      studioStore._hasStarted = true
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal)
+        },
+      })
+
+      const openExternalStub = cy.stub()
+
+      cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => {
+        openExternalStub(url)
+
+        return defineResult({
+          openExternal: true,
+        })
+      })
+
+      cy.findByTestId('aut-url-input').click()
+      cy.wrap(openExternalStub).should('not.have.been.called')
+    })
+
     it('when currentTestingType is component, url has placeholder text', () => {
       const autStore = useAutStore()
 
@@ -235,6 +263,41 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       cy.findByTestId('aut-url-input').should('have.prop', 'placeholder', 'Enter URL')
       cy.percySnapshot()
     })
+
+    it('shows cursor-pointer when url is readonly', () => {
+      const autStore = useAutStore()
+      const autUrl = 'http://localhost:3000'
+
+      autStore.updateUrl(autUrl)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        onResult: (gql) => {
+          gql.currentTestingType = 'e2e'
+        },
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal)
+        },
+      })
+
+      cy.findByTestId('aut-url-input').should('have.class', 'cursor-pointer')
+    })
+
+    it('shows cursor-text when url is not readonly', () => {
+      const studioStore = useStudioStore()
+
+      // This emulates the 'needsUrl' state in the studio store
+      studioStore.setActive(true)
+      studioStore.setUrl(undefined)
+      studioStore._hasStarted = true
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal)
+        },
+      })
+
+      cy.findByTestId('aut-url-input').should('have.class', 'cursor-text')
+    })
   })
 
   describe('browser dropdown', () => {

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -49,6 +49,7 @@
           :placeholder="inputPlaceholder"
           aria-label="url of the application under test"
           class="aut-url-input bg-transparent text-gray-300 outline-none text-base font-normal leading-6 flex grow mr-[12px] max-w-full self-center truncate w-full placeholder:text-gray-400 placeholder:text-base placeholder:font-normal placeholder:leading-6 focus:text-indigo-300 focus-visible:outline-none"
+          :class="[urlReadOnly ? 'cursor-pointer' : 'cursor-text']"
           @input="setStudioUrl"
           @click="openExternally"
           @keyup.enter="visitUrl"
@@ -194,7 +195,9 @@ const activeSpecPath = specStore.activeSpec?.absolute
 
 const isDisabled = computed(() => autStore.isRunning || autStore.isLoading)
 
-const urlReadOnly = computed(() => !studioStore.needsUrl || props.gql.currentTestingType === 'component')
+const urlReadOnly = computed(() => {
+  return !studioStore.needsUrl || props.gql.currentTestingType === 'component'
+})
 
 const inputPlaceholder = computed(() => {
   if (props.gql.currentTestingType === 'component') {
@@ -232,7 +235,7 @@ function visitUrl () {
 }
 
 function openExternally () {
-  if (!autStore.url || studioStore.needsUrl) {
+  if (!urlReadOnly.value) {
     return
   }