Playwright: Element is not attached to the DOM

You are holding a handle to a specific DOM node, and that node has since been removed from the document. Playwright cannot click, fill or read something that is no longer on the page, so the call fails. This is Playwright's equivalent of Selenium's stale element error.

It occurs with ElementHandle objects, which you get from page.$(), page.$$(), page.waitForSelector() or locator.elementHandle(). A handle points at one node forever; when a framework such as React or Vue re-renders a list, it may replace that node with an identical-looking new one, and your handle is left pointing at the old one.

Locators do not have this problem: a Locator re-queries the page on every action, and if the element is detached mid-action Playwright logs element was detached from the DOM, retrying and tries again. That is why the official docs discourage element handles.

// Fragile: handles go stale when the list re-renders
const rows = await page.$$('.todo-item');
for (const row of rows) await row.click();

// Robust: locator re-queries every time
const items = page.locator('.todo-item');
const n = await items.count();
for (let i = 0; i < n; i++) {
  await items.nth(i).click();
}

Adopt locators everywhere and lint against page.$, page.$$ and elementHandle in new code. Locators carry the selector rather than the node, so re-renders are invisible to your script. When a step mutates the list you are iterating, iterate over stable identifiers (text, IDs) instead of positions.