Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Puppeteer page.evaluate querySelectorAll return empty objects

I am trying out Puppeteer. This is a sample code that you can run on: https://try-puppeteer.appspot.com/

The problem is this code is returning an array of empty objects:

[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]

Am I making a mistake?

const browser = await puppeteer.launch();  const page = await browser.newPage(); await page.goto('https://reddit.com/');  let list = await page.evaluate(() => {   return Promise.resolve(Array.from(document.querySelectorAll('.title'))); });  console.log(JSON.stringify(list))  await browser.close(); 
like image 325
Abdullah Alsigar Avatar asked Sep 23 '17 09:09

Abdullah Alsigar


People also ask

What will querySelectorAll return?

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

What does Page Evaluate do in puppeteer?

Evaluates a function in the page's context and returns the result. If the function passed to page. evaluteHandle returns a Promise, the function will wait for the promise to resolve and return its value.

Does querySelectorAll return array?

The querySelectorAll method returns an array-like object called a node list. These data structures are referred to as “Array-like”, because they appear as an array, but can not be used with array methods like map and forEach .

What is the difference between the return values of querySelector and querySelectorAll?

The difference between these two is that querySelector returns a single element matching its selection criteria. querySelectorAll, on the other hand, returns all elements matching the search criteria in an iterable list.


1 Answers

The values returned from evaluate function should be json serializeable. https://github.com/GoogleChrome/puppeteer/issues/303#issuecomment-322919968

the solution is to extract the href values from the elements and return it.

 await this.page.evaluate((sel) => {         let elements = Array.from(document.querySelectorAll(sel));         let links = elements.map(element => {             return element.href         })         return links;     }, sel); 
like image 172
Abdullah Alsigar Avatar answered Sep 20 '22 01:09

Abdullah Alsigar