Puppeteer: Node is detached from document

You called click(), hover(), scrollIntoView() or a similar method on an ElementHandle whose DOM node has been removed from the page. A handle refers to one specific node; if the page re-renders that part of the DOM, the replacement looks the same but is a different node, and the old handle is orphaned. This is Puppeteer's version of a stale element reference.

It is common when scraping lists with pagination or infinite scroll, and on React, Vue or Angular sites that re-render components after data loads. Code that collects handles with page.$$() and then clicks each one in a loop is especially prone to it, because the first click often re-renders the list.

What is not wrong: the selector still matches. Querying it again will usually find the new node immediately.

// Fragile
const buttons = await page.$$('.row button.expand');
for (const b of buttons) await b.click();

// Robust: re-query each time by index
const count = await page.$$eval('.row button.expand', els => els.length);
for (let i = 0; i < count; i++) {
  await page.locator(`.row:nth-of-type(${i + 1}) button.expand`).click();
}

Keep element handles short-lived and prefer selector-based or Locator API calls, which never hold onto a specific node. When iterating, iterate over data, not over handles. After any action that triggers a re-render, wait for a visible signal that the UI has settled before the next interaction.