test(e2e): Keep the bfcache reason tests working on Chromium 151+

Two assumptions in the bfcache app stopped holding on newer Chromium, and both traced back to
`unload`.

An unload listener still makes a page ineligible, but Chrome no longer hands out the
`unload-listener` reason for it, only the privacy-masked one. The test waited for both, so it
hung on a reason that never arrives. It now asserts the masked reason, which is what the
browser actually reports and which older versions reported too.

The child-frame test used an unload listener inside the iframe purely as a blocker, so it lost
its reason as well. It blocks with a held-up IndexedDB version upgrade instead, mirroring the
top-level botcher, which keeps the child-frame classification covered.

Author: logaretm

dev-packages/e2e-tests/test-applications/browser-bfcache/iframe.html

@@ -4,11 +4,23 @@
     <meta charset="UTF-8" />
     <title>BFCache E2E - iframe</title>
     <script>
-      // A same-origin child frame. With ?blocker=unload it registers an unload listener, which makes
-      // the *whole* embedding page bfcache-ineligible - the not-restored reason then comes from this
-      // child frame (frame: 'child').
-      if (new URLSearchParams(window.location.search).get('blocker') === 'unload') {
-        window.addEventListener('unload', () => {});
+      // A same-origin child frame. With ?blocker=indexeddb it holds up an IndexedDB version upgrade,
+      // which makes the *whole* embedding page bfcache-ineligible - the not-restored reason then
+      // comes from this child frame (frame: 'child'). Mirrors the top-level `indexeddb` botcher.
+      if (new URLSearchParams(window.location.search).get('blocker') === 'indexeddb') {
+        var dbName = 'bf_child_' + Math.random().toString(36).slice(2);
+        window.__idbBlocked = false;
+        var open1 = indexedDB.open(dbName, 1);
+        open1.addEventListener('upgradeneeded', function (event) {
+          event.target.result.createObjectStore('s');
+        });
+        open1.addEventListener('success', function (event) {
+          window.__db = event.target.result; // intentionally no `versionchange` handler
+          var open2 = indexedDB.open(dbName, 2);
+          open2.addEventListener('blocked', function () {
+            window.__idbBlocked = true;
+          });
+        });
       }
     </script>
   </head>

dev-packages/e2e-tests/test-applications/browser-bfcache/src/main.ts

@@ -35,7 +35,8 @@ window.addEventListener(
 const botch = new URLSearchParams(window.location.search).get('botch');
 
 if (botch === 'unload') {
-  // An `unload` listener is the canonical, version-stable bfcache blocker.
+  // An `unload` listener still makes the page ineligible, though the reason Chrome reports for it
+  // has changed across versions.
   window.addEventListener('unload', () => {});
 }
 
@@ -79,11 +80,11 @@ if (botch === 'indexeddb') {
   });
 }
 
-if (botch === 'iframe-clean' || botch === 'iframe-unload') {
-  // Embed a same-origin child frame. A clean child keeps the top page eligible (hit); a child with an
-  // unload listener makes the whole top page ineligible, and the reason comes from the child frame.
+if (botch === 'iframe-clean' || botch === 'iframe-blocked') {
+  // Embed a same-origin child frame. A clean child keeps the top page eligible (hit); a child that
+  // blocks makes the whole top page ineligible, and the reason comes from the child frame.
   const iframe = document.createElement('iframe');
-  iframe.src = botch === 'iframe-unload' ? '/iframe.html?blocker=unload' : '/iframe.html';
+  iframe.src = botch === 'iframe-blocked' ? '/iframe.html?blocker=indexeddb' : '/iframe.html';
   const w = window as unknown as { __iframeLoaded?: boolean };
   w.__iframeLoaded = false;
   iframe.addEventListener('load', () => {

dev-packages/e2e-tests/test-applications/browser-bfcache/tests/bfcache.test.ts

@@ -45,13 +45,9 @@ test('reports a hit on a genuine back/forward-cache restore', async ({ page }) =
 
 test('reports a miss with notRestoredReasons when an unload listener blocks bfcache', async ({ page }) => {
   const missPromise = waitForMetric(PROXY_SERVER_NAME, metric => isNavigation(metric, 'miss'));
-  const unloadReasonPromise = waitForMetric(
-    PROXY_SERVER_NAME,
-    metric =>
-      metric.name === 'browser.bfcache.not_restored' && attr(metric, 'browser.bfcache.reason') === 'unload-listener',
-  );
-  // Chrome reports a privacy-masked reason alongside the real one. It's a top-frame reason here, so
-  // the integration must frame it positionally (`top`) and pass the value through untouched.
+  // An unload listener still makes the page ineligible, but from Chromium 151 on the only reason
+  // Chrome hands out for it is the privacy-masked one. It's a top-frame reason, so the integration
+  // must frame it positionally (`top`) and pass the value through untouched.
   const maskedReasonPromise = waitForMetric(
     PROXY_SERVER_NAME,
     metric => metric.name === 'browser.bfcache.not_restored' && attr(metric, 'browser.bfcache.reason') === 'masked',
@@ -82,12 +78,9 @@ test('reports a miss with notRestoredReasons when an unload listener blocks bfca
   expect(attr(miss, 'browser.bfcache.not_restored_reason_count')).toBeGreaterThanOrEqual(1);
   expect(attr(miss, 'sentry.origin')).toBe(BFCACHE_ORIGIN);
 
-  const unloadReason = await unloadReasonPromise;
-  expect(attr(unloadReason, 'browser.bfcache.frame')).toBe('top');
-  expect(attr(unloadReason, 'sentry.origin')).toBe(BFCACHE_ORIGIN);
-
   const maskedReason = await maskedReasonPromise;
   expect(attr(maskedReason, 'browser.bfcache.frame')).toBe('top');
+  expect(attr(maskedReason, 'sentry.origin')).toBe(BFCACHE_ORIGIN);
 
   const reloadDuration = await reloadDurationPromise;
   expect(reloadDuration.type).toBe('distribution');
@@ -218,15 +211,23 @@ test('reports a child-frame reason when an ineligible iframe blocks the top page
     PROXY_SERVER_NAME,
     metric =>
       metric.name === 'browser.bfcache.not_restored' &&
-      attr(metric, 'browser.bfcache.reason') === 'unload-listener' &&
+      attr(metric, 'browser.bfcache.reason') === 'idbversionchangeevent' &&
       attr(metric, 'browser.bfcache.frame') === 'child',
   );
 
-  await page.goto('/?botch=iframe-unload');
+  await page.goto('/?botch=iframe-blocked');
   await page.waitForFunction(() => document.title === 'BFCache E2E - Page 1');
   await page.waitForFunction(() => (window as unknown as { __iframeLoaded?: boolean }).__iframeLoaded === true, {
     timeout: 5000,
   });
+  // Only proceed once the child frame's version upgrade is actually blocked.
+  await page.waitForFunction(
+    () => {
+      const frame = document.querySelector('iframe') as HTMLIFrameElement | null;
+      return (frame?.contentWindow as unknown as { __idbBlocked?: boolean } | undefined)?.__idbBlocked === true;
+    },
+    { timeout: 5000 },
+  );
 
   await page.click('#to-page-2');
   await page.waitForFunction(() => document.title === 'BFCache E2E - Page 2');