javascript - 返回多个对象的 puppeteer 动态选择器

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

我需要获取这 3 个 div 的值(如第一个 block 中所示的图像 - 标题、描述)

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

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)))

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