fix: do not use unload events in Chromium from App Runner

cli/CHANGELOG.md

@@ -11,6 +11,10 @@ _Released 8/27/2024 (PENDING)_
 
 - Added a `CYPRESS_SKIP_VERIFY` flag to enable suppressing Cypress verification checks. Addresses [#22243](https://github.com/cypress-io/cypress/issues/22243).
 
+**Bugfixes:**
+
+- Correctly determines current browser family when choosing between `unload` and `pagehide` options in App Runner. Fixes [#29880](https://github.com/cypress-io/cypress/issues/29880).
+
 **Dependency Updates:**
 
 - Updated `detect-port` from `1.3.0` to `1.6.1`. Addressed in [#30038](https://github.com/cypress-io/cypress/pull/30038).

packages/app/src/main.ts

@@ -10,7 +10,8 @@ import { injectBundle } from './runner/injectBundle'
 import { createPinia } from './store'
 import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
-import { createWebsocket, getRunnerConfigFromWindow } from './runner'
+import { createWebsocket } from './runner'
+import { getRunnerConfigFromWindow } from './runner/get-runner-config-from-window'
 import { telemetry } from '@packages/telemetry/src/browser'
 
 // Grab the time just before loading config to include that in the cypress:app span

packages/app/src/runner/event-manager.ts

@@ -16,6 +16,7 @@ import { handlePausing } from './events/pausing'
 import { addTelemetryListeners } from './events/telemetry'
 import { telemetry } from '@packages/telemetry/src/browser'
 import { addCaptureProtocolListeners } from './events/capture-protocol'
+import { getRunnerConfigFromWindow } from './get-runner-config-from-window'
 
 export type CypressInCypressMochaEvent = Array<Array<string | Record<string, any>>>
 
@@ -347,7 +348,7 @@ export class EventManager {
     // While we must move to pagehide for Chromium, it does not work for our
     // needs in Firefox. Until that is addressed, only Chromium uses the pagehide
     // event as a proxy for AUT unloads.
-    const unloadEvent = this.isBrowser({ family: 'chromium' }) ? 'pagehide' : 'unload'
+    const unloadEvent = this.isBrowserFamily({ family: 'chromium' }) ? 'pagehide' : 'unload'
 
     $window.on(unloadEvent, (e) => {
       this._clearAllCookies()
@@ -400,10 +401,8 @@ export class EventManager {
     this._addListeners()
   }
 
-  isBrowser (browserName) {
-    if (!this.Cypress) return false
-
-    return this.Cypress.isBrowser(browserName)
+  isBrowserFamily (family) {
+    return getRunnerConfigFromWindow()?.browser?.family === family
   }
 
   initialize ($autIframe: JQuery<HTMLIFrameElement>, config: Record<string, any>) {

packages/app/src/runner/get-runner-config-from-window.ts

@@ -0,0 +1,5 @@
+import { decodeBase64Unicode } from '@packages/frontend-shared/src/utils/base64'
+
+export function getRunnerConfigFromWindow () {
+  return JSON.parse(decodeBase64Unicode(window.__CYPRESS_CONFIG__?.base64Config)) as Cypress.Config
+}

packages/app/src/runner/index.ts

@@ -23,10 +23,10 @@ import { IframeModel } from './iframe-model'
 import { AutIframe } from './aut-iframe'
 import { EventManager } from './event-manager'
 import { createWebsocket as createWebsocketIo } from '@packages/socket/lib/browser'
-import { decodeBase64Unicode } from '@packages/frontend-shared/src/utils/base64'
 import type { AutomationElementId } from '@packages/types'
 import { useSnapshotStore } from './snapshot-store'
 import { useStudioStore } from '../store/studio-store'
+import { getRunnerConfigFromWindow } from './get-runner-config-from-window'
 
 let _eventManager: EventManager | undefined
 
@@ -343,10 +343,6 @@ function runSpecE2E (config, spec: SpecFile) {
   getEventManager().initialize($autIframe, config)
 }
 
-export function getRunnerConfigFromWindow () {
-  return JSON.parse(decodeBase64Unicode(window.__CYPRESS_CONFIG__.base64Config)) as Cypress.Config
-}
-
 /**
  * Inject the global `UnifiedRunner` via a <script src="..."> tag.
  * which includes the event manager and AutIframe constructor.

packages/app/src/runner/reporter.ts

@@ -1,6 +1,7 @@
 import { getMobxRunnerStore, MobxRunnerStore, useSpecStore } from '../store'
 import { getReporterElement } from './utils'
-import { getEventManager, getRunnerConfigFromWindow } from '.'
+import { getEventManager } from '.'
+import { getRunnerConfigFromWindow } from './get-runner-config-from-window'
 import type { EventManager } from './event-manager'
 import { useRunnerUiStore } from '../store/runner-ui-store'
 

packages/app/src/specs/tree/useCollapsibleTree.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, Ref } from 'vue'
 import { computed } from 'vue'
 import { useToggle } from '@vueuse/core'
 import type { FoundSpec } from '@packages/types/src'
-import { getRunnerConfigFromWindow } from '../../runner'
+import { getRunnerConfigFromWindow } from '../../runner/get-runner-config-from-window'
 
 export type RawNode <T> = {
   id: string