Puppeteer click on div is executed but does not open div in browser

Viewed 36

I would like to open a div container with Puppeteer. The click event fires, but the div does not open.

This works in Chromes developer tools to open the div container. document.documentElement.querySelectorAll("div[role=feed]").item(0).childNodes[5].querySelector("div[dir=auto]").querySelector("div[role=button]").click()

So I used the query above to implement it in my Puppeteer tool. To check if the click was executed, I added an event listener. The click is executed successfully and the event of the click listener is fired, but the div container does not open in the browser.

let a = (new JSDOM(feed)).window.document.documentElement.querySelectorAll("div[role=feed]").item(0).childNodes[currentPostCount + 1]
let b = a.querySelector("div[dir=auto]")
let c = b.querySelector("div[role=button]")
c.addEventListener('click', function () {
  console.log('It was clicked!');
})
c.click()
const app = express()
const port = 3000
app.listen(port, async () => {
    await initBrowser()
    return console.log(`Express is listening at http://localhost:${port}`)
})

const initBrowser = async () => {
    const browser = await puppeteer.launch({
        defaultViewport: null,
        headless: false
    })

    const incognitoContext = await browser.createIncognitoBrowserContext();
    page = await incognitoContext.newPage();
    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3419.0 Safari/537.36');

    await page.viewport({
        width: 1920,
        height: 1080
    })

    await page.goto(url)

    await humanizerType('input[id="email"]', profile['profiles'][0]["email"])
    await humanizerType('input[id="pass"]', profile['profiles'][0]["password"])
    await page.waitForSelector('button[name="login"]')
    await page.click('button[name="login"]')

    // Start group automation
    await page.waitForNavigation()

    for (const groupId of profile.profiles[0].groupIds) {

        await page.goto(`${groupId}`)

        let postCount = await page.$eval('div[role=feed]', el => el.childElementCount)
        while (postCount < toObservedGroupPosts) {
            await page.evaluate(_ => {
                window.scrollBy(0, 5000);
            });
            postCount = await page.$eval('div[role=feed]', el => el.childElementCount)
        }

        const feed = await page.$eval('div[role=feed]', el => el.outerHTML)

        let commentedPosts = 0
        let currentPostCount = 0

        while (commentedPosts < writeDreamInterpretationsPerGroup && currentPostCount < postCount) {

            log.meta.date = new Date().toISOString()
            log.meta.isRelevant = false
            log.meta.isError = false

            let post = (new JSDOM(feed)).window.document.documentElement.querySelectorAll("div[role=feed]").item(0).childNodes[currentPostCount + 1]
            log.post.groupId = groupId

            let content = post.querySelector("div[dir=auto][class]").textContent.toLowerCase()

            /** START CLICK ACTION **/
            if (content.includes('mehr anzeigen')) {
                let a = (new JSDOM(feed)).window.document.documentElement.querySelectorAll("div[role=feed]").item(0).childNodes[currentPostCount + 1]
                let b = a.querySelector("div[dir=auto]")
                let c = b.querySelector("div[role=button]")
                c.addEventListener('click', function () {
                    console.log('It was clicked!');
                })
                c.click()
            }
            /** END CLICK ACTION **/

            log.post.content = content

            let user = post.querySelector("h2 span a").textContent
            log.post.user = user

            let date = `${new Date().getFullYear()}-${formatMonth(post.textContent.match(dateRegex)[0].match(monthRegex)[0])}-${post.textContent.match(dateRegex)[0].match(dayRegex)[0]}T${post.textContent.match(timeRegex)[0]}:00.000Z`
            log.post.postedAt = date

            // Perform keyword list
            for (const keyword of keywords.whitelist) {
                if (content.includes(keyword)) {
                    log.post.keywordsInWhitelist.push(keyword)
                    log.meta.isRelevant = true
                }
            }

            for (const keyword of keywords.blacklist) {
                if (content.includes(keyword)) {
                    log.post.keywordsInBlacklist.push(keyword)
                    log.meta.isRelevant = false
                }
            }

                commentedPosts++;
            }

            currentPostCount++;
        }

    }
}
1 Answers

As mentioned in the comments below I used page.evaluate to run client-side JS. It took me some time to figure out how to submit parameters. See below:


await page.evaluate((currentPostCount) => {
  let a = document.documentElement.querySelectorAll("div[role=feed]").item(0).childNodes[currentPostCount + 1]
  let b = a.querySelector("div[data-visualcompletion=ignore-dynamic]").firstChild.firstChild
  b.querySelectorAll("div:nth-child(1)").item(0).childNodes[1].querySelector("div[data-visualcompletion]").click()
}, currentPostCount);
Related