remove singleton instance from communicator and only bind message events once in the primary and per spec bridge. Forward all message events to the respective communicator instance, if available.

Author: AtofStryker

packages/driver/src/cypress.ts

@@ -37,7 +37,7 @@ import ProxyLogging from './cypress/proxy-logging'
 import * as $Events from './cypress/events'
 import $Keyboard from './cy/keyboard'
 import * as resolvers from './cypress/resolvers'
-import { PrimaryDomainCommunicator, PrimaryDomainCommunicatorFactory, SpecBridgeDomainCommunicator } from './multi-domain/communicator'
+import { PrimaryDomainCommunicator, SpecBridgeDomainCommunicator } from './multi-domain/communicator'
 
 const debug = debugFn('cypress:driver:cypress')
 
@@ -153,7 +153,7 @@ class $Cypress {
     this.Commands = null
     this.$autIframe = null
     this.onSpecReady = null
-    this.multiDomainCommunicator = PrimaryDomainCommunicatorFactory.create()
+    this.multiDomainCommunicator = new PrimaryDomainCommunicator()
     this.specBridgeCommunicator = new SpecBridgeDomainCommunicator()
     this.isMultiDomain = false
 

packages/driver/src/multi-domain/communicator.ts

@@ -6,25 +6,6 @@ import { preprocessForSerialization, reifyCrossDomainError } from '../util/seria
 const debug = debugFn('cypress:driver:multi-domain')
 
 const CROSS_DOMAIN_PREFIX = 'cross:domain:'
-let primaryDomainCommunicatorSingleton: PrimaryDomainCommunicator | null = null
-
-export class PrimaryDomainCommunicatorFactory {
-  static create () {
-    // There should only be one PrimaryDomainCommunicator per Cypress instance (Ex: primary domain, specbridge1, specbridge2, ...).
-    // Spec Bridges will create a PrimaryDomainCommunicator instance, but will never initialize the window.top message listener
-    // this means that methods that communicate through postMessage can send, but spec bridge PrimaryDomainCommunicator
-    // will never receive any events.
-    if (!primaryDomainCommunicatorSingleton) {
-      primaryDomainCommunicatorSingleton = new PrimaryDomainCommunicator()
-    }
-
-    // for the primary domain, the PrimaryDomainCommunicator needs to be a singleton.
-    // multiple PrimaryDomainCommunicator instances recreated on test refreshes/reloads cause dangling instances
-    // of the window.top message listener, stacking message events multiple times.
-    // The window.top instance does not change between test reloads, and we only need to bind it once
-    return primaryDomainCommunicatorSingleton
-  }
-}
 
 /**
  * Primary domain communicator. Responsible for sending/receiving events throughout
@@ -38,47 +19,41 @@ export class PrimaryDomainCommunicatorFactory {
  * @extends EventEmitter
  */
 export class PrimaryDomainCommunicator extends EventEmitter {
-  private windowReference: Window | undefined
   private crossDomainDriverWindows: {[key: string]: Window} = {}
   userInvocationStack?: string
 
   /**
-   * Initializes the event handler to receive messages from the spec bridge.
-   * @param {Window} win - a reference to the window object in the primary domain.
+   * The callback handler that receives messages from secondary domains.
+   * @param {MessageEvent.data} data - a reference to the MessageEvent.data sent through the postMessage event. See https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
+   * @param {MessageEvent.source} source - a reference to the MessageEvent.source sent through the postMessage event. See https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/source
    * @returns {Void}
    */
-  initialize (win: Window) {
-    if (this.windowReference) return
-
-    this.windowReference = win
-
-    this.windowReference.top?.addEventListener('message', ({ data, source }) => {
-      // currently used for tests, can be removed later
-      if (data?.actual) return
-
-      // check if message is cross domain and if so, feed the message into
-      // the cross domain bus with args and strip prefix
-      if (data?.event?.includes(CROSS_DOMAIN_PREFIX)) {
-        const messageName = data.event.replace(CROSS_DOMAIN_PREFIX, '')
-
-        // NOTE: need a special case here for 'bridge:ready'
-        // where we need to set the crossDomainDriverWindow to source to
-        // communicate back to the iframe
-        if (messageName === 'bridge:ready' && source) {
-          this.crossDomainDriverWindows[data.domain] = source as Window
-        }
+  onMessage ({ data, source }) {
+    // currently used for tests, can be removed later
+    if (data?.actual) return
+
+    // check if message is cross domain and if so, feed the message into
+    // the cross domain bus with args and strip prefix
+    if (data?.event?.includes(CROSS_DOMAIN_PREFIX)) {
+      const messageName = data.event.replace(CROSS_DOMAIN_PREFIX, '')
+
+      // NOTE: need a special case here for 'bridge:ready'
+      // where we need to set the crossDomainDriverWindow to source to
+      // communicate back to the iframe
+      if (messageName === 'bridge:ready' && source) {
+        this.crossDomainDriverWindows[data.domain] = source as Window
+      }
 
-        if (data?.data?.err) {
-          data.data.err = reifyCrossDomainError(data.data.err, this.userInvocationStack as string)
-        }
+      if (data?.data?.err) {
+        data.data.err = reifyCrossDomainError(data.data.err, this.userInvocationStack as string)
+      }
 
-        this.emit(messageName, data.data, data.domain)
+      this.emit(messageName, data.data, data.domain)
 
-        return
-      }
+      return
+    }
 
-      debug('Unexpected postMessage:', data)
-    }, false)
+    debug('Unexpected postMessage:', data)
   }
 
   /**
@@ -134,8 +109,6 @@ export class PrimaryDomainCommunicator extends EventEmitter {
  * @extends EventEmitter
  */
 export class SpecBridgeDomainCommunicator extends EventEmitter {
-  private windowReference
-
   private handleSubjectAndErr = (data: Cypress.ObjectLike = {}, send: (data: Cypress.ObjectLike) => void) => {
     let { subject, err, ...rest } = data
 
@@ -183,20 +156,14 @@ export class SpecBridgeDomainCommunicator extends EventEmitter {
   }
 
   /**
-   * Initializes the event handler to receive messages from the primary domain.
-   * @param {Window} win - a reference to the window object in the spec bridge/iframe.
+   * The callback handler that receives messages from the primary domain.
+   * @param {MessageEvent.data} data - a reference to the MessageEvent.data sent through the postMessage event. See https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
    * @returns {Void}
    */
-  initialize (win) {
-    if (this.windowReference) return
-
-    this.windowReference = win
-
-    this.windowReference.addEventListener('message', ({ data }) => {
-      if (!data) return
+  onMessage ({ data }) {
+    if (!data) return
 
-      this.emit(data.event, data.data)
-    }, false)
+    this.emit(data.event, data.data)
   }
 
   /**
@@ -209,7 +176,7 @@ export class SpecBridgeDomainCommunicator extends EventEmitter {
     if (options.syncGlobals) this.syncGlobalsToPrimary()
 
     this.handleSubjectAndErr(data, (data: Cypress.ObjectLike) => {
-      this.windowReference.top.postMessage({
+      window.top?.postMessage({
         event: `${CROSS_DOMAIN_PREFIX}${event}`,
         data,
         domain: document.domain,

packages/driver/src/multi-domain/cypress.ts

@@ -24,8 +24,6 @@ const createCypress = () => {
   // @ts-ignore
   const Cypress = window.Cypress = new $Cypress() as Cypress.Cypress
 
-  Cypress.specBridgeCommunicator.initialize(window)
-
   Cypress.specBridgeCommunicator.once('initialize:cypress', ({ config, env }) => {
     // eventually, setup will get called again on rerun and cy will get re-created
     setup(config, env)
@@ -166,4 +164,9 @@ const onBeforeAppWindowLoad = (Cypress: Cypress.Cypress, cy: $Cy) => (autWindow:
   })
 }
 
+// only bind the message handler one time when the spec bridge is created
+window.addEventListener('message', ({ data }) => {
+  Cypress?.specBridgeCommunicator.onMessage({ data })
+}, false)
+
 createCypress()

packages/runner-shared/src/event-manager.js

@@ -320,6 +320,12 @@ export const eventManager = {
       this._clearAllCookies()
       this._setUnload()
     })
+
+    // The window.top should not change between test reloads, and we only need to bind the message event once
+    // Forward all message events to the current instance of the multi-domain communicator
+    window.top?.addEventListener('message', ({ data, source }) => {
+      Cypress?.multiDomainCommunicator.onMessage({ data, source })
+    }, false)
   },
 
   start (config) {
@@ -512,8 +518,6 @@ export const eventManager = {
       }
     })
 
-    Cypress.multiDomainCommunicator.initialize(window)
-
     Cypress.on('test:before:run', (...args) => {
       Cypress.multiDomainCommunicator.toAllSpecBridges('test:before:run', ...args)
     })