fix: restart Cypress server and browser on baseUrl change (#22154)

* fix: restart server on baseUrl change

* Rework how baseUrl works

* Refactor how we determine if we should ping the base url

* Fix test

* Update packages/launchpad/cypress/e2e/choose-a-browser.cy.ts

* Update packages/launchpad/cypress/e2e/choose-a-browser.cy.ts

Co-authored-by: Matt Henkes <mjhenkes@gmail.com>

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

@@ -305,4 +305,26 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       expect(ctx.actions.project.initializeActiveProject).to.be.called
     })
   })
+
+  it('restarts server if baseUrl is updated in the config file', () => {
+    startAtSpecsPage('e2e')
+    cy.get('[data-cy="spec-item"]')
+
+    cy.withCtx((ctx, o) => {
+      ctx.coreData.app.browserStatus = 'open'
+      o.sinon.stub(ctx.actions.project, 'initializeActiveProject')
+
+      let config = ctx.actions.file.readFileInProject('cypress.config.js')
+
+      config = config.replace(`  e2e: {`, `  e2e: {\n  baseUrl: 'https://example.cypress.io',\n`)
+      ctx.actions.file.writeFileInProject('cypress.config.js', config)
+    })
+
+    cy.get('[data-cy="loading-spinner"]').should('be.visible')
+    cy.contains('[role="alert"]', 'Loading')
+
+    cy.withRetryableCtx((ctx) => {
+      expect(ctx.actions.project.initializeActiveProject).to.be.called
+    })
+  })
 })

packages/config/src/browser.ts

@@ -188,7 +188,6 @@ export const validateNeedToRestartOnChange = (cachedConfig: any, updatedConfig:
   const restartOnChange = {
     browser: false,
     server: false,
-    pingBaseUrl: false,
   }
 
   if (!cachedConfig || !updatedConfig) {

packages/config/src/options.ts

@@ -40,7 +40,7 @@ interface ResolvedConfigOption {
    */
   canUpdateDuringTestTime?: boolean
   specificTestingType?: TestingType
-  requireRestartOnChange?: 'server' | 'browser' | 'pingBaseUrl'
+  requireRestartOnChange?: 'server' | 'browser'
 }
 
 interface RuntimeConfigOption {
@@ -52,7 +52,7 @@ interface RuntimeConfigOption {
    * Can be mutated with Cypress.config() or test-specific configuration overrides
    */
   canUpdateDuringTestTime?: boolean
-  requireRestartOnChange?: 'server' | 'browser' | 'pingBaseUrl'
+  requireRestartOnChange?: 'server' | 'browser'
 }
 
 export interface BreakingOption {
@@ -135,7 +135,7 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
     defaultValue: null,
     validation: validate.isFullyQualifiedUrl,
     canUpdateDuringTestTime: true,
-    requireRestartOnChange: 'pingBaseUrl',
+    requireRestartOnChange: 'server',
   }, {
     name: 'blockHosts',
     defaultValue: null,

packages/data-context/src/data/ProjectLifecycleManager.ts

@@ -236,8 +236,6 @@ export class ProjectLifecycleManager {
           })
         }
 
-        const restartOnChange = validateNeedToRestartOnChange(this._cachedFullConfig, finalConfig)
-
         if (this._currentTestingType === 'component') {
           const devServerOptions = await this.ctx._apis.projectApi.getDevServer().start({ specs: this.ctx.project.specs, config: finalConfig })
 
@@ -246,14 +244,12 @@ export class ProjectLifecycleManager {
           }
 
           finalConfig.baseUrl = `http://localhost:${devServerOptions?.port}`
-
-          // Devserver can pick a random port, this solve the edge case where closing
-          // and spawning the devserver can result in a different baseUrl
-          if (this._cachedFullConfig && this._cachedFullConfig.baseUrl !== finalConfig.baseUrl) {
-            restartOnChange.server = true
-          }
         }
 
+        const pingBaseUrl = this._cachedFullConfig && this._cachedFullConfig.baseUrl !== finalConfig.baseUrl
+
+        const restartOnChange = validateNeedToRestartOnChange(this._cachedFullConfig, finalConfig)
+
         this._cachedFullConfig = finalConfig
 
         // This happens automatically with openProjectCreate in run mode
@@ -271,7 +267,7 @@ export class ProjectLifecycleManager {
             await this.ctx.actions.browser.relaunchBrowser()
           }
 
-          if (restartOnChange.pingBaseUrl) {
+          if (pingBaseUrl) {
             this.ctx.actions.project.pingBaseUrl().catch(this.onLoadError)
           }
         }

packages/launchpad/cypress/e2e/choose-a-browser.cy.ts

@@ -190,7 +190,7 @@ describe('Choose a Browser Page', () => {
       cy.get('h1').should('contain', 'Choose a Browser')
 
       cy.withCtx((ctx, o) => {
-        o.sinon.spy(ctx.actions.project, 'launchProject')
+        o.sinon.stub(ctx.actions.project, 'launchProject')
       })
 
       cy.intercept('mutation-OpenBrowser_LaunchProject', cy.stub().as('launchProject'))
@@ -233,7 +233,7 @@ describe('Choose a Browser Page', () => {
       cy.intercept('mutation-OpenBrowser_FocusActiveBrowserWindow').as('focusBrowser')
 
       cy.withCtx((ctx, o) => {
-        o.sinon.spy(ctx.actions.browser, 'focusActiveBrowserWindow')
+        o.sinon.stub(ctx.actions.browser, 'focusActiveBrowserWindow')
       })
 
       cy.get('@focusButton').click()
@@ -276,6 +276,10 @@ describe('Choose a Browser Page', () => {
 
       cy.findByRole('radio', { name: 'Chrome v1', checked: true }).as('chromeItem')
 
+      cy.withCtx((ctx, o) => {
+        o.sinon.stub(ctx.actions.project, 'launchProject')
+      })
+
       cy.contains('button', 'Start E2E Testing in Chrome').should('be.visible').click()
 
       cy.withCtx((ctx) => {