如何在 Puppeteer 中运行 page.screenshot 内部 page.evaluate？

Question

我正在创建一个屏幕抓取工具，它需要抓取页面内容并对其进行截图。为此，我正在使用 Puppeteer，但遇到了障碍。当我尝试调用在 page.evaulate 内运行 page.screenshot 的函数时，我收到一个错误，指出该函数未定义。

这是我的代码：

async function getContent(clink, ce, networkidle, host, filepath) {
        let browser = await puppeteer.launch();
        let cpage = await browser.newPage();
        await cpage.goto(clink, { waitUntil: networkidle });
        let content = await cpage.evaluate((clink, ce, networkidle, host, filepath, pubDate) => {
            let results = '';
            let enclurl = clink;
            takeScreenshot(enclurl, filepath, networkidle)
                .then(() => {
                    console.log("Screenshot taken");
                })
                .catch((err) => {
                    console.log("Error occured!");
                    console.dir(err);
                });
            results += '<title><![CDATA[' + 'test' + ']]</title>';
            results += '<description><![CDATA[' + '<img src="' + host + filepath.slice(1) + '">' + document.querySelector(ce).innerHTML + ']]</description>';
            results += '<link>' + clink + '</link>';
            results += '<guid>' + clink + '</guid>';
            results += '<pubDate>' + pubDate + '</pubDate>';
            return results;
        }, clink, ce, networkidle, host, filepath, pubDate);
        await cpage.close();
        await browser.close();
        return content;
    }

该代码应在创建 RSS 格式的 xml 文件之前返回项目。然后，这些文件的 URL 将被添加到 WPRobot 活动中。最终目标将是一个搜索引擎，它使用 Wordpress 来聚合页面的主要内容以及来源的完整屏幕截图。

takeScreenshot函数如下：

async function takeScreenshot(enclurl, filepath, networkidle) {
        let browser = await puppeteer.launch();
        let page = await browser.newPage();
        await page.goto(enclurl, { waitUntil: networkidle });
        let buffer = await page.screenshot({
            path: filepath
        });

        await page.close();
        await browser.close();
    }

在 page.evaluate 之外调用时，截屏效果很好。我得到的确切错误是“takeScreenshot 未定义”。我有另一个函数可以解析 RSS 提要并截取它们的源 URL，但它根本不使用 page.evaluate。

我现在已经在调用 getContent() 之前将 takeScreenshot 调用添加到我的代码的早期部分，但现在似乎 getContent() 总是返回未定义。我的新 getContent() 内容如下：

 async function getContent(clink, ce, networkidle) {
        let browser = await puppeteer.launch();
        let cpage = await browser.newPage();
        await cpage.goto(clink, { waitUntil: networkidle });
        let content = await cpage.evaluate((ce) => {
            let cefc = ce.charAt(0);
            if (cefc != '.') {
                ce = '#' + ce;
            }
            console.log('ce=' + ce);
            let results = document.querySelector(ce).innerHTML;
            return results;
        }, ce);
        await cpage.close();
        await browser.close();
        return content;
    }

我也没有看到 console.log('ce=' + ce) 被写入日志。将 console.log 移出 page.evaluate 循环后，它记录了内容的适当值，即具有指定类的元素的 HTML。尽管返回内容的值仍未定义。

Answer 1

Page.evaluate 有一种奇怪且不直观的工作方式：

函数的代码（在你的情况下： (clink, ce, networkidle, host, filepath, pubDate) => {...} ）不会在你的脚本中执行。该函数在 puppeteer 中序列化，并发送到无头浏览器。

如果你想从评估函数内部调用一个函数，通常（但不是在这种情况下）你可以使用以下技巧之一：How to pass a function in Puppeteers .evaluate() method?

但是在这种情况下......有一个问题！ 在 takeScreenshot 内部还有其他不能在 puppeteer 的无头浏览器中使用的函数，即 puppeteer.launch(); 等。这些函数需要很多依赖项（和相同的可执行文件）...并且不能通过。

要执行您需要的操作，请将代码的屏幕截图部分移出评估：

async function getContent(clink, ce, networkidle, host, filepath) {
    let browser = await puppeteer.launch();
    let cpage = await browser.newPage();
    await cpage.goto(clink, { waitUntil: networkidle });
    let content = await cpage.evaluate((clink, ce, networkidle, host, filepath, pubDate) => {
        let results = '';
        let enclurl = clink;

        results += '<title><![CDATA[' + 'test' + ']]</title>';
        results += '<description><![CDATA[' + '<img src="' + host + '{REPL_ME}' + '">' + document.querySelector(ce).innerHTML + ']]</description>';
        results += '<link>' + clink + '</link>';
        results += '<guid>' + clink + '</guid>';
        results += '<pubDate>' + pubDate + '</pubDate>';
        return results;
    }, clink, ce, networkidle, host, filepath, pubDate);

    await takeScreenshot(enclurl, filepath, networkidle);
    content = content.replace('{REPL_ME}', filepath)   

    await cpage.close();
    await browser.close();
    return content;
}