Кукловод Получить все значения атрибутов данных

Question

Мой HTML документ

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

Как я могу получить все значения "data-thing" (например, ["abc1", "abc2", "abc3"]) внутри div с классом .inner-колонна?

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

Вы можете использовать страницу . $$ 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 вернет Обещание, то page.$$eval будет ждать разрешения обещания и вернет его значение.

Поэтому он сначала запросит целевые элементы div, а затем отобразит их в значение data-*, используя свойство dataset .

Answer 2

Вы можете использовать функцию evaluate

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