sadetutka.js

exports.handler = async (ctx, console, browser) => {
	const page = await browser.newPage();

	// has breakpoints for mobile resolution that makes map display different,
	// so better increase resolution
	await page.setViewport({
		width: 1280,
		height: 1024,
	})

	const url = 'https://www.foreca.fi/sadetutka/etela-suomi?1h';

	await ridOfCookieConsentDialog(page, url);

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

	// so we can take screenshot without too much UI elements visible
	await hideMapOverlays(page);

	const map = await page.$('#map');
	if (!map) {
		throw new Error('Failed to find map')
	}

	// hovering on first step makes all the images load for the next steps as well
	await page.hover('#step0');

	// dirty hack to assume all the step images have loaded
	await page.waitFor(5000);

	const frameUrls = [];

	// the map has 25 steps (= timestamps). hover over all of them in order to capture
	// each time for the gif we're about to make
	for (let stepNo = 0; stepNo < 25; stepNo++) {
		// the labels are ID'd in UI [step0 .. step24]
		await page.hover('#step'+stepNo);

		const screenshot = await map.screenshot({
			type: 'png',
		});

		const frameUrl = await ctx.uploadFile(stepNo+'.png', screenshot, 'image/png');

		console.log(`uploaded ${frameUrl}`);

		frameUrls.push(frameUrl);
	}

	ctx.data = {
		frameUrls: frameUrls,
	};
}

async function hideMapOverlays(page) {
	await page.addStyleTag({ content: `
		.ol-zoom,
		.ol-control-drag-button,
		.ol-attribution,
		.ol-control-home-button,
		.ol-custom-arealist-control { display: none }
	`});
}

async function ridOfCookieConsentDialog(page, url) {
	await page.setCookie({
		name: 'euconsent-v2',
		value: 'dummy', // doesn't seem to matter
		url: url,
	});
}

This script is posted to https://github.com/function61/chrome-server (which provides ctx argument that has file upload capabilities etc., so it's a bit more than plain Puppeteer)