chore: add lazy load images snippet

Author: alessandro-grosselle-adevinta

tsconfig.json

@@ -12,6 +12,7 @@
     "baseUrl": "src",
     "lib": [
       "dom",
+      "dom.iterable",
       "es2015",
       "es2017",
       "es2020"

visual-regression-example/test/visual/google.visual.spec.ts

@@ -1,4 +1,4 @@
-import {test, expect} from '@playwright/test';
+import {test, expect, Page} from '@playwright/test';
 
 test.describe('Google Visual Regression Test', () => {
     test('google.it homepage should match visual baseline', async ({page}) => {
@@ -12,8 +12,21 @@ test.describe('Google Visual Regression Test', () => {
             content: `#hplogo { display: none !important; }`,
         });
 
+        // Force to load the lazy images:
+        await forceLoadLazyImages(page)
+
         await page.waitForLoadState('networkidle');
 
         await expect(page).toHaveScreenshot('google-homepage.png');
     });
 });
+
+
+async function forceLoadLazyImages(page: Page): Promise<void> {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    return page.evaluate(() => {
+        for (const image of images) {
+            image.setAttribute('loading', 'eager');
+        }
+    });
+}