[Bug]: waitForLoadState('networkidle') never resolves after a request followed by an iframe detach on an already-idle page #43879

Version

1.64.1 (the same logic is on main in packages/playwright-core/src/server/frames.ts)

Steps to reproduce

Save this as repro.mts in a folder with @playwright/test installed, then run node repro.mts:

import { createServer } from "node:http";
import { chromium } from "@playwright/test";

const server = createServer((request, response) => {
  if (request.url === "/data") return void setTimeout(() => response.end("ok"), 50);
  response.setHeader("content-type", "text/html");
  response.end(`<iframe srcdoc="<p>preview</p>"></iframe>`);
});
await new Promise<void>((resolve) => server.listen(0, resolve));
const { port } = server.address() as { port: number };

const attempt = async (removeIframe: boolean) => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(`http://localhost:${port}/`);
  await page.waitForLoadState("networkidle");
  await page.evaluate(() => fetch("/data").then((r) => r.text()));
  await page.waitForTimeout(700);
  if (removeIframe) await page.evaluate(() => document.querySelector("iframe")!.remove());
  const started = Date.now();
  const outcome = await page
    .waitForLoadState("networkidle", { timeout: 5_000 })
    .then(() => `resolved in ${Date.now() - started} ms`)
    .catch(() => "TIMED OUT after 5 s");
  await browser.close();
  return outcome;
};

console.log("fetch, no iframe change:    ", await attempt(false));
console.log("fetch, then iframe removed: ", await attempt(true));
server.close();

Expected behavior

Both waits resolve. The page has had no request in flight for well over 500 ms.

Actual behavior

fetch, no iframe change:     resolved in 0 ms
fetch, then iframe removed:  TIMED OUT after 5 s

After the iframe is removed, networkidle never fires again unless the page makes another request. In our test suite, this made waitForLoadState("networkidle") wait until the test timed out. It happened intermittently on a client-side route change that unmounted a srcdoc preview iframe.

Additional context

This is how we read the code in Frame (frames.ts):

1. The frame goes idle. networkidle is added to _firedLifecycleEvents, and _firedNetworkIdleSelf is true.
2. The fetch calls _stopNetworkIdleTimer, which sets _firedNetworkIdleSelf = false.
3. When the fetch finishes, _startNetworkIdleTimer returns early because _firedLifecycleEvents still has networkidle. So _firedNetworkIdleSelf stays false.
4. Removing the iframe triggers _recalculateNetworkIdle. It sees _firedNetworkIdleSelf === false and deletes networkidle from _firedLifecycleEvents.
5. No idle timer is running, so nothing adds networkidle back.

Any lifecycle recalculation would have the same effect after step 3, not just an iframe detach.

Waits straight after goto / reload aren't affected, because a new document resets the state. We've worked around it by waiting on goto / reload only, and by counting in-flight requests ourselves elsewhere.

Environment

OS: macOS 26.6.2 (arm64)
Node.js: 24.22.2
@playwright/test: 1.64.1
Browser: Chromium (bundled)