test(browser): Cover the IndexedDB versionchange bfcache blocker

A plain open IndexedDB connection (and even an in-flight transaction) no
longer blocks bfcache in current Chrome, contrary to web.dev's list. The
condition that still blocks is a connection holding up a version upgrade,
which yields an `idbversionchangeevent` reason. Add a deterministic e2e
case for it and document how real Chrome diverges from the article.

Author: logaretm

dev-packages/e2e-tests/test-applications/browser-bfcache/README.md

@@ -17,8 +17,17 @@ Why this needs its own app rather than living in `browser-integration-tests`:
 - **Renderer-initiated navigation.** Restores are triggered with `history.back()` from the page;
   Playwright's CDP `goBack` bypasses bfcache.
 
-Blocker cases are version-sensitive (the pinned Chromium comes from the Playwright version):
-`unload` is a stable blocker; `Cache-Control: no-store` no longer blocks (CCNS bfcache landed); an
-open WebSocket blocks only before Chrome 149, so that assertion is gated on the browser version.
+Blocker cases are version-sensitive (the pinned Chromium comes from the Playwright version) and real
+Chrome is more permissive than web.dev's blocker list suggests. Verified against the pinned Chrome:
+
+- `unload` listener: blocks (stable across versions). Reason `unload-listener` (plus a `masked` one).
+- Open WebSocket: blocks only before Chrome 149, so that assertion is gated on the browser version.
+- IndexedDB: a plain open connection and even an in-flight transaction do NOT block; only a
+  connection holding up a version upgrade does (reason `idbversionchangeevent`).
+- `Cache-Control: no-store` and `beforeunload` no longer block.
+
+Reason extraction/classification (top/child/masked frames, nesting, caps) is exhaustively covered by
+the unit test at `packages/browser/test/integrations/bfcache.test.ts`; this app verifies the real
+end-to-end hit/miss + reason path for the deterministic blockers above.
 
 If other tests later fit these same constraints, this app can be renamed to something broader.

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

@@ -41,3 +41,25 @@ if (botch === 'websocket') {
   });
   w.__ws = ws;
 }
+
+if (botch === 'indexeddb') {
+  // A plain open IndexedDB connection (or even an in-flight transaction) does NOT block bfcache in
+  // current Chrome. What still blocks is a connection holding up a version upgrade: open v1 without
+  // closing it on `versionchange`, then request v2 - the upgrade is blocked and the page holds it up.
+  // A fresh db name per load avoids cross-run persistence.
+  const dbName = `bf_${Math.random().toString(36).slice(2)}`;
+  const w = window as unknown as { __idbBlocked?: boolean; __db?: IDBDatabase };
+  w.__idbBlocked = false;
+
+  const open1 = indexedDB.open(dbName, 1);
+  open1.addEventListener('upgradeneeded', event => {
+    (event.target as IDBOpenDBRequest).result.createObjectStore('s');
+  });
+  open1.addEventListener('success', event => {
+    w.__db = (event.target as IDBOpenDBRequest).result; // intentionally no `versionchange` handler
+    const open2 = indexedDB.open(dbName, 2);
+    open2.addEventListener('blocked', () => {
+      w.__idbBlocked = true;
+    });
+  });
+}

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

@@ -127,6 +127,36 @@ test('reports a miss for an open WebSocket on Chrome < 149 (a hit from 149 on)',
   }
 });
 
+test('reports a miss with an idbversionchangeevent reason when a connection blocks an upgrade', async ({ page }) => {
+  const missPromise = waitForMetric(PROXY_SERVER_NAME, metric => isNavigation(metric, 'miss'));
+  const reasonPromise = waitForMetric(
+    PROXY_SERVER_NAME,
+    metric =>
+      metric.name === 'browser.bfcache.not_restored' &&
+      attr(metric, 'browser.bfcache.reason') === 'idbversionchangeevent',
+  );
+
+  await page.goto('/?botch=indexeddb');
+  await page.waitForFunction(() => document.title === 'BFCache E2E - Page 1');
+  // Only proceed once the version upgrade is actually blocked by the open connection.
+  await page.waitForFunction(() => (window as unknown as { __idbBlocked?: boolean }).__idbBlocked === true, {
+    timeout: 5000,
+  });
+
+  await page.click('#to-page-2');
+  await page.waitForFunction(() => document.title === 'BFCache E2E - Page 2');
+  await page.waitForTimeout(500);
+
+  await page.evaluate(() => history.back());
+
+  const miss = await missPromise;
+  expect(miss.value).toBe(1);
+  expect(attr(miss, 'browser.bfcache.navigation_type')).toBe('back-forward');
+
+  const reason = await reasonPromise;
+  expect(attr(reason, 'browser.bfcache.frame')).toBe('top');
+});
+
 test('does not treat an ordinary forward navigation as a restore', async ({ page }) => {
   await page.goto('/');
   await page.waitForFunction(() => document.title === 'BFCache E2E - Page 1');