puppeteer page.evaluate 无法使用 args 公开函数

Question

正如我在文档 (here) 中看到的，我们可以像这样将 js 函数暴露给页面，

function do_many_operations(elem) {
    let rect = elem.getBoundingClientRect();
    return rect;
}

async function dummy_fn1(page) {

    // Expose function here
    await page.exposeFunction("do_many_operations", do_many_operations);

    let temp = await page.evaluate(async (a, b) => {
        let elems = document.querySelectorAll("p");
        // Use function here
        let rect = await do_many_operations(elems[0]);
    }, 1, 2);
}

但是，代码中断并显示错误消息，

Error: Evaluation failed: TypeError: elem.getBoundingClientRect is not a function

这意味着 elem arg 到 do_many_operations 不是有效的元素或节点，为什么？？

另一个问题是，我们可以将函数注入浏览器上下文吗？这样我们就不必为创建的新页面一次又一次地注入函数。

Answer 1

调用exposeFunction 注册的函数时有一个序列化过程。 当您调用 do_many_operations(elems[0]); 时，elems[0] 被序列化 (JSON.stringify) 并传递给您在 Node.js 中的函数。在节点方面，该对象没有getBoundingClientRect 函数。 如果你想重用代码，你可以使用evaluate在浏览器端创建函数：

await page.evaluate(() => {
  window.do_many_operations = function(elem) {
    let rect = elem.getBoundingClientRect();
    return rect;
  }
});