Как выбрать все дочерние элементы div с одним и тем же классом, используя Puppeteer?

Question

Я новичок в Puppeteer и пытаюсь получить textContent от двух div, использующих один и тот же класс.

<div class="post-item">
   <div class="post-item-info">
      <span class="post-item-status post-comment"></span>
      3
   </div>
   <div class="post-item-info">
      <span class="post-item-status post-vote"></span>
      5
   </div>
</div>

Результат, который я ожидаю, это вернуть массив [3,5].Мой текущий код ниже.

let postInfo = element.querySelector('.post-item-info');

Проблема в том, что он возвращает только первый.Пожалуйста, дайте мне знать, как это сделать.

Answer 1

Несколько кратких способов получения массива следующего текстового содержимого:

   const texts = await page.$$eval('.post-item-info',
     divs => divs.map(({ innerText }) => innerText));

    const texts = await page.evaluate(() =>
      [...document.querySelectorAll('.post-item-info'')].map(({ innerText }) => innerText));

Answer 2

Получите их как:

let elements = document.getElementsByClassName('post-item-info')

Возвращает массив, и вы можете зацикливаться на нем.Кроме того, вы можете увидеть этот вопрос Github для того же случая:

https://github.com/GoogleChrome/puppeteer/issues/461

Answer 3

Ваш селектор должен быть как const nodes = element.querySelectorAll('.post-item-info');.Затем, чтобы получить доступ к отдельным элементам в возвращенной коллекции, используйте традиционный цикл for, например

for(let i = 0; i < nodes.length; i++){
      const currentNode = nodes[i];
      // doStuffWith(currentNode);
    }

Answer 4

Ну, есть аналогичный метод для этого querySelectorAll ()

const nodes = document.querySelectorAll('.post-item-info')

Array.from(nodes).forEach(node => {
  // do stuff with node
})