在 puppeteer 中将函数传递给 evaluate()

Question

我正在使用 Puppeteer 在 Typescript 中开发一个网络爬虫，并制作了一个这样的辅助函数：

function evaluateXPath(page: puppeteer.Page, xpath: string): Promise<any[]> {
    return page.waitForXPath(xpath)
        .then(() => page.$x(xpath))
        .then(handles => page.evaluate((...handles) => handles.map(h => h.href), ...handles))
}

如果我想获取 xpath 的 href 字段的值，它可以正常工作，但我想让它更通用。像这样（用 'evalFunc' 替换 map() 中的 'h => h.href'）：

function evaluateXPath(page: puppeteer.Page, xpath: string, evalFunc: (value: any, index: number, array: any[]) => any): Promise<any[]> {
    return page.waitForXPath(xpath)
        .then(() => page.$x(xpath))
        .then(handles => page.evaluate((...handles) => handles.map(evalFunc), ...handles))
}

这显然不起作用，因为 'evalFunc' 在浏览器上下文中不存在，但是将函数传递给浏览器的任何尝试都会失败或无法编译。将它传递到 evaluate() 函数内不起作用，因为它不能分配给“SerializableOrJSHandle”类型的参数，而且我对exposeFunction() 函数也没有运气。

谁能告诉我它是怎么做的？

Answer 1

我能想到两个可疑且不方便的解决方案。

1. 在评估函数内使用eval() 或Function() 构造函数并将函数代码作为字符串传输（代码编写、linting 等困难——这可以通过使用Function.prototype.toString() 来缓解一点）。

2. 将所有实用程序函数放在一个文件中并使用page.addScriptTag() 注入此文件，以便评估函数可以调用此文件中声明的任何函数（这会污染全局范围）。

编辑：

function evaluateXPath(page: puppeteer.Page, xpath: string, evalFunc: (value: any, index: number, array: any[]) => any): Promise<any[]> {
    return page.waitForXPath(xpath)
        .then(() => page.$x(xpath))
        .then(handles => page.evaluate((evalFuncStr, ...handles) =>
            handles.map(eval(`(${evalFuncStr})`)),
            evalFunc.toString(),
            ...handles))
}