Как очистить список <div>с помощью кукловода

Question

Я ищу способ эффективно обработать информацию, отформатированную следующим образом, с помощью puppeteer. Предположим, у меня есть список вещей на веб-сайте, разделенный следующим образом:

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

Как я могу получить информацию об именах (Имя 1, Имя 2 и Имя 3?

Я пытался вписать их в объект, чтобы потом преобразовать в массив, но я все еще не уверен, как подойтиит.

const listOfStuff = document.getElementById('list').getElementsByClassName('itemResult')

Answer 1

Я думаю, не так уж много общего с puppeteer API. В современных браузерах (ES6) преобразование в массив элегантно, а затем просто отображает его. Обратите внимание, я предполагал, что nameToRetrieve появляется только в материалах, которые вы хотите получить, поэтому нет необходимости получать "list".

var names = Array.from(document.getElementsByClassName("nameToRetrieve")).map(x => x.innerHTML);
console.log(names)

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

Answer 2

Существует специальный удобный метод page.$$eval для этой задачи в кукловоде:

let result = await page.$$eval('.nameToRetrieve', names => names.map(name => name.textContent));
console.log(result);

Этот метод запускает Array.from (document.querySelectorAll (selector))внутри страницы и передает его в качестве первого аргумента функции pageFunction.

Результат будет:

[ ' Name 1 ', ' Name 2 ', ' Name 3 ' ]