chore: wait for specs page to load before continuing in tests in order to reduce flake (#28855)

* chore: test a theory that waiting for specs list will be less flaky

* empty commit to trigger CI

* Add logic to login command for when we're visiting pages with no specs

* Rework tests to handle different 'no specs' pages

* Update a couple more situations where there is no specs list

* Fix bug where unauthorized login was not being sent at the right time to test the logout

* Move the specs page assertions into their own custom command

* typo fix

guides/e2e-open-testing.md

@@ -34,6 +34,7 @@ it('should onboard a todos project', () => {
 it('should open todos in the app', () => {
   cy.startAppServer() // starts the express server used to run the "app"
   cy.visitApp() // visits the app page, without launching the browser
+  cy.specsPageIsVisible()
   cy.get('[href=#/runs]').click()
   cy.get('[href=#/settings]').click()
 })

npm/vite-dev-server/cypress/e2e/react.cy.ts

@@ -23,6 +23,7 @@ for (const project of VITE_REACT) {
 
     it('should mount a passing test', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('App.cy.jsx').click()
       cy.waitForSpecToFinish()
       cy.get('.passed > .num').should('contain', 2)
@@ -35,6 +36,7 @@ for (const project of VITE_REACT) {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('MissingReact.cy.jsx').click()
       cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 1)
@@ -54,6 +56,7 @@ for (const project of VITE_REACT) {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('MissingReactInSpec.cy.jsx').click()
       cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 1)
@@ -73,6 +76,7 @@ for (const project of VITE_REACT) {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('AppCompilationError.cy.jsx').click()
       cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 1)

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -9,6 +9,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)
@@ -48,6 +49,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)
@@ -68,6 +70,7 @@ describe('Config options', () => {
     }, { specWithWhitespace })
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains(specWithWhitespace).click()
     cy.get('.passed > .num').should('contain', 2)
   })
@@ -78,6 +81,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 2)
@@ -89,6 +93,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 2)
@@ -147,6 +152,7 @@ describe('sourcemaps', () => {
 
     const verifySourcemap = (specName: string, line: number, column: number) => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains(specName).click()
       cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 2)

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -38,6 +38,7 @@ for (const project of WEBPACK_ANGULAR) {
 
           cy.startAppServer('component')
           cy.visitApp()
+          cy.specsPageIsVisible()
         })
       }
     })
@@ -49,6 +50,7 @@ for (const project of WEBPACK_ANGULAR) {
 
       it('should mount a passing test', () => {
         cy.visitApp()
+        cy.specsPageIsVisible()
         cy.contains('app.component.cy.ts').click()
         cy.waitForSpecToFinish({ passCount: 1 }, 60000)
 
@@ -62,6 +64,7 @@ for (const project of WEBPACK_ANGULAR) {
 
       it('should live-reload on src changes', () => {
         cy.visitApp()
+        cy.specsPageIsVisible()
         cy.contains('app.component.cy.ts').click()
         cy.waitForSpecToFinish({ passCount: 1 }, 60000)
 
@@ -94,6 +97,7 @@ for (const project of WEBPACK_ANGULAR) {
 
       it('should show compilation errors on src changes', () => {
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.contains('app.component.cy.ts').click()
         cy.waitForSpecToFinish({ passCount: 1 }, 60000)
@@ -126,6 +130,7 @@ for (const project of WEBPACK_ANGULAR) {
       // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455
       it('should detect new spec', { retries: 15 }, () => {
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.withCtx(async (ctx) => {
           await ctx.actions.file.writeFileInProject(

npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts

@@ -20,12 +20,14 @@ for (const project of WEBPACK_REACT) {
 
     it('should mount a passing test', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('App.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('should live-reload on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('App.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
@@ -52,6 +54,7 @@ for (const project of WEBPACK_REACT) {
 
     it('should show compilation errors on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('App.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
@@ -70,6 +73,7 @@ for (const project of WEBPACK_REACT) {
 
     it('should detect new spec', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(

npm/webpack-dev-server/cypress/e2e/next.cy.ts

@@ -20,12 +20,14 @@ for (const project of WEBPACK_REACT) {
 
     it('should mount a passing test', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('index.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('should live-reload on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('index.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
@@ -56,6 +58,7 @@ for (const project of WEBPACK_REACT) {
 
     it('should show compilation errors on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('index.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
@@ -78,6 +81,7 @@ for (const project of WEBPACK_REACT) {
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23417
     it('should detect new spec', { retries: 15 }, () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.withCtx(async (ctx) => {
         const newTestPath = ctx.path.join('pages', 'New.cy.js')
@@ -96,6 +100,7 @@ for (const project of WEBPACK_REACT) {
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23417
     it('should allow import of global styles in support file', { retries: 15 }, () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('styles.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
     })

npm/webpack-dev-server/cypress/e2e/nuxt.cy.ts

@@ -22,6 +22,7 @@ for (const project of PROJECTS) {
 
     it('should mount a passing test and live-reload', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('Tutorial.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
 
@@ -51,6 +52,7 @@ for (const project of PROJECTS) {
 
     it('should show compilation errors on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('Tutorial.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
@@ -73,6 +75,7 @@ for (const project of PROJECTS) {
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455
     it('should detect new spec', { retries: 15 }, () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.withCtx(async (ctx) => {
         const newSpecPath = ctx.path.join('components', 'New.cy.js')

npm/webpack-dev-server/cypress/e2e/react.cy.ts

@@ -23,6 +23,7 @@ for (const project of WEBPACK_REACT) {
 
     it('should mount a passing test', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('App.cy.jsx').click()
       cy.waitForSpecToFinish({ passCount: 2 })
     })
@@ -34,6 +35,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('MissingReact.cy.jsx').click()
       cy.waitForSpecToFinish({ failCount: 1 })
       cy.get('.test-err-code-frame').should('be.visible')
@@ -53,6 +55,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('MissingReactInSpec.cy.jsx').click()
       cy.waitForSpecToFinish({ failCount: 1 })
       cy.get('.test-err-code-frame').should('be.visible')
@@ -71,6 +74,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('AppCompilationError.cy.jsx').click()
       cy.waitForSpecToFinish({ failCount: 1 })
       cy.contains('An uncaught error was detected outside of a test')
@@ -114,6 +118,7 @@ for (const project of WEBPACK_REACT) {
     // https://cypress-io.atlassian.net/browse/UNIFY-1697
     it('filters missing spec files from loader during pre-compilation', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       // 1. assert spec executes successfully
       cy.contains('App.cy.jsx').click()

npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts

@@ -20,6 +20,7 @@ for (const project of PROJECTS) {
 
     it('should mount a passing test', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('HelloWorld.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
       cy.get('.commands-container').within(() => {
@@ -30,6 +31,7 @@ for (const project of PROJECTS) {
 
     it('should live-reload on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('HelloWorld.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })
@@ -60,6 +62,7 @@ for (const project of PROJECTS) {
 
     it('should show compilation errors on src changes', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('HelloWorld.cy.js').click()
       cy.waitForSpecToFinish({ passCount: 1 })

npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts

@@ -7,6 +7,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)
@@ -18,6 +19,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('foo.cy.js').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)
@@ -29,6 +31,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)
@@ -40,6 +43,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 2)
@@ -57,6 +61,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.withCtx(async (ctx) => {
       await ctx.actions.file.writeFileInProject(
@@ -75,6 +80,7 @@ describe('Config options', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('relative-url.cy.jsx').click()
     cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)

packages/app/cypress/e2e/create-from-component.cy.ts

@@ -211,6 +211,7 @@ describe('Create from component card', () => {
         cy.openProject('no-specs-vue-2', ['--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible('new-project')
 
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
       }, 'src/components/HelloWorld.cy.js')
@@ -222,6 +223,7 @@ describe('Create from component card', () => {
         cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js', '--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible('no-specs')
 
         cy.findByText('New spec').click()
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
@@ -236,6 +238,7 @@ describe('Create from component card', () => {
         cy.openProject('no-specs', ['--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible('new-project')
 
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
       }, 'src/App.cy.jsx')
@@ -247,6 +250,7 @@ describe('Create from component card', () => {
         cy.openProject('no-specs', ['--config-file', 'cypress-custom-spec-pattern.config.ts', '--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible('no-specs')
 
         cy.findByText('New spec').click()
         cy.findAllByTestId('card').eq(0).as('ComponentCard')

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -14,6 +14,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
     it('test component', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
       cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
@@ -64,6 +65,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
     it('navigation between specs and other parts of the app works', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
       cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
@@ -88,6 +90,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23159
     it('redirects to the specs list with error if a spec is not found', { retries: 15 }, () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       const { title, intro, explainer } = defaultMessages.specPage.noSpecError
       const badFilePath = 'src/DoesNotExist.spec.js'
 
@@ -129,6 +132,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
     it('browser picker in runner calls mutation with current spec path', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
       cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
@@ -158,6 +162,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
     it('restarts server on devServer config change', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get('[data-cy="spec-item"]')
 
       cy.withCtx(async (ctx, { sinon }) => {
@@ -191,6 +196,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.startAppServer('component')
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
 
       cy.get('#unified-runner').should('have.css', 'width', '333px')

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

@@ -12,6 +12,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
   it('test e2e', () => {
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
 
@@ -82,6 +83,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
   it('navigation between specs and other parts of the app works', () => {
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
     cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
@@ -147,6 +149,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
   it('should show blank page', () => {
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('blank-contents.spec')
     .click()
 
@@ -157,6 +160,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     const expectedAutHeight = 456 // based on explicitly setting viewport in this test to 596
 
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.withCtx(async (ctx, o) => {
       await ctx.actions.file.writeFileInProject(o.path, `describe('Bad spec', () => { it('has a syntax error', () => { expect(true).to.be.true }) }`)
@@ -183,6 +187,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
   it('should show visit failure blank page', () => {
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('blank-contents.spec')
     .click()
 
@@ -195,6 +200,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.startAppServer()
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
 
     cy.get('.toggle-specs-wrapper').click()
@@ -205,6 +211,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
   it('stops correctly running spec while switching specs', () => {
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('withFailure.spec').click()
     cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
     cy.get('body').type('f')
@@ -218,6 +225,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
   it('executes a test, navigates back to the spec list, creates a new spec, and runs the new spec', () => {
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
     cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
@@ -234,12 +242,14 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
   describe('accessibility', () => {
     it('has no axe violations in specs list panel', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('withFailure.spec').click()
       cy.get('button[aria-controls="reporter-inline-specs-list"]').click()
     })
 
     it('has no axe violations in reporter panel', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('withFailure.spec').click()
       cy.get('button[aria-controls="reporter-inline-specs-list"]').click()
     })

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

@@ -17,6 +17,7 @@ function startAtSpecsPage (testingType: typeof testingTypes[number]) {
 
   cy.startAppServer(testingType)
   cy.visitApp()
+  cy.specsPageIsVisible()
 }
 
 function openProject (testingType: typeof testingTypes[number]) {
@@ -122,6 +123,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
 
       cy.startAppServer(testingType)
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.get('[data-cy="spec-item"]').first().click()
       // Let runner stabilize
@@ -253,6 +255,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content.spec').click()
 
       cy.findByTestId('aut-url-input').invoke('val').should('contain', 'http://localhost:4455/cypress/e2e/dom-content.html')
@@ -268,6 +271,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.openProject('cypress-in-cypress')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content.spec').should('exist')
       cy.withCtx(async (ctx, o) => {
         ctx.coreData.app.browserStatus = 'open'

packages/app/cypress/e2e/cypress-origin-communicator.cy.ts

@@ -17,6 +17,7 @@ describe('Cypress In Cypress Origin Communicator', () => {
      */
     it('cleans up the primaryOriginCommunicator events when navigating away from the /specs to /runs', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content.spec').click()
       cy.waitForSpecToFinish()
 
@@ -35,6 +36,7 @@ describe('Cypress In Cypress Origin Communicator', () => {
 
     it('cleans up the primaryOriginCommunicator events when navigating away from the /specs to /settings', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content.spec').click()
       cy.waitForSpecToFinish()
 
@@ -53,6 +55,7 @@ describe('Cypress In Cypress Origin Communicator', () => {
 
     it('cleans up the primaryOriginCommunicator events when navigating to run a different spec', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content.spec').click()
       cy.waitForSpecToFinish()
 
@@ -90,6 +93,7 @@ describe('Cypress In Cypress Origin Communicator', () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('simple_origin.cy').click()
       cy.waitForSpecToFinish()
 
@@ -116,6 +120,7 @@ describe('Cypress In Cypress Origin Communicator', () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('simple_origin.cy').click()
       cy.waitForSpecToFinish()
 

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

@@ -48,6 +48,7 @@ describe('App - Debug Page', () => {
     })
 
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.get('[data-cy="debug-badge"]').should('be.visible').contains('0')
 
@@ -125,6 +126,7 @@ describe('App - Debug Page', () => {
     })
 
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.findByTestId('sidebar-link-debug-page').click()
     cy.findByTestId('debug-container').should('be.visible')
@@ -232,6 +234,7 @@ describe('App - Debug Page', () => {
     }, { RelevantRunsDataSource_RunsByCommitShas, DebugDataFailing })
 
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.findByTestId('sidebar-link-debug-page').click()
     cy.findByTestId('debug-container').should('be.visible')

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

@@ -5,6 +5,7 @@ describe('Reporter Header', () => {
       cy.openProject('cypress-in-cypress')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content.spec').click()
       cy.waitForSpecToFinish()
     })
@@ -46,6 +47,7 @@ describe('Reporter Header', () => {
         cy.openProject('cypress-in-cypress')
         cy.startAppServer()
         cy.visitApp()
+        cy.specsPageIsVisible()
         cy.contains('dom-content.spec').click()
         cy.waitForSpecToFinish()
       })
@@ -76,6 +78,7 @@ describe('Reporter Header', () => {
       cy.openProject('cypress-in-cypress')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('dom-content-scrollable-commands.spec').click()
 
       // wait for the test to scroll all the way to the bottom

packages/app/cypress/e2e/run-all-specs.cy.ts

@@ -30,6 +30,7 @@ describe('run-all-specs', () => {
     cy.openProject('run-all-specs')
     cy.startAppServer()
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     // Spawns new browser so we need to stub this
     cy.withCtx((ctx, { sinon }) => {

packages/app/cypress/e2e/runner/pluginEvents.cy.ts

@@ -11,6 +11,7 @@ describe('plugin events', () => {
       cy.openProject('plugin-run-events')
       cy.startAppServer('e2e')
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.get('[data-cy-row="run_events_spec_1.cy.js"]').eq(1).click()
       cy.waitForSpecToFinish({
@@ -36,6 +37,7 @@ describe('plugin events', () => {
       cy.openProject('plugin-run-events')
       cy.startAppServer('e2e')
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.get('[data-cy-row="run_events_spec_1.cy.js"]').eq(1).click()
       cy.waitForSpecToFinish({

packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts

@@ -28,6 +28,7 @@ for (const { projectName, test } of PROJECTS) {
         cy.openProject(projectName, ['--config-file', 'cypress-vite-default.config.ts', '--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible()
         cy.contains(`${test}`).click()
         cy.waitForSpecToFinish(undefined)
         cy.get('.collapsible-header-inner:first').click().get('.command.command-name-mount > .command-wrapper').click().then(() => {
@@ -39,6 +40,7 @@ for (const { projectName, test } of PROJECTS) {
         cy.openProject(projectName, ['--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible()
         cy.contains(`${test}`).click()
         cy.waitForSpecToFinish(undefined)
         cy.get('.command.command-name-mount > .command-wrapper').click().then(() => {

packages/app/cypress/e2e/runner/selector-playground.cy.ts

@@ -3,6 +3,7 @@ function launchApp () {
   cy.openProject('selector-playground')
   cy.startAppServer('e2e')
   cy.visitApp()
+  cy.specsPageIsVisible()
   cy.get(`[data-cy-row="spec.cy.js"]`).click()
 
   cy.waitForSpecToFinish()

packages/app/cypress/e2e/runner/sessions.ui.cy.ts

@@ -736,6 +736,7 @@ describe('runner/cypress sessions.open_mode.spec', () => {
     cy.openProject('session-and-origin-e2e-specs')
     cy.startAppServer('e2e')
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.get('[data-cy-row="multiple_sessions.cy.js"]').click()
     cy.waitForSpecToFinish({
@@ -807,6 +808,7 @@ describe('global sessions', () => {
     cy.openProject('session-and-origin-e2e-specs')
     cy.startAppServer('e2e')
     cy.visitApp()
+    cy.specsPageIsVisible()
 
     cy.get('[data-cy-row="global_sessions.cy.js"]').click()
     cy.waitForSpecToFinish({

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

@@ -30,6 +30,7 @@ function scaffoldTestingTypeAndVisitRunsPage (testingType: 'e2e' | 'component'):
   })
 
   cy.visitApp()
+  cy.specsPageIsVisible()
 
   moveToRunsPage()
 }
@@ -45,6 +46,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     it('resolves the runs page', () => {
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
       moveToRunsPage()
       cy.get('[data-cy="runs"]')
       cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
@@ -59,6 +61,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-runs-page').click()
       cy.get('[data-cy*="runsSkeleton-"]')
       cy.get('[data-cy="runs"]')
@@ -74,12 +77,14 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
     it('when logged out, shows call to action', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       moveToRunsPage()
       cy.contains(defaultMessages.runs.connect.buttonUser).should('exist')
     })
 
     it('clicking the login button will open the login modal', () => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       moveToRunsPage()
       cy.contains(defaultMessages.runs.connect.buttonUser).click()
       cy.withCtx((ctx, o) => {
@@ -101,6 +106,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     it('if logged in and connected', { viewportWidth: 1200 }, () => {
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
       cy.findByTestId('runNumber-status-OVERLIMIT').click()
@@ -131,6 +137,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
 
@@ -175,6 +182,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
 
@@ -210,6 +218,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
 
@@ -239,6 +248,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
 
@@ -263,6 +273,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('component')
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       moveToRunsPage()
 
       cy.withCtx(async (ctx, options) => {
@@ -318,6 +329,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('e2e')
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.withCtx(async (ctx, o) => {
         o.sinon.spy(ctx.cloud, 'executeRemoteGraphQL')
@@ -360,6 +372,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('e2e')
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.withCtx(async (ctx) => {
         const config = await ctx.project.getConfig()
@@ -395,6 +408,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('e2e')
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.withCtx(async (ctx) => {
         const config = await ctx.project.getConfig()
@@ -449,6 +463,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
     })
@@ -577,6 +592,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       moveToRunsPage()
     })
@@ -604,6 +620,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       moveToRunsPage()
       cy.findByText(defaultMessages.runs.connect.buttonProject).should('exist')
     })
@@ -659,6 +676,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       it('displays a list of recorded runs if a run has been recorded', () => {
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
         moveToRunsPage()
         cy.get('[data-cy="runs"]')
       })
@@ -666,6 +684,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       it('displays each run with correct information', () => {
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
         moveToRunsPage()
 
         cy.get('[data-cy="runCard-status-CANCELLED"]').first().within(() => {
@@ -698,6 +717,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       it('opens the run page if a run is clicked', () => {
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         moveToRunsPage()
         cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
@@ -723,6 +743,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         })
 
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         moveToRunsPage()
 
@@ -754,6 +775,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       it('displays a list of recorded runs if a run has been recorded', () => {
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
         moveToRunsPage()
         cy.get('[data-cy="runs"]')
       })
@@ -761,6 +783,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       it('displays each run with correct information', () => {
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
         moveToRunsPage()
 
         cy.findByText('fix: using Git data CANCELLED')
@@ -786,6 +809,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       it('opens the run page if a run is clicked', () => {
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         moveToRunsPage()
         cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
@@ -807,6 +831,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     it('shows alert warning if runs have been returned already', () => {
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.wait(1000)
       moveToRunsPage()
       cy.get('[data-cy="runs"]')
@@ -821,6 +846,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     it('should remove the alert warning if the app reconnects to the internet', () => {
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.wait(1000)
       moveToRunsPage()
       cy.get('[data-cy="runs"]')
@@ -855,6 +881,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.get('[href="#/runs"]').click()
 
@@ -880,6 +907,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.remoteGraphQLIntercept(async (obj) => {
         if (obj.result.data?.cloudViewer?.organizations?.nodes) {

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

@@ -15,6 +15,7 @@ describe('App: Settings', () => {
   it('visits settings page', () => {
     cy.startAppServer('e2e')
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.get(SidebarSettingsLinkSelector).click()
 
     cy.contains('[data-cy="app-header-bar"]', 'Settings')
@@ -33,6 +34,7 @@ describe('App: Settings', () => {
 
       cy.startAppServer('e2e')
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Cypress Cloud settings').click()
       cy.findByText('Project ID').should('be.visible')
@@ -49,6 +51,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Cypress Cloud settings').click()
       cy.findByText('Record key').should('be.visible')
@@ -59,6 +62,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Cypress Cloud settings').click()
       cy.get('[data-cy="code-box"]').should('contain', '***')
@@ -91,6 +95,7 @@ describe('App: Settings', () => {
       cy.startAppServer('e2e')
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('spec-list-container').scrollTo('bottom')
       // Visit the test to trigger the ws.off() for the TR websockets
       cy.contains('test1.js').click()
@@ -108,6 +113,7 @@ describe('App: Settings', () => {
       cy.startAppServer('e2e')
       cy.loginUser()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.withCtx((ctx, o) => {
         o.sinon.spy(ctx.actions.auth, 'logout')
       })
@@ -137,6 +143,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-settings-page').click()
       cy.findByText('Project settings').click()
       cy.get('[data-cy="file-match-indicator"]').contains('2 matches')
@@ -155,6 +162,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Project settings').click()
       cy.get('[data-cy="file-match-indicator"]').contains('19 matches')
@@ -166,6 +174,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Project settings').click()
       cy.get('[data-cy="settings-experiments"]').within(() => {
@@ -217,6 +226,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Project settings').click()
       cy.get('[data-cy="config-code"]').contains('{')
@@ -227,6 +237,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Project settings').click()
       cy.get('[data-cy="config-legend"]').within(() => {
@@ -270,6 +281,7 @@ describe('App: Settings', () => {
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Project settings').click()
       cy.get('[data-cy="config-legend"]').within(() => {
@@ -331,6 +343,7 @@ describe('App: Settings', () => {
       // navigate away and come back
       // preferred editor selected from dropdown should have been persisted
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-settings-page').click()
       cy.wait(200)
       cy.get('[data-cy="Device settings"]').click()
@@ -380,6 +393,7 @@ describe('App: Settings', () => {
       // navigate away and come back
       // preferred editor selected from dropdown should have been persisted
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-settings-page').click()
       cy.wait(200)
       cy.get('[data-cy="Device settings"]').click()
@@ -410,6 +424,7 @@ describe('App: Settings', () => {
         cy.startAppServer('e2e')
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
         cy.get('button').contains('Enable desktop notifications').click()
         // We specifically scroll this anchor into view when clicking the "Enable desktop notifications" button.
         cy.get('section#notifications').should('be.visible')
@@ -540,6 +555,7 @@ describe('App: Settings without cloud', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.get(SidebarSettingsLinkSelector).click()
     cy.findByText('Cypress Cloud settings').click()
     cy.findByText('Project ID').should('not.exist')
@@ -566,6 +582,7 @@ describe('App: Settings without cloud', () => {
     cy.startAppServer('component')
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.get(SidebarSettingsLinkSelector).click()
     cy.findByText('Project settings').click()
 

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

@@ -7,6 +7,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.openProject('todos')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('todos')
     })
 
@@ -51,6 +52,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.openProject('todos')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.contains('fixture.js').click()
 
@@ -68,6 +70,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.openProject('todos')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.contains('todos')
     })
 
@@ -323,6 +326,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.openProject('pristine-with-ct-testing', ['--component'])
       cy.startAppServer('component')
       cy.visitApp()
+      cy.specsPageIsVisible('new-project')
 
       cy.get('[data-cy="sidebar-header"]').as('switchTestingType').click()
       cy.findByRole('dialog', {

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

@@ -10,6 +10,7 @@ describe('App: Specs', () => {
         cy.openProject('no-specs')
         cy.startAppServer('e2e')
         cy.visitApp()
+        cy.specsPageIsVisible('new-project')
 
         // With no specs present, the page renders two cards, one for scaffolding example specs,
         // another for creating a new blank spec.
@@ -192,7 +193,9 @@ describe('App: Specs', () => {
 
           cy.get('[aria-label="Close"]').click()
 
-          cy.visitApp().get('[data-cy="spec-list-file"]').contains('MyTest.cy.js')
+          cy.visitApp()
+          cy.specsPageIsVisible()
+          cy.get('[data-cy="spec-list-file"]').contains('MyTest.cy.js')
         })
 
         it('should not show trouble rendering alert', () => {
@@ -230,6 +233,7 @@ describe('App: Specs', () => {
 
         cy.startAppServer('e2e')
         cy.visitApp()
+        cy.specsPageIsVisible('new-project')
 
         // With no specs present, the page renders two cards, one for scaffolding example specs,
         // another for creating a new blank spec.
@@ -301,7 +305,9 @@ describe('App: Specs', () => {
 
           cy.get('[aria-label="Close"]').click()
 
-          cy.visitApp().get('[data-cy="spec-list-file"]').contains('MyTest.cy.ts')
+          cy.visitApp()
+          cy.specsPageIsVisible()
+          cy.get('[data-cy="spec-list-file"]').contains('MyTest.cy.ts')
         })
       })
     })
@@ -327,6 +333,7 @@ describe('App: Specs', () => {
 
         cy.startAppServer('e2e')
         cy.visitApp()
+        cy.specsPageIsVisible('no-specs')
       })
 
       it('shows No Specs page with specPattern from config', () => {
@@ -436,7 +443,9 @@ describe('App: Specs', () => {
 
           cy.get('[aria-label="Close"]').click()
 
-          cy.visitApp().get('[data-cy-row]').contains('MyTest.cy.js')
+          cy.visitApp()
+          cy.specsPageIsVisible()
+          cy.get('[data-cy-row]').contains('MyTest.cy.js')
         })
 
         it('generates spec with file name that does not contain a known spec extension', () => {
@@ -504,6 +513,7 @@ describe('App: Specs', () => {
         cy.openProject('pristine-with-e2e-testing')
         cy.startAppServer('e2e')
         cy.visitApp()
+        cy.specsPageIsVisible('new-project')
       })
 
       context('scaffold example files', () => {
@@ -540,6 +550,7 @@ describe('App: Specs', () => {
         cy.openProject('no-specs', ['--component'])
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible('new-project')
 
         cy.findAllByTestId('card').eq(1).as('TemplateSpecCard')
       })
@@ -670,6 +681,7 @@ describe('App: Specs', () => {
 
         cy.startAppServer('component')
         cy.visitApp()
+        cy.specsPageIsVisible('no-specs')
       })
 
       it('shows No Specs page with specPattern from config', () => {
@@ -775,6 +787,7 @@ describe('App: Specs', () => {
       cy.openProject('no-specs')
       cy.startAppServer('e2e')
       cy.visitApp()
+      cy.specsPageIsVisible('new-project')
 
       cy.findByRole('heading', {
         level: 1,

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

@@ -9,6 +9,7 @@ describe('Spec List - Last updated with git info', () => {
       cy.openProject('cypress-in-cypress')
       cy.startAppServer('e2e')
       cy.visitApp()
+      cy.specsPageIsVisible()
     })
   })
 

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

@@ -6,6 +6,7 @@ describe('App: Spec List (Component)', () => {
     cy.openProject('component-tests', ['--component'])
     cy.startAppServer('component')
     cy.visitApp()
+    cy.specsPageIsVisible()
   })
 
   it('opens spec pattern modal', () => {

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

@@ -41,6 +41,7 @@ describe('App: Spec List (E2E)', () => {
     })
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.verifyE2ESelected()
   }
 

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

@@ -115,6 +115,7 @@ describe('App: Spec List - Flaky Indicator', () => {
     })
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.verifyE2ESelected()
   })
 

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

@@ -212,6 +212,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       allVisibleSpecsShouldBePlaceholders()
     })
   })
@@ -219,6 +220,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
   context('when logged out', () => {
     beforeEach(() => {
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-specs-page').click()
     })
 
@@ -265,6 +267,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-specs-page').click()
     })
 
@@ -310,6 +313,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
       cy.loginUser()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-specs-page').click()
     })
 
@@ -325,6 +329,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
       simulateRunData()
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-specs-page').click()
     })
 
@@ -571,6 +576,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.findByTestId('sidebar-link-specs-page').click()
     })
 
@@ -608,6 +614,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
 
       simulateRunData()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.findByTestId('sidebar-link-specs-page').click()
 

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

@@ -4,6 +4,7 @@ describe('Spec List - Last updated with no git info', () => {
     cy.openProject('cypress-in-cypress')
     cy.startAppServer('e2e')
     cy.visitApp()
+    cy.specsPageIsVisible()
   })
 
   // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23474

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

@@ -14,6 +14,7 @@ describe('App: Spec List Testing Type Switcher', () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.verifyCtSelected()
     })
 
@@ -43,6 +44,7 @@ describe('App: Spec List Testing Type Switcher', () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.verifyE2ESelected()
     })
 
@@ -68,6 +70,7 @@ describe('App: Spec List Testing Type Switcher', () => {
       cy.startAppServer('component')
 
       cy.visitApp()
+      cy.specsPageIsVisible()
       cy.verifyCtSelected()
     })
 

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

@@ -3,6 +3,7 @@ export function launchStudio () {
   cy.openProject('experimental-studio')
   cy.startAppServer('e2e')
   cy.visitApp()
+  cy.specsPageIsVisible()
   cy.get(`[data-cy-row="spec.cy.js"]`).click()
 
   cy.waitForSpecToFinish()

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

@@ -231,6 +231,7 @@ it('visits a basic html page', () => {
     cy.openProject('experimental-studio')
     cy.startAppServer('e2e')
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.get(`[title="empty.cy.js"]`).should('be.visible').click()
 
     cy.waitForSpecToFinish()

packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts

@@ -28,6 +28,7 @@ describe('authChange subscription', () => {
 
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
     })
 
     it('responds to authChange subscription for login', () => {
@@ -65,6 +66,7 @@ describe('authChange subscription', () => {
 
       cy.startAppServer('component')
       cy.visitApp()
+      cy.specsPageIsVisible()
     })
 
     it('responds to authChange subscription for login', () => {

packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts

@@ -22,6 +22,7 @@ describe('configChange subscription', () => {
     cy.openProject('cypress-in-cypress')
     cy.startAppServer()
     cy.visitApp()
+    cy.specsPageIsVisible()
   })
 
   describe('on config page', () => {

packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts

@@ -31,6 +31,7 @@ describe('CreateCloudOrgModalSubscription', { viewportWidth: 1200 }, () => {
       })
 
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.findByTestId('sidebar-link-runs-page').click()
 

packages/app/cypress/e2e/subscriptions/errorWarningChange-subscription.cy.ts

@@ -13,6 +13,7 @@ describe('errorWarningChange subscription', () => {
     beforeEach(() => {
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
     })
 
     describe('when the config file is saved with errors', () => {

packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts

@@ -7,6 +7,7 @@ describe('specChange subscription', () => {
     cy.openProject('cypress-in-cypress')
     cy.startAppServer()
     cy.visitApp()
+    cy.specsPageIsVisible()
   })
 
   describe('specs list', () => {

packages/app/cypress/e2e/top-nav.cy.ts

@@ -25,6 +25,7 @@ describe('App Top Nav Workflows', () => {
       cy.openProject('launchpad')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.findByTestId('app-header-bar').should('be.visible').and('contain', 'Specs')
     })
@@ -37,6 +38,7 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('launchpad', ['--browser', 'firefox'])
         cy.startAppServer()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('top-nav-active-browser-icon')
         .should('have.attr', 'src')
@@ -57,6 +59,7 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('launchpad')
         cy.startAppServer()
         cy.visitApp()
+        cy.specsPageIsVisible()
       })
 
       it('shows the current browser in the top nav browser list button', () => {
@@ -143,6 +146,7 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('launchpad')
         cy.startAppServer()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('app-header-bar').validateExternalLink({
           name: 'v10.0.0',
@@ -175,6 +179,7 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('launchpad')
         cy.startAppServer()
         cy.visitApp()
+        cy.specsPageIsVisible()
       })
 
       it('shows dropdown with version info if user version is outdated', () => {
@@ -243,6 +248,7 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('launchpad')
         cy.startAppServer()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('app-header-bar').validateExternalLink({
           name: `v${pkg.version}`,
@@ -258,6 +264,7 @@ describe('App Top Nav Workflows', () => {
       cy.openProject('launchpad')
       cy.startAppServer()
       cy.visitApp()
+      cy.specsPageIsVisible()
 
       cy.findByTestId('app-header-bar').findByRole('button', { name: 'Docs', expanded: false }).as('docsButton')
     })
@@ -334,12 +341,13 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer()
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
-        cy.findByTestId('app-header-bar').findByRole('button', { name: 'Profile and logout', expanded: false }).as('logInButton')
+        cy.findByTestId('app-header-bar').findByRole('button', { name: 'Profile and logout', expanded: false }).as('profileButton')
       })
 
       it('shows user in top nav when logged in', () => {
-        cy.get('@logInButton').click()
+        cy.get('@profileButton').click()
 
         cy.findByTestId('login-panel').contains('Test User').should('be.visible')
         cy.findByTestId('login-panel').contains('test@example.com').should('be.visible')
@@ -353,7 +361,7 @@ describe('App Top Nav Workflows', () => {
       })
 
       it('replaces user avatar after logout', () => {
-        cy.get('@logInButton').click()
+        cy.get('@profileButton').click()
 
         cy.withCtx((ctx, o) => {
           o.sinon.stub(ctx._apis.authApi, 'logOut').callsFake(async () => {
@@ -371,6 +379,10 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('component-tests', ['--component'])
         cy.startAppServer('component')
 
+        cy.loginUser()
+        cy.visitApp()
+        cy.specsPageIsVisible()
+
         cy.remoteGraphQLIntercept((obj) => {
           if (obj.result.data?.cloudProjectBySlug) {
             return new obj.Response('Unauthorized', { status: 401 })
@@ -379,20 +391,16 @@ describe('App Top Nav Workflows', () => {
           return obj.result
         })
 
-        cy.loginUser()
-        cy.visitApp()
-
-        cy.get('@logInButton').click()
+        cy.get('@profileButton').click()
 
         cy.findByTestId('login-panel').contains('Test User').should('be.visible')
         cy.findByTestId('login-panel').contains('test@example.com').should('be.visible')
 
         cy.findByTestId('sidebar-link-runs-page').click()
-        cy.get('@logInButton').click()
 
         cy.findByTestId('app-header-bar').within(() => {
           cy.findByTestId('user-avatar-title').should('not.exist')
-          cy.findByRole('button', { name: 'Log in' }).click()
+          cy.findByRole('button', { name: 'Log in' })
         })
       })
     })
@@ -457,6 +465,7 @@ describe('App Top Nav Workflows', () => {
           cy.openProject('component-tests', ['--config-file', 'cypressWithoutProjectId.config.js'])
           cy.startAppServer()
           cy.visitApp()
+          cy.specsPageIsVisible()
           cy.remoteGraphQLIntercept(async (obj) => {
             if (obj.result.data?.cloudViewer) {
               obj.result.data.cloudViewer.organizations = {
@@ -489,6 +498,7 @@ describe('App Top Nav Workflows', () => {
           cy.openProject('component-tests')
           cy.startAppServer()
           cy.visitApp()
+          cy.specsPageIsVisible()
         })
 
         it('shows log in modal workflow for user with name and email', () => {
@@ -699,6 +709,7 @@ describe('App Top Nav Workflows', () => {
         cy.openProject('launchpad')
         cy.startAppServer('e2e', { skipMockingPrompts: true })
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         verifyBannerDoesNotExist()
       })
@@ -709,6 +720,7 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer('e2e', { skipMockingPrompts: true })
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         verifyBannerDoesNotExist()
       })
@@ -729,6 +741,7 @@ describe('App Top Nav Workflows', () => {
 
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         verifyBannerDoesNotExist()
       })
@@ -740,6 +753,7 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer()
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         verifyBannerDoesNotExist()
       })
@@ -753,6 +767,7 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer()
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('enable-notifications-banner').should('be.visible')
       })
@@ -765,6 +780,7 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer()
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('enable-notifications-banner').should('be.visible')
         cy.findByRole('button', { name: 'Dismiss banner' }).click()
@@ -786,6 +802,7 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer()
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('enable-notifications-banner').should('be.visible')
         cy.contains('button', 'Remind me later').click()
@@ -816,6 +833,7 @@ describe('App Top Nav Workflows', () => {
         cy.startAppServer()
         cy.loginUser()
         cy.visitApp()
+        cy.specsPageIsVisible()
 
         cy.findByTestId('enable-notifications-banner').should('be.visible')
         cy.contains('button', 'Enable desktop notifications').click()
@@ -851,6 +869,7 @@ describe('Growth Prompts Can Open Automatically', () => {
     )
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.verifyE2ESelected()
     cy.wait(1000)
     cy.contains('Configure CI').should('be.visible')
@@ -869,6 +888,7 @@ describe('Growth Prompts Can Open Automatically', () => {
     )
 
     cy.visitApp()
+    cy.specsPageIsVisible()
     cy.verifyE2ESelected()
     cy.wait(1000)
     cy.contains('Configure CI').should('not.exist')

packages/frontend-shared/cypress/support/e2e.ts

@@ -158,6 +158,10 @@ declare global {
        * Visits the Cypress app, for Cypress-in-Cypress testing
        */
       visitApp(href?: string, opts?: Partial<Cypress.VisitOptions>): Chainable<AUTWindow>
+      /**
+       * Verifies the specs page is visible (list, no specs, or create spec page)
+       */
+      specsPageIsVisible(specsSetup?: 'new-project' | 'no-specs'): Chainable<any>
       /**
        * Visits the Cypress launchpad
        */
@@ -365,6 +369,21 @@ function visitApp (href?: string, opts?: Partial<Cypress.VisitOptions>) {
   })
 }
 
+function specsPageIsVisible (specsSetup) {
+  if (specsSetup === 'new-project') {
+    // if this is a new project, we'll be on the create spec page
+    return cy.get('[data-cy=create-spec-page-cards]').should('be.visible')
+  }
+
+  if (specsSetup === 'no-specs') {
+    // if this is an existing project with no specs, we'll be on the no specs found page
+    return cy.get('[data-cy=create-spec-page-description]').should('be.visible')
+  }
+
+  // if our tests seeded specs, we'll be on the specs list page
+  return cy.get('[data-cy=spec-list-container]').should('be.visible')
+}
+
 function visitLaunchpad () {
   return logInternal(`visitLaunchpad ${Cypress.env('e2e_launchpadPort')}`, () => {
     return cy.visit(`/__launchpad/index.html`, { log: false }).then((val) => {
@@ -546,6 +565,7 @@ Cypress.Commands.add('getAutIframe', getAutIframe)
 Cypress.Commands.add('addProject', addProject)
 Cypress.Commands.add('openGlobalMode', openGlobalMode)
 Cypress.Commands.add('visitApp', visitApp)
+Cypress.Commands.add('specsPageIsVisible', specsPageIsVisible)
 Cypress.Commands.add('loginUser', loginUser)
 Cypress.Commands.add('visitLaunchpad', visitLaunchpad)
 Cypress.Commands.add('skipWelcome', skipWelcome)