fix: AUT URL in runner header links to application URL (#22171)

* Add failing test

* Update AUT URL display to link

* fix: Fix header AUT URL truncation

* fix: Adjust line height so that lower-hanging characters don't get cut off

Author: astone123

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

@@ -109,6 +109,25 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.percySnapshot()
   })
 
+  it('links to aut url', () => {
+    const autStore = useAutStore()
+    const url = 'http://localhost:3000/todo'
+
+    autStore.updateUrl(url)
+
+    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+      onResult: (gql) => {
+        gql.currentTestingType = 'e2e'
+      },
+      render: (gqlVal) => {
+        return renderWithGql(gqlVal)
+      },
+    })
+
+    cy.contains(url).should('exist').should('have.attr', 'href', url)
+    cy.percySnapshot()
+  })
+
   it('does not show url section if currentTestingType is component', () => {
     const autStore = useAutStore()
 

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -23,9 +23,13 @@
         >
           <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
-        <div class="mr-12px max-w-100% grid text-gray-600 items-center truncate">
+        <a
+          target="_blank"
+          :href="autStore.url"
+          class="mr-12px leading-normal max-w-100% text-indigo-500 self-center hocus-link-default truncate"
+        >
           {{ autStore.url }}
-        </div>
+        </a>
       </div>
       <div
         v-else