puppeteer 动态选择器返回多个 objects

Question

这就是我的 DOM 树的样子。我使用的 puppeteer 代码如下所示。

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

在DOM结构中，“SubscriptionBilling_tierInclusion__”重复多次，里面嵌套了3个div。如图所示，所有这些元素都具有动态 class 名称。

我需要获取这 3 个 div 的值（如第一块中的图像所示 - 标题、说明）

使用我尝试过的代码，我得到了 collection 个元素，但不确定如何获取 child objects.

的值

Answer 1

您可以尝试这样的操作。

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>

Answer 2

page.$$ 解析为 ElementHandle 数组，因此 Array.from 是多余的。您可以使用元素的 children 属性并获得前三个 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)))

如果你需要puppeteer上下文中的节点，你可以使用evaluateHandle。

puppeteer 动态选择器返回多个 objects

puppeteer dynamic selector returning multiple objects

javascript

dom

automated-tests

e2e-testing

puppeteer