fix: do not use unload events in Chromium from App Runner (#30061)

* correctly determine current browser family from cy config in app event manager

* changelog

* rm unnecessary ts-ignore

* add type declaration to catch improper params to isBrowserFamily

* add check for msMatchesSelector so jquery does not add unload listener in chrome
add check for msMatchesSelector in jquery patch so unload is only added in ie

* run windows workflow on this branch

---------

Co-authored-by: Jennifer Shehane <[email protected]>

Author: cacieprins

.circleci/workflows.yml

@@ -76,7 +76,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'fix/8599', << pipeline.git.branch >> ]
+    - equal: [ 'cacie/29880/unload-in-chromium', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>

cli/CHANGELOG.md

@@ -20,6 +20,10 @@ _Released 8/27/2024 (PENDING)_
 
 - Fixed an issue where files outside the Cypress project directory were not calculating the bundle output path correctly for the `file:preprocessor`. Addresses [#8599](https://github.com/cypress-io/cypress/issues/8599).
 
+**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('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: string) {
+    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

packages/driver/patches/jquery+3.4.1.dev.patch

@@ -89,7 +89,7 @@ index 773ad95..84ca2f6 100644
 +	// IE/Edge sometimes throw a "Permission denied" error when strict-comparing
 +	// two documents; shallow comparisons work.
 +	// eslint-disable-next-line eqeqeq
-+	if ( preferredDoc != document &&
++	if ( docElem.msMatchesSelector && preferredDoc != document &&
 +		( subWindow = document.defaultView ) && subWindow.top !== subWindow ) {
 
 -		// Support: IE 11, Edge