javascript - 将 Puppeteer 页面作为函数中的参数传递未按预期工作

Question

介绍

loginLinkedin 将我带到登录页面，然后为我返回 puppeteer 页面，该页面随后分配给 root，这样我仍然可以有更多的选择来使用它。

const root = await loginToLInkined("https://www.linkedin.com/login");

    await root.goto(url);
    max_page = await getMaxPage(root);
    console.log("max page",max_page)

然后我goto(url)

url 是我需要去的另一个页面。

之后，我调用 getMaxPage(root) 并将 root 作为参数，这样我就可以在该函数中 evaluate()

问题

const getMaxPage = async root => {
  const maxPage = await root.evaluate(()=> {
    return document.querySelector(
      "li.artdeco-pagination__indicator:nth-last-Child(1)"
    );
  });
  console.log(maxPage)
  return parseInt(maxPage.innerText);
};

问题是，当我使用 console.log(maxPage) 它返回 undefined 时，我意识到添加 root s 参数实际上并没有按照我应该做的方式工作。

我做错了什么以及如何正确完成。

请注意，我实际上已经尝试过 root.evaluate 而不添加函数并将根作为参数添加，它实际上为我返回了 maxpage

Answer 1

问题在于您从 page.evaluate() 返回的:

const maxPage = await root.evaluate(()=> {
    return document.querySelector(
      "li.artdeco-pagination__indicator:nth-last-Child(1)"
    );
});

这是一个DOM节点，是一个复杂的对象，不能serialized ，并且返回值必须可序列化，以便从 Chromium 返回到节点。

因此，为了解决这个问题，所有 future 的脚本只返回需要的内容，以及可以无错误地JSON.stringifyed 的内容。正如 pguardiario 在评论中正确指出的那样，在这种情况下，从该节点返回 innerText 就足够了:

const maxPage = await root.evaluate(()=> {
  return document.querySelector("li.artdeco-pagination__indicator:nth-last-Child(1)").innerText;
});