[test] Wait for images to load (#11004)

test/regressions/index.test.js

@@ -101,12 +101,6 @@ async function main() {
         // Move cursor offscreen to not trigger unwanted hover effects.
         page.mouse.move(0, 0);
 
-        // Wait for the flags to load
-        await page.waitForFunction(() => {
-          const images = Array.from(document.querySelectorAll('img'));
-          return images.every((img) => img.complete);
-        });
-
         if (/^\docs-charts-.*/.test(pathURL)) {
           // Run one tick of the clock to get the final animation state
           await sleep(10);
@@ -119,6 +113,22 @@ async function main() {
           '[data-testid="testcase"]:not([aria-busy="true"])',
         );
 
+        // Wait for the flags to load
+        await page.waitForFunction(
+          () => {
+            const images = Array.from(document.querySelectorAll('img'));
+            return images.every((img) => {
+              if (!img.complete && img.loading === 'lazy') {
+                // Force lazy-loaded images to load
+                img.setAttribute('loading', 'eager');
+              }
+              return img.complete;
+            });
+          },
+          undefined,
+          { timeout: 1000 },
+        );
+
         await testcase.screenshot({ path: screenshotPath, type: 'png' });
       });