Playwright: Frame was detached

The Frame object your code was using has been removed from the page. Frames include iframes and the main frame of a page. When an iframe element is deleted, replaced, or reloaded by its parent in a way that creates a new frame, every pending and future call on the old Frame object fails with this message. Navigation errors can show a related form, such as net::ERR_ABORTED; maybe frame was detached? or Navigating frame was detached!.

The pattern is the same as with element handles: you grabbed a reference to a specific frame instance (for example via page.frame() or elementHandle.contentFrame()), and the page swapped it out. Payment widgets, embedded login forms, and ad iframes are frequent offenders because they rebuild themselves.

What is not wrong: the selector inside the frame. The container disappeared underneath it.

// Fragile: Frame object can be detached by a re-render
const frame = page.frame({ url: /checkout/ });
await frame.fill('#card', '4242424242424242');

// Robust: re-resolved on every call
const card = page.frameLocator('iframe[title="Secure card input"]');
await card.getByLabel('Card number').fill('4242424242424242');

Never keep long-lived references to frames; address them by a stable attribute (title, name, src pattern) through frameLocator. Prefer locators throughout so both frames and elements are looked up fresh on each action. When a third-party widget is known to rebuild itself, assert on its final state before typing into it.