Node is detached from document

GOAL: I currently am building a script that checks the last few messages in each conversation to see whether i can “mark as done” from a company account. The whole can loop through the list of people and get the messages but at soon as Its time to “mark a conversation as done” the next iteration of the loop breaks because of a “node is detached from the document”

• Puppeteer version: Chrome/83.0.4103.0
• Platform / OS version: Chromium: Version 83.0.4103.0 (Developer Build) (64-bit)
• URLs (if applicable): https://business.facebook.com/
• Node.js version: v13.12.0

What steps will reproduce the problem?

1. Log in to a FB business account
2. mark more than 2 Facebook conversations as done using a certain ID

Please include code that reproduces the issue.

for (let i = 0; i < section.length; i++) {
      try {
        await section[i].click();
        await page.waitForSelector('._suc._su6._5bpf');
        await page.$eval('._suc._su6._5bpf', form => form.click() ); // Here is where the issue happens
  } catch (err) {
    if ((err.message == 'Node is either not visible or not an HTMLElement' ||
      err.message == 'Node is detached from document')) {
        delay(2000);
    } else {
      stop = true;
    }
    console.log(Error(err), err.message, err.number);
  }
}

[Screenshots] This selector will only have one occurrence for each page you are on so the ('._suc._su6._5bpf') only has once occurrence. until the conversation moves to another person in the list like this: as it iterates:

What is the expected result?

I expect the for loop to continue checking the conversations

What happens instead?

Error: Error: Node is detached from document at /Users/mahirhiro/headless-chrome/index.js:61:17 …

[KevinHCH]

I had the same problem, the error was the element was available inside the HTML, but not was available for puppeter, because puppeteer needs to “see” or “needs to have something visible” to touch it or click it. The solution was to click through HTML instead of puppeter

//puppeteer handler
await row_element.click()

//html handler (solution)
await page.evaluate((element) => {
  element.click()
}, row_element)

[mahirhiro]

@t1a2l I couldn’t find a fix using puppeteer so I switched to selenium haha.