question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ElementHandle click method get Error: Node is detached from document

See original GitHub issue

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: 1.10.0
  • Platform / OS version: Ubuntu 18.04.1 LTS
  • URLs (if applicable): -
  • Node.js version: v11.0.0

What steps will reproduce the problem?

Launch Code:

(async () => {
  const browser = await puppeteer.launch({
    userDataDir: `${__dirname}/../chromium`,
    args: [
      '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36'
    ],
    defaultViewport: {
      width: 1680,
      height: 1050,
    },
  });

  ...

Main Code:

export async function followersFollow(page: puppeteer.Page, counter: IFollowersLimit) {
  if (!( await page.$(selectors.profileFollowersButton))) {
    return;
  }

  await page.click(selectors.profileFollowersButton);
  await timeout(2000);

  const internalCounter: IFollowersLimit = { limit: 5 };
  await page.waitForSelector(selectors.profileFollowersWindow);
  await page.evaluate(() => {
    document!.querySelector('div.isgrP')!.scrollTop = document!.querySelector('div.isgrP')!.scrollHeight;
    document!.querySelector('div.isgrP')!.scrollTop = 0;
  })
  await timeout(2000);

  const profileFollowers = await page.$$(selectors.profileFollowersList);
  console.log('Count   : ', profileFollowers.length);
  for (const follower of profileFollowers) {
    if (!internalCounter.limit) {
      break;
    }

    const isFollowed: boolean = await page.evaluate(
      ($follower) => $follower.querySelector('button').textContent !== 'Follow',
      follower,
    );
    if (isFollowed) {
      continue;
    }


    const isFollowBack: boolean = await page.evaluate(
      ($follower) => $follower.querySelector('button').textContent === 'Follow Back',
      follower,
    );
    if (isFollowBack) {
      continue;
    }

    const content: string = await page.evaluate(
      ($follower) => $follower.querySelector('button').textContent,
      follower,
    );
    console.log(content);
    const button = await follower.$('button');
    if (!button) {
      continue;
    }
    const href: string = await page.evaluate(
     ($follower) => $follower.querySelector('a').href,
     follower
    );
    console.log('          ', href);
    await button.click(); // <==== THIS METHOD THROW ERROR
    await button.dispose();
    await timeout(2000);
    console.log('👍');
    await addUser(href);
    --internalCounter.limit;
    --counter.limit;
    await follower.dispose();
  }

What is the expected result?

Going through all the elements in the array of ElementHandle`s, for each of which need to find the button inside the element and click.

What happens instead?

Sometimes the whole cycle succeeds, sometimes I get an error:

Error: Node is detached from document
    at ElementHandle._scrollIntoViewIfNeeded (.../node_modules/puppeteer/lib/ExecutionContext.js:338:13)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
  -- ASYNC --
    at ElementHandle.<anonymous> (.../node_modules/puppeteer/lib/helper.js:144:27)
    at Object.followersFollow (.../dist/actions/follow.js:55:22)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

11reactions
cristighr1995commented, Jun 8, 2020

For me it worked to do this: await page.$eval(selectorString, elem => (elem as HTMLElement).click());

9reactions
atefBBcommented, Sep 6, 2019

@tarikbellamine I have the same issue, how did you solve it? (show me example code if you can 'cause I didn’t understand your description)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Looping through page links puppeteer doesn't return values ...
1 Answer 1 · That seems to work, however, it causes this error our error Error: Node is detached from document on the...
Read more >
Source code for pyppeteer.element_handle - GitHub Pages
ElementHandles are automatically disposed when their origin frame gets navigated. ... isConnected) return 'Node is detached from document'; if (element.
Read more >
ElementHandle class - Puppeteer
This method scrolls element into view if needed, and then uses Page.mouse to click in the center of the element. If the element...
Read more >
ElementHandle class - puppeteer library - Dart API - Pub.dev
This method scrolls element into view if needed, and then uses page.mouse to click in the center of the element. If the element...
Read more >
puppeteer.ElementHandle.click JavaScript and Node.js code ...
mouse to click in the center of the element. If the element is detached from DOM, the method throws an error.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found