在 puppeteer 中获取元素的子元素答案

【问题标题】：Get the children of an element in puppeteer在 puppeteer 中获取元素的子元素
【发布时间】：2023-03-22 20:29:01
【问题描述】：

所以我的目标是计算一个 div 类中包含多个 div 的子类的数量；我通过选择 div 然后使用 children 属性来做到这一点，然后我用他们的 length 属性计算孩子并打印它。

为了实现我的目标，我正在尝试在 puppeteer 中实现此代码：

$('div[data-test-selector="center-window__content"]').children

（在 chrome 调试控制台上完美运行）

这是我转换后的代码：

let childrens = await page.evaluate(() => document.querySelector('div[data-test-selector="center-window__content"]'), i => Array.from(i.children));

但是，此表达式的计算结果为 undefined。

在他们为evaluate 提供的文档中说：

如果传递给 page.evaluate 的函数返回一个不可序列化的值，则 page.evaluate 解析为 undefined。

这里是这样吗？我该如何解决？

提前致谢。

编辑：

所以最后我认为 puppeteer 出于某种原因无法序列化 children 数组。

我最终使用了那个：

const notifs = await page.evaluate(() => {
            return (Array.from(document.querySelector('[data-test-selector="center-window__content"]').children).length);
})

感谢@TerryLennox 的帮助。

【问题讨论】：

标签： jquery node.js puppeteer

【解决方案1】：

你可以试试这个：

const children = await page.evaluate(() => {
    return (Array.from(document.querySelector('div[data-test-selector="center-window__content"]').children).length);
})
console.log("Result:", children);

对此进行测试

html

<html>
<div data-test-selector="center-window__content">
    some text
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
</div>
</html>

【讨论】：

感谢您的回复，但这会再次返回undefined。
嗯，很奇怪。我看到了一个 div 孩子的数组。我想知道有什么区别。我会发布我正在使用的 html！
所以这段代码：const children = await page.evaluate(() => { return (Array.from(document.querySelector('div[data-test-selector="centerwindow__content"]').children).length);}) 为我工作。
所以最后我认为 puppeteer 由于某种原因无法序列化 children 数组。我在您的帖子中添加了对我有用的编辑：D