Puppeteer 獲取所有數據屬性值

Question

我的 html 文檔是

<div class="inner-column">
 <div data-thing="abc1"></div>
 <div data-thing="abc2"></div>
 <div data-thing="abc3"></div>
</div>

如何使用 class.inner-column 在 div 中獲取所有“數據事物”值（例如 ["abc1"、"abc2"、"abc3"]）？

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({width: 1440, height: 1200})
  await page.goto('https://www.example.com')

  const data = await page.content();

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

Answer 1

您可以像這樣使用page.$$eval函數：

const dataValues = await page.$$eval(
    '.inner-column div',
    divs => divs.map(div => div.dataset.thing)
);

解釋

page.$$eval函數的作用（引用上面鏈接的文檔）：

此方法在頁面內運行Array.from(document.querySelectorAll(selector))並將其作為第一個參數傳遞給pageFunction 。

如果pageFunction返回一個 Promise，那么page.$$eval將等待 promise 解析並返回它的值。

因此，它將首先查詢目標div，然后使用dataset屬性將div 映射到它們的data-*值。

Answer 2

您可以使用evaluate功能

const data = await page.evaluate(() => 
  Array.from(document.querySelectorAll(".inner-column DIV")).map(d => d.getAttribute("data-thing"))
)