puppeteer 动态选择器返回多个对象答案

【问题标题】：puppeteer dynamic selector returning multiple objectspuppeteer 动态选择器返回多个对象
【发布时间】：2020-07-15 05:55:24
【问题描述】：

这就是我的 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。如图所示，所有这些元素都有动态类名。

我需要获取这 3 个 div 的值（如图所示的第一个块 - 标题，描述）

通过我尝试的代码，我得到了元素的集合，但不确定如何获取子对象的值。

【问题讨论】：

标签： javascript dom automated-tests puppeteer e2e-testing

【解决方案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)))

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

【讨论】：

【解决方案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>

【讨论】：

我认为我们不能直接访问 puppeteer 中的文档。据我所知，只能在评估中访问文档。
我认为您已经获得了nodes 和const nodes = Array.from(await page.$$(selector));。我要求用你的 puppeteer 替换我的代码行并试一试。
因 e.querySelectorAll('div') 失败