我正在尝试使用 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。
我的做法是错误的吗?
最佳答案
我假设该函数有某个调用者,您不需要自己使用评估来调用它。
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);
})();
关于javascript - puppeteer 在调用公开函数后截取屏幕截图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46376074/