如何顯示給定 div 的所有結果，而不僅僅是一個 - puppeter

Question

對不起，但文檔對我來說有點難以理解。

我使用的論點：

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

但是當這個 div 的結果大於 10 時，console.log 只會返回一個結果。

我如何將它們全部顯示出來？

編輯//這是我正在學習的代碼

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.exposeFunction()和page.evaluate()來查看瀏覽器以及節點/puppeteer 中發生了什么非常有幫助。 這是一個草稿，希望能幫助你理解。

(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

您可以使用page.evaluate ：

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

傳遞給 page.evaluate 的page.evaluate將被序列化並發送到瀏覽器，因此它在瀏覽器上下文（而不是 Node）中執行。

Answer 3

page.$$eval()在其回調中發送一個包含元素的數組，因此您需要這樣的東西來獲取所有元素數據：

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