From 9c6d076dd0f582090bab780d79554dd23112d515 Mon Sep 17 00:00:00 2001
From: Dave Hansen-Lange <1127349+dalin-@users.noreply.github.com>
Date: Tue, 1 Apr 2025 18:42:29 -0400
Subject: [PATCH] Properly load lazy HTML elements before taking screenshots.

---
 .../puppet/clickAndHoverHelper.js             | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/capture/engine_scripts/puppet/clickAndHoverHelper.js b/capture/engine_scripts/puppet/clickAndHoverHelper.js
index 703d3b89b..459daff88 100644
--- a/capture/engine_scripts/puppet/clickAndHoverHelper.js
+++ b/capture/engine_scripts/puppet/clickAndHoverHelper.js
@@ -26,6 +26,34 @@ module.exports = async (page, scenario) => {
     }
   }
 
+  // Force-load lazy images.
+  await page.evaluate(async(scenario) => {
+    let images = [];
+    const lazyImages = document.querySelectorAll('[loading="lazy"]');
+    lazyImages.forEach((image) => {
+      images.push(image);
+    });
+
+    async function loadImages(images) {
+      await images.reduce(async(promise, image) => {
+        // This line will wait for the last async function to finish.
+        // The first iteration uses an already resolved Promise
+        // so, it will immediately continue.
+        // https://stackoverflow.com/a/49499491/231914
+        await promise;
+        image.removeAttribute('loading');
+        const result = await image.decode();
+      }, Promise.resolve());
+    }
+
+    if (images.length) {
+      console.log('Loading ' + images.length + ' lazy elements.');
+    }
+    return loadImages(images);
+
+  }, scenario);
+
+  
   if (postInteractionWait) {
     await new Promise(resolve => {
       setTimeout(resolve, postInteractionWait);