Puppeteer: How to get the contents of each element of a nodelist?

Question

I\'m trying to achieve something very trivial: Get a list of elements, and then do something with the innerText of each element.

const tweets = awai         


        

Answer 1

According to puppeteer docs here, $$ Does not return a nodelist, instead it returns a Promise of Array of ElementHandle. It's way different then a NodeList.

There are several ways to solve the problem.

1. Using built-in function for loops called page.$$eval

This method runs Array.from(document.querySelectorAll(selector)) within the page and passes it as the first argument to pageFunction.

So to get innerText is like following,

// Find all .tweet, and return innerText for each element, in a array.
const tweets = await page.$$eval('.tweet', element => element.innerText);

2. Pass the elementHandle to the page.evaluate

Whatever you get from await page.$$('.tweet') is an array of elementHandle. If you console, it will say JShandle or ElementHandle depending on the type.

Forget the hard explanation, it's easier to demonstrate.

// let's just call them tweetHandle 
const tweetHandles = await page.$$('.tweet');

// loop thru all handles
for(const tweethandle of tweetHandles){

   // pass the single handle below
   const singleTweet = await page.evaluate(el => el.innerText, tweethandle)

   // do whatever you want with the data
   console.log(singleTweet) 
}

Of course there are multiple ways to solve this problem, Grant Miller also answered few of them in the other answer.