кукольный динамик c селектор, возвращающий несколько объектов

Question

Так выглядит мое дерево DOM. Код кукловода, который я использую, выглядит следующим образом.

  const selector = '[class^="SubscriptionBilling_tierInclusion__"]';
  const nodes = Array.from(await page.$$(selector));
  const nodeList = Array.from(nodes).map(element => element);

В структуре DOM « SubscriptionBilling_tierInclusion __ » повторяется многократно и имеет в себе 3 деления. Все эти элементы имеют имена классов Dynami c, как показано на рисунке.

Мне нужно получить значения этих 3-х элементов (как показано на рисунке в первом блоке - HEADING, DESCRIPTION)

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

Answer 1

page.$$ разрешить в массив ElementHandle, поэтому Array.from является избыточным. Вы можете использовать children свойство элемента и получить первые три дочерних innerText следующим образом:

const values = await page.$$eval('[class^="SubscriptionBilling_tierInclusion__"]', elements => elements.map(el => [...el.children].filter((el, index) => index < 3).map(el => el.innerText)))

Если вам нужны узлы в контексте кукловода, вы можете использовать evaluateHandle .

Answer 2

Вы можете попробовать что-то вроде этого.

const selector = '[class^="SubscriptionBilling_tierInclusion__"]';
const nodes = document.querySelectorAll(selector); // Replace this JS code with Puppeteer's
const nodeList = Array.from(nodes).map(element => element);
const ChildNodesVal = [];
console.log(nodeList);
nodeList.forEach((e,i)=>
{
    ChildNodesVal[i] = [];
    e.querySelectorAll('div').forEach(child => ChildNodesVal[i].push(child.textContent))
});
console.log(ChildNodesVal);

<div class="SubscriptionBilling_tierInclusion__">
  <div class="first1">1</div>
  <div class="first2">2</div>
  <div class="first3">3</div>
</div>
<div class="SubscriptionBilling_tierInclusion__">
  <div class="first4">4</div>
  <div class="first5">5</div>
  <div class="first6">6</div>
</div>