Puppeteer detached frame errors: causes and safe recovery

The frame being used was removed or replaced.

Error message

Frame detached.

How this error happens

An iframe handle stays associated with its original frame. Removing the iframe detaches that frame; a replacement iframe is a different frame even if it has the same name.

The snippets use an open Puppeteer page named page.

await page.setContent(
    '<iframe name="result" srcdoc="<p id=message>Old result</p>"></iframe>'
);

const iframe = await page.$('iframe[name="result"]');
const staleFrame = await iframe.contentFrame();

await page.$eval("iframe", (element) => {
    element.remove();
});

await staleFrame.evaluate(() => {
    return document.querySelector("#message").textContent;
});

How to fix

Wait for the replacement iframe and get its current frame before reading the result.

await page.setContent(
    '<iframe name="result" srcdoc="<p id=message>New result</p>"></iframe>'
);

const iframe = await page.waitForSelector(
    'iframe[name="result"]'
);

const currentFrame = await iframe.contentFrame();

await currentFrame.waitForSelector(
    "#message"
);

const message = await currentFrame.$eval(
    "#message",
    (element) => element.textContent
);

console.log(message);

Things to keep in mind

Related messages include “Navigating frame was detached” and “Attempted to use detached Frame.” Their wording depends on the operation. Reacquiring a frame does not make a previously submitted payment or form safe to repeat.

All Puppeteer errors