如何显示给定 div 的所有结果，而不仅仅是一个 - puppeter

Question

Excuse me, but the documentation is a little incomprehensible to me.

I use the argument:

const myDiv = await page.$$eval(".myDiv", myDiv => myDiv.textContent);

but the console.log will only return one result while the results for this div are >10.

How do I display them all?

edit// That's my code that I'm learning from

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('mypage');
  // await page.screenshot({path: 'example.png'});
  
  await page.waitForSelector(".myDiv");
  
  const myDiv = await page.$eval(".myDiv", myDiv => myDiv.textContent);
  
  console.log(myDiv);

  await browser.close();
})();

Answer 1

Since you did not provide more code, this answer is pretty opinionated and maybe doesn't solve your problem. But it shows you a way how to understand what is happening.

Exspecially in developement, it's very helpful to use a combination of page.exposeFunction() and page.evaluate() to see what is going on in the browser and also in node/puppeteer. Here is a draft which I hope it helps you to understand.

(async () => {
  function executedInNodeContext(result) {
    //this prints in the Node Console
    console.log(result);
  }

  function executedInBrowserContext() {
    console.log('Im in the Browser');
    const myDiv = [...document.querySelectorAll('.myDiv')];
    window.nameOfNodeFunction(myDiv);
  }

  // See the browser
  const browser = await puppeteer.launch({ headless: false });

  // Create a new page
  const page = await browser.newPage();

  // Callback in Node Context
  await page.exposeFunction('nameOfNodeFunction', executedInNodeContext);

  // Send puppeteer to a Url
  await page.goto('http://localhost/awesome/URL');

  // Function executed in the Browser on the given page
  await page.evaluate(executedInBrowserContext);
})();

Answer 2

You can use page.evaluate :

const myDiv = await page.evaluate(() => {
  const divs = Array.from(document.querySelectorAll('.myDiv'))
  return divs.map(d => d.textContent)
});

Function passed to page.evaluate will be serialized and sent to browser, so it is executed in browser context (not Node).

Answer 3

page.$$eval() sends in its callback an array with elements, so you need something like this to get all elements data:

const myDivs = await page.$$eval(".myDiv", divs => divs.map(div => div.textContent));