How to save screenshots from puppeteer
A good way to debug your puppeteer crawler in Apify actors is to save a screenshot of a browser window to the Apify key-value store. You can do that using this function:
/*_
_ Store screen from puppeteer page to Apify key-value store
* @param page - Instance of puppeteer Page class https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page
* @param [key] - Function stores your screen in Apify key-value store under this key
* @return {Promise<void>}
*/
const saveScreen = async (page, key = 'debug-screen') => {
const screenshotBuffer = await page.screenshot({ fullPage: true });
await Apify.setValue(key, screenshotBuffer, { contentType: 'image/png' });
};
This function takes the parameters page (an instance of a puppeteer page) and key (your screen is stored under this key function in the Apify key-value store).
Because this is so common use-case Apify SDK has a utility function called saveSnapshot that does exactly this and a little bit more:
You can choose a quality of your screenshots (high-quality images take more size)
You can also save HTML of the page
A simple example of usage function in an Apify actor:
const Apify = require('apify');
const { saveSnapshot } = Apify.utils.puppeteer;
Apify.main(async () => {
const input = await Apify.getValue('INPUT');
console.log('Launching Puppeteer...');
const browser = await Apify.launchPuppeteer();
const page = await browser.newPage();
await page.goto(input.url);
await saveSnapshot(page, { key: 'test-screen' });
console.log('Closing Puppeteer...');
await browser.close();
console.log('Done.');
});
After you call the function, your screen appears in the KEY-VALUE STORE tab in the actor console. You can click on the row with your saved screen and it'll open it in a new window.
If you have any questions, feel free to contact us in chat.
Happy coding!