chore: fix runtime error when service worker container is unavailable (…

…#28678)

* chore: fix runtime error when service worker container is unavailable

* fix flake

packages/server/lib/browsers/utils.ts

@@ -434,32 +434,36 @@ const initializeCDP = async (criClient: CriClient, automation: Automation) => {
 }
 
 const overrideServiceWorkerRegistration = (binding) => {
-  const oldRegister = window.ServiceWorkerContainer.prototype.register
+  // The service worker container won't be available in different situations (like in the placeholder iframes we create
+  // in open mode). So only override the register function if it exists.
+  if (window.ServiceWorkerContainer) {
+    const oldRegister = window.ServiceWorkerContainer.prototype.register
 
-  window.ServiceWorkerContainer.prototype.register = function (scriptURL, options) {
-    const anchor = document.createElement('a')
+    window.ServiceWorkerContainer.prototype.register = function (scriptURL, options) {
+      const anchor = document.createElement('a')
 
-    let resolvedHref: URL
+      let resolvedHref: URL
 
-    if (typeof scriptURL === 'string') {
-      anchor.setAttribute('href', scriptURL)
-      resolvedHref = new URL(anchor.href)
-    } else {
-      resolvedHref = scriptURL
-    }
+      if (typeof scriptURL === 'string') {
+        anchor.setAttribute('href', scriptURL)
+        resolvedHref = new URL(anchor.href)
+      } else {
+        resolvedHref = scriptURL
+      }
 
-    anchor.remove()
-    const resolvedUrl = `${resolvedHref.origin}${resolvedHref.pathname}`
+      anchor.remove()
+      const resolvedUrl = `${resolvedHref.origin}${resolvedHref.pathname}`
 
-    const serviceWorkerRegistrationEvent = {
-      type: 'service-worker-registration',
-      scriptURL: resolvedUrl,
-      initiatorURL: window.location.href,
-    }
+      const serviceWorkerRegistrationEvent = {
+        type: 'service-worker-registration',
+        scriptURL: resolvedUrl,
+        initiatorURL: window.location.href,
+      }
 
-    binding(JSON.stringify(serviceWorkerRegistrationEvent))
+      binding(JSON.stringify(serviceWorkerRegistrationEvent))
 
-    return oldRegister.apply(this, [scriptURL, options])
+      return oldRegister.apply(this, [scriptURL, options])
+    }
   }
 }
 

system-tests/lib/protocol-stubs/protocolStubServiceWorker.ts

@@ -23,6 +23,7 @@ export class AppCaptureProtocol implements AppCaptureProtocolInterface {
     numberOfResponseStreamReceivedEvents: 0,
     correlatedUrls: {},
     multipleNetworkRequestEventsForSameRequestId: false,
+    exceptionThrown: false,
   }
   private idToUrlAndFrameMap = new Map<string, URLAndFrame>()
   private currentRequestWillBeSent: (event) => void
@@ -63,6 +64,9 @@ export class AppCaptureProtocol implements AppCaptureProtocolInterface {
     }
 
     cdpClient.on('Network.requestWillBeSent', this.currentRequestWillBeSent)
+    cdpClient.on('Runtime.exceptionThrown', (event) => {
+      this.events.exceptionThrown = true
+    })
   }
 
   addRunnables = (runnables) => {

system-tests/projects/e2e/cypress/e2e/service_worker.cy.js

@@ -1,6 +1,13 @@
 const swReq = (win) => {
   return new Promise((resolve) => {
-    win.addEventListener('service-worker:ready', () => {
+    win.addEventListener('service-worker:ready', (event) => {
+      expect(event.detail).to.deep.equal({
+        example: {
+          foo: 'bar',
+        },
+        cached: 'this response will be used by service worker',
+      })
+
       resolve(win)
     })
   })

system-tests/projects/e2e/service-worker-assets/scope/load.js

@@ -1,8 +1,15 @@
 navigator.serviceWorker?.register('/service-worker-assets/scope/service-worker.js')
 
 navigator.serviceWorker?.ready.then(async () => {
-  await fetch('/service-worker-assets/example.json')
-  await fetch('/service-worker-assets/scope/cached-service-worker')
+  const exampleResponse = await fetch('/service-worker-assets/example.json')
+  const example = await exampleResponse.json()
+  const cachedServiceWorkerResults = await fetch('/service-worker-assets/scope/cached-service-worker')
+  const cached = await cachedServiceWorkerResults.text()
 
-  window.dispatchEvent(new Event('service-worker:ready'))
+  window.dispatchEvent(new CustomEvent('service-worker:ready', {
+    detail: {
+      example,
+      cached,
+    },
+  }))
 })

system-tests/test/service_worker_protocol_spec.js

@@ -30,6 +30,9 @@ describe('capture-protocol', () => {
         return systemTests.exec(this, {
           key: 'f858a2bc-b469-4e48-be67-0876339ee7e1',
           project: 'protocol',
+          // Here we are testing that service worker and non-service worker specs can intermingle properly
+          // Also, protocol.cy.js is not secure which will cause window.ServiceWorkerContainer to not be available
+          // in the browser. We test that no exceptions are thrown when this happens.
           spec: 'protocol.cy.js,service-worker.cy.js',
           record: true,
           expectedExitCode: 0,
@@ -49,6 +52,8 @@ describe('capture-protocol', () => {
             'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/load.js': ['frame id'],
             'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/service_worker.html': ['frame id', 'no frame id', 'no frame id'],
           })
+
+          expect(parsedProtocolEvents.exceptionThrown).to.be.false
         })
       })
     })