ElementHandle click method get Error: Node is detached from document
See original GitHub issueSteps 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:
- Created 5 years ago
- Reactions:8
- Comments:12 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
For me it worked to do this:
await page.$eval(selectorString, elem => (elem as HTMLElement).click());
@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)