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

Question

对不起，文档对我来说有点难以理解。

我使用的论点：

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

但是 console.log 只会返回一个结果，而此 div 的结果 >10。

我如何显示它们？

编辑//这是我正在学习的代码

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

您可以使用page.evaluate：const myDiv = await page.evaluate(() => {  const divs = Array.from(document.querySelectorAll('.myDiv'))  return divs.map(d => d.textContent)});传递给的函数page.evaluate将被序列化并发送到浏览器，因此它在浏览器上下文（而不是节点）中执行。

Answer 2

由于您没有提供更多代码，因此这个答案非常自以为是，可能无法解决您的问题。但它向您展示了一种了解正在发生的事情的方法。特别是在开发过程中，结合使用page.exposeFunction()和page.evaluate()来查看浏览器以及节点/木偶操纵者中发生的事情非常有帮助。这是一个草稿，我希望它能帮助你理解。(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 3

page.$$eval()在其回调中发送一个包含元素的数组，因此您需要这样的东西来获取所有元素数据：const myDivs = await page.$$eval(".myDiv", divs => divs.map(div => div.textContent));