Collect elements by class name and then click each one - Puppeteer

Richlewis picture Richlewis · Feb 7, 2018 · Viewed 36.3k times · Source

Using Puppeteer, I would like to get all the elements on a page with a particular class name and then loop through and click each one.

Using jQuery, I can achieve this with:

var elements = $("a.showGoals").toArray();

for (i = 0; i < elements.length; i++) {
  $(elements[i]).click();
}

How would I achieve this using Puppeteer?

Update

Tried out Chridam's answer below, but I couldn't get it to work (though the answer was helpful, so thanks due there), so I tried the following and this works:

 await page.evaluate(() => {
   let elements = $('a.showGoals').toArray();
   for (i = 0; i < elements.length; i++) {
     $(elements[i]).click();
   }
});

Answer

chridam picture chridam · Feb 7, 2018

Use page.evaluate to execute JS:

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.evaluate(() => {
        let elements = document.getElementsByClassName('showGoals');
        for (let element of elements)
            element.click();
    });
    // browser.close();
});