test: tweak simulated run mode and some other tests for flake (#25623)

Co-authored-by: Stokes Player <stokes.player@gmail.com>

packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts

@@ -1,14 +1,13 @@
+import { CY_IN_CY_SIMULATE_RUN_MODE } from '@packages/types/src/constants'
+
 describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
   it('e2e run mode spec runner header is correct', () => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()
     cy.openProject('cypress-in-cypress')
     cy.startAppServer()
-    cy.visitApp()
-
-    simulateRunModeInUI()
+    cy.visitApp(`/specs/runner?file=cypress/e2e/dom-content.spec.js&${CY_IN_CY_SIMULATE_RUN_MODE}`)
 
-    cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
 
     cy.findByTestId('aut-url').should('be.visible')
@@ -33,17 +32,14 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
   })
 
-  // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23306
-  it('component testing run mode spec runner header is correct', { retries: 15 }, () => {
+  it('component testing run mode spec runner header is correct', () => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()
     cy.openProject('cypress-in-cypress')
     cy.startAppServer('component')
-    cy.visitApp()
-    simulateRunModeInUI()
-    cy.contains('TestComponent.spec').click()
-    cy.waitForSpecToFinish()
+    cy.visitApp(`/specs/runner?file=src/TestComponent.spec.jsx&${CY_IN_CY_SIMULATE_RUN_MODE}`)
 
+    cy.waitForSpecToFinish()
     cy.findByTestId('aut-url').should('not.exist')
     cy.findByTestId('playground-activator').should('not.exist')
 
@@ -81,9 +77,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
       })
     })
 
-    cy.visitApp()
-    simulateRunModeInUI()
-    cy.contains('dom-content.spec').click()
+    cy.visitApp(`/specs/runner?file=cypress/e2e/dom-content.spec.js&${CY_IN_CY_SIMULATE_RUN_MODE}`)
 
     cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')
     cy.findByLabelText('Stats').should('not.exist')
@@ -92,13 +86,3 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     cy.findByTestId('sidebar').should('not.exist')
   })
 })
-
-function simulateRunModeInUI () {
-  // this simulates run mode enough for this test
-  cy.window().then((win) => {
-    win.__CYPRESS_MODE__ = 'run'
-    cy.get('body').then(($el) => {
-      $el.find('[data-cy="sidebar"]')?.remove()
-    })
-  })
-}

packages/app/src/App.vue

@@ -5,23 +5,19 @@
     />
   </router-view>
 
-  <template v-if="route.name && route.name !== 'SpecRunner'">
+  <template v-if="!isRunMode">
     <!--
-      checking for existence of `route.name` here to avoid a flash
-      of these components if the page is refreshed on the SpecRunner route
+      avoiding graphql in run mode
     -->
     <CloudViewerAndProject />
     <LoginConnectModals />
   </template>
 </template>
 
 <script setup lang="ts">
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import LoginConnectModals from '@cy/gql-components/LoginConnectModals.vue'
-
-import { useRoute } from 'vue-router'
 import CloudViewerAndProject from '@packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue'
-const route = useRoute()
-
 </script>
 
 <style lang="scss">

packages/app/src/layouts/default.vue

@@ -62,6 +62,7 @@ import { computed } from 'vue'
 
 import { MainAppQueryDocument, MainApp_ResetErrorsAndLoadConfigDocument } from '../generated/graphql'
 import SidebarNavigationContainer from '../navigation/SidebarNavigationContainer.vue'
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 
 gql`
 fragment MainAppQueryData on Query {
@@ -109,6 +110,6 @@ const resetErrorAndLoadConfig = (id: string) => {
   }
 }
 
-const renderSidebar = window.__CYPRESS_MODE__ !== 'run'
+const renderSidebar = !isRunMode
 
 </script>

packages/app/src/runner/SpecRunnerHeaderRunMode.vue

@@ -32,6 +32,7 @@
           <img
             v-if="selectedBrowser.displayName"
             class="min-w-16px w-16px"
+            alt=""
             :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
           > {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -35,7 +35,7 @@
       @panel-width-updated="handlePanelWidthUpdated"
     >
       <template #panel1="{isDragging}">
-        <HideDuringScreenshotOrRunMode
+        <HideDuringScreenshot
           v-if="props.gql.currentProject"
           v-show="runnerUiStore.isSpecsListOpen"
           id="inline-spec-list"
@@ -52,7 +52,7 @@
             @close="runnerUiStore.setShowChooseExternalEditorModal(false)"
             @selected="openFile"
           />
-        </HideDuringScreenshotOrRunMode>
+        </HideDuringScreenshot>
       </template>
       <template #panel2>
         <HideDuringScreenshot
@@ -67,14 +67,14 @@
         </HideDuringScreenshot>
       </template>
       <template #panel3>
-        <HideDuringScreenshotOrRunMode class="bg-white">
+        <HideDuringScreenshot class="bg-white">
           <SpecRunnerHeaderOpenMode
             v-if="props.gql.currentProject"
             :gql="props.gql.currentProject"
             :event-manager="eventManager"
             :get-aut-iframe="getAutIframeModel"
           />
-        </HideDuringScreenshotOrRunMode>
+        </HideDuringScreenshot>
 
         <RemoveClassesDuringScreenshotting
           class="h-0 p-16px"
@@ -121,7 +121,6 @@ import type { SpecRunnerFragment } from '../generated/graphql'
 import { usePreferences } from '../composables/usePreferences'
 import ScriptError from './ScriptError.vue'
 import ResizablePanels from './ResizablePanels.vue'
-import HideDuringScreenshotOrRunMode from './screenshot/HideDuringScreenshotOrRunMode.vue'
 import AutomationElement from './automation/AutomationElement.vue'
 import { useResizablePanels, useRunnerStyle } from './useRunnerStyle'
 import { useEventManager } from './useEventManager'

packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx

@@ -4,6 +4,14 @@ import { Clipboard_CopyToClipboardDocument } from '../../generated/graphql-test'
 import SelectorPlayground from './SelectorPlayground.vue'
 import { logger } from '../logger'
 
+/**
+ * Helper to reset focus for tooltips
+ * jQuery .blur() seemed unreliable, leading to flake
+ */
+function clickAway () {
+  cy.get('body').click('topLeft')
+}
+
 describe('SelectorPlayground', () => {
   const mountSelectorPlayground = (
     eventManager = createEventManager(),
@@ -113,6 +121,9 @@ describe('SelectorPlayground', () => {
     cy.get('@copy').click()
     cy.get('@copy').should('be.focused')
 
+    // make sure some tooltip is not already showing
+    // sometimes there's flake in CI because mouse position is over "print to console" button
+    clickAway()
     cy.get('[data-cy="playground-copy"]').trigger('mouseenter')
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Copy to clipboard')
 
@@ -183,21 +194,21 @@ describe('SelectorPlayground', () => {
 
     cy.get('[data-cy="playground-toggle"]').focus()
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Click an element to see a suggested selector')
-    cy.get('[data-cy="playground-toggle"]').blur()
+    clickAway()
     cy.get('[data-cy="selector-playground-tooltip"]').should('not.exist')
 
     cy.get('[data-cy="playground-copy"]').focus()
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Copy to clipboard')
     cy.get('[data-cy="playground-copy"]').click()
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Copied')
-    cy.get('[data-cy="playground-copy"]').blur()
+    clickAway()
     cy.get('[data-cy="selector-playground-tooltip"]').should('not.exist')
 
     cy.get('[data-cy="playground-print"]').focus()
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Print to console')
     cy.get('[data-cy="playground-print"]').click()
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Printed')
-    cy.get('[data-cy="playground-print"]').blur()
+    clickAway()
     cy.get('[data-cy="selector-playground-tooltip"]').should('not.exist')
   })
 

packages/app/src/runner/useRunnerStyle.ts

@@ -39,7 +39,7 @@ export const useRunnerStyle = () => {
     // might not be there
     let nonAutWidth = autMargin * 2
 
-    if (window.__CYPRESS_MODE__ === 'open') {
+    if (!isRunMode) {
       nonAutWidth += collapsedNavBarWidth
     }
 

packages/frontend-shared/src/utils/isRunMode.ts

@@ -1 +1,3 @@
-export const isRunMode = window.__CYPRESS_MODE__ === 'run' && window.top === window
+import { CY_IN_CY_SIMULATE_RUN_MODE } from '@packages/types/src/constants'
+
+export const isRunMode = window.location.href.includes(CY_IN_CY_SIMULATE_RUN_MODE) || (window.__CYPRESS_MODE__ === 'run' && window.top === window)

packages/types/src/constants.ts

@@ -36,3 +36,10 @@ export const RUN_ALL_SPECS: SpecFile = {
   baseName: RUN_ALL_SPECS_KEY,
   fileName: RUN_ALL_SPECS_KEY,
 }
+
+/**
+ * In cypress-in-cypress tests that visit the app in open mode,
+ * we use this to make `isRunMode` true on the UI side so that
+ * we can test some run-mode-specific UI features
+ */
+export const CY_IN_CY_SIMULATE_RUN_MODE = 'CY_IN_CY_SIMULATE_RUN_MODE'