javascript - puppeteer 在调用公开函数后截取屏幕截图

Question

我正在尝试使用 puppeteer 导航到页面，等待网络应用程序达到特定状态，截取屏幕截图并退出。当 SPA 处于我想要截图的状态时，它会调用一个函数。我很难理解异步 js 代码。

我的代码如下所示:

const puppeteer = require('puppeteer');

const url = 'http://example.com/';
const width = 300;
const height = 250;
const path = '/vagrant/tmp/screenshot.jpg';

async function takeScreenshoot(url, width, height, path) {
    "use strict";

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({width: width, height: height});

    await page.exposeFunction('interestingFunction', (async data => {
        console.log('Interesting function has been called. Taking a screenshot now.');
        await page.screenshot({path: path});
        await browser.close();
    }));

    await page.goto(url);
}

(async () => {
    "use strict";
    await takeScreenshoot(url, width, height, path);
})();

但是当我调用 screenshot.js 时，我收到有关未处理的 promise 的警告，提示“ session 已关闭。很可能页面已关闭。”

node --trace-warnings screenshot.js

Interesting function has been called. Taking a screenshot now.
(node:2572) Error: Protocol error (Runtime.evaluate): Session closed. Most likely the page has been closed.
    at Session.send (/vagrant/node_modules/puppeteer/lib/Connection.js:167:29)
    at Page._onConsoleAPI (/vagrant/node_modules/puppeteer/lib/Page.js:296:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:2572) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at emitWarning (internal/process/promises.js:78:15)
    at emitPendingUnhandledRejections (internal/process/promises.js:95:11)
    at process._tickCallback (internal/process/next_tick.js:189:7)

如果我从第 18 行删除 await browser.close()，则不会出现警告，但脚本永远不会完成。

现在，interstingFunction() 做了更多的事情，但将其暴露给 Web 应用程序的窗口是安全的。我只是试图给出一个上面仍然失败的最小脚本的示例。

我使用的是 Node v8.5.0。

我的做法是错误的吗？

Answer 1

我假设该函数有某个调用者，您不需要自己使用评估来调用它。

Imo，browser.close应该移到最后并转到expose函数之前。据文档中的解释，如果返回一个 promise ，它将被等待。最后，async/await 是 promise 的糖

await page.exposeFunction('interestingFunction', (async data => {
    console.log('Interesting function has been called. Taking a screenshot now.');
    await page.screenshot({path: path});
    await browser.close();
}));

await page.goto(url);

这就是我的整个例子

const url = 'http://example.com/';
const width = 300;
const height = 250;
const path = './screenshot.jpg';

async function takeScreenshoot(url, width, height, path) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(url, {waitUntil: 'load'});

    await page.exposeFunction('jjj', (async () => {
        console.log('Interesting function has been called. Taking a screenshot now.');
        return await page.screenshot({path: path});
    }));

    await page.evaluate(async () => {
      const myHash = await window.jjj();
    });

    await browser.close();
  }

(async () => {
    await takeScreenshoot(url, width, height, path);
})();