Wait for lazy loaded elements when using the fullPage option (sindr…

…esorhus#40) Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>
sgtrusty · Aug 10, 2020 · 9401749 · 9401749
1 parent 06122cf
commit 9401749
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -119,6 +119,8 @@ const parseCookie = (url, cookie) => {
 	return returnValue;
 };
 
+const imagesHaveLoaded = () => [...document.images].map(element => element.complete);
+
 const captureWebsite = async (input, options) => {
 	options = {
 		inputType: 'url',
@@ -316,6 +318,39 @@ const captureWebsite = async (input, options) => {
 		await options.beforeScreenshot(page, browser);
 	}
 
+	if (screenshotOptions.fullPage) {
+		// Get the height of the rendered page
+		const bodyHandle = await page.$('body');
+		const bodyBoundingHeight = await bodyHandle.boundingBox();
+		await bodyHandle.dispose();
+
+		// Scroll one viewport at a time, pausing to let content load
+		const viewportHeight = viewportOptions.height;
+		let viewportIncrement = 0;
+		while (viewportIncrement + viewportHeight < bodyBoundingHeight) {
+			const navigationPromise = page.waitForNavigation({waitUntil: 'networkidle0'});
+			/* eslint-disable no-await-in-loop */
+			await page.evaluate(_viewportHeight => {
+				/* eslint-disable no-undef */
+				window.scrollBy(0, _viewportHeight);
+				/* eslint-enable no-undef */
+			}, viewportHeight);
+			await navigationPromise;
+			/* eslint-enable no-await-in-loop */
+			viewportIncrement += viewportHeight;
+		}
+
+		// Scroll back to top
+		await page.evaluate(_ => {
+			/* eslint-disable no-undef */
+			window.scrollTo(0, 0);
+			/* eslint-enable no-undef */
+		});
+
+		// Some extra delay to let images load
+		await page.waitForFunction(imagesHaveLoaded, {timeout: 60});
+	}
+
 	const buffer = await page.screenshot(screenshotOptions);
 
 	await page.close();

diff --git a/test.js b/test.js
@@ -156,6 +156,31 @@ test('`fullPage` option', async t => {
 	t.true(size.height > 100);
 });
 
+test('`fullPage` option - lazy loading', async t => {
+	const server = await createTestServer();
+	const imageCount = 50;
+
+	server.get('/', async (request, response) => {
+		response.end(`
+			<body>
+				<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
+					${[...new Array(imageCount).keys()].map(image => `<img src="https://picsum.photos/150/150?random=${image}" loading="lazy">`).join('')}
+				</div>
+			</body>
+		`);
+	});
+
+	const size = imageSize(await instance(server.url, {
+		width: 200,
+		height: 300,
+		scaleFactor: 1,
+		fullPage: true
+	}));
+
+	t.is(size.width, 200);
+	t.true(size.height > 150);
+});
+
 test('`timeout` option', async t => {
 	const server = await createTestServer();