Question

当我尝试在页面控制台中运行以下代码时，我得到了picture。

document.querySelector('#sb-site > div.sticky_footer > div:nth-child(9)')

但是，当我在程序中运行它时，控制台会记录它并返回'{}'

const inputContent = await page.evaluate(() => {
return document.querySelector('#sb-site > div.sticky_footer > div:nth-child(9)'); });

Answer 1

puppeteer可以在Node.js和浏览器上下文之间传输两种类型的数据：可序列化的数据（即JSON.stringify() / JSON.parse()支持的数据）和JavaScript对象ID（包括DOM元素）— JSHandle和ElementHandle。后来的API稍微复杂一些（请参阅JSHandle和ElementHandle方法或提及它们的方法）。

page.evaluate()只能传输可序列化的数据，而不是不可序列化的数据，它返回undefined或空对象。 DOM元素不可序列化，因为它们包含循环引用和方法。

因此，如果您只需要一些文本或元素属性，请尝试在浏览器上下文中进行大多数处理，并仅返回可序列化的数据。

Answer 2

在抓取之前，请确保页面已完全加载。

page.goto(url, {waitUntil: 'networkidle0'})

此外，根据the docs，.evaluate将返回promise，而不会返回DOM元素。

它将在控制台上打印{}或承诺在控制台上解析的值。

Answer 3

在您的情况下，您尝试选择一个注入页面的自定义dom对象，这会导致在使用nth-child() css选择器时出现一些奇怪的行为。因此，您应该尝试直接定位DOM节点。假设您要在https://wefunder.com/chattanoogafc

处获得类似的元素

您可以这样做：

const inputContent = await page.evaluate(async () => {
  var elements =  document.querySelectorAll("#sb-site > div.sticky_footer > div")[3].querySelectorAll("*")[0];
  return elements.getAttribute("company-json");
});

console.log("test:" + inputContent);

这应该返回您想要的JSON。然后，您可以使用JSON.parse(inputContent)

对其进行解析

木偶返回空对象

3 个答案: