【发布时间】：2021-08-06 22:51:13
【问题描述】：
已解决但无法将自己的答案标记为已解决。
我们正在尝试返回 Puppeteer 中“body”选择器的子元素。
以下代码有效并返回 div 的内部文本：
const page = await browser.newPage();
await page.goto(url);
await page.waitForSelector('body');
const children = await page.$eval('body', el => el.innerText)
console.log(children)
但是，当我们将 await page.$eval 更改为此时，它会返回 undefined。
const children = await page.$eval('body', el => el.children)
我们缺少什么吗？
为了添加上下文，我们的最终目标是使用 Puppeteer 抓取 React 应用程序并渲染纤维树。
构建树后，我们希望使用 D3 对其进行渲染。目标是渲染 React 应用程序本身，然后对其进行抓取，然后将纤维树可视化，类似于 Chrome 开发工具。我们从ReactION 获得了使用 Puppeteer 的灵感。为学习目的重新发明轮子。
await page.$eval('body', el => el.children) 的目的是获取子元素的数组，以便我们可以搜索 _reactRootContainer 属性。
我们目前正在尝试以下变体，但收到的是Object reference chain is too long。
const bodyHandle = await page.$('#root');
const result = await page.evaluateHandle((e) => e.children, bodyHandle);
console.log(result.jsonValue());
【问题讨论】：
-
@ggorlen，我们正在尝试访问这些子元素中的 _reactRootContainer 属性，不幸的是，它不适用于您发布的链接，因为我认为它不是可序列化的。我们正在探索 vsemozhebuty 的建议，但还没有成功。
-
您的问题中没有提到这一点，但是 vsemozhebuty 和链接解释了您的问题中询问的现象。如果某些东西是可序列化的，它可以被返回，如果不是，你会得到未定义的。如果您的实际用例比获取
.innerText更复杂，请描述它以避免xy problem。 -
我已经编辑了，谢谢。
-
谢谢，这个用例与返回
innerHTML根本不同，因为它是可序列化的，所以很容易。 React Fiber 不是可序列化的，具有状态的高度复杂的对象，因此据我所知，您尝试做的事情可能是不可能的。一旦你构建了 React 纤程树，你希望实现什么？正如上面的 XY 问题链接中所述，这似乎是一件奇怪的事情。如果您正在做某种测试，也许可以描述纤维树重建旨在实现的最终目标。可能有更简单的方法来解决这个问题。 -
构建树后，我们希望使用 D3 渲染它。目标是渲染 React 应用程序本身，然后对其进行抓取，然后将纤维树可视化，类似于 Chrome 开发工具。我们从ReactION 获得了使用 Puppeteer 的灵感。为学习目的重新发明轮子。
标签： javascript puppeteer