[5.x] Attempt #3 to fix the playwright tests

resources/js/components/Lazy.vue

@@ -87,6 +87,10 @@ export default {
             }
         }
 
+        window.$on('load-lazy', () => {
+            this.state.isIntersected = true
+        })
+
         this.onIdle(() => {
             this.state.isIntersected = true
         })

tests/playwright/general.spec.js

@@ -20,7 +20,7 @@ test('newsletter', BasePage.tags, async ({ page }) => {
     const email = `wayne+${Date.now()}@enterprises.com`
 
     await page.goto('/')
-    await new BasePage(page).scrolldown()
+    await new BasePage(page).loadLazy()
 
     await page.getByTestId('newsletter-email').fill(email)
     await page.getByTestId('newsletter-submit').click()

tests/playwright/pages/BasePage.js

@@ -29,39 +29,35 @@ export class BasePage {
         options['mask'] = masks
 
         if (type.startsWith('fullpage')) {
-            await this.scrolldown()
+            await this.loadLazy()
             options['fullPage'] = true
         }
 
         if (type.startsWith('fullpage-footer')) {
             await expect(this.page.getByTestId('newsletter-email')).toBeVisible()
         }
 
-        if (type == 'fullpage-footer-images') {
-            await this.waitForImages()
-        }
-
+        await this.waitForImages()
         await expect(this.page).toHaveScreenshot(options)
     }
 
-    async scrolldown() {
-        for (let i = 10; i >= 1; i--) {
-            await this.page.evaluate((i) => window.scrollTo(0, document.body.scrollHeight / i), i)
-            await this.page.waitForTimeout(10)
-        }
-        await this.page.waitForLoadState('networkidle')
-        await this.page.evaluate(() => window.scrollTo(0, 0))
-        await this.page.waitForLoadState('networkidle')
-    }
-
     async waitForImages() {
-        for (const img of await this.page.locator('img[loading="lazy"]:visible').all()) {
-            await img.scrollIntoViewIfNeeded()
+        // Make all images eager loaded
+        await this.page.evaluate(() => window.document.querySelectorAll('img[loading="lazy"]').forEach((elem) => (elem.loading = 'eager')))
+
+        // Check all images for completed state
+        for (const img of await this.page.locator('img').all()) {
             await expect(img).toHaveJSProperty('complete', true)
             await expect(img).not.toHaveJSProperty('naturalWidth', 0)
         }
+    }
 
-        await this.page.evaluate(() => window.scrollTo(0, 0))
+    async loadLazy() {
+        await this.page.waitForLoadState('networkidle')
+        await this.page.evaluate(() => window.$emit('load-lazy'))
+        await this.page.waitForTimeout(250)
+        await this.page.waitForLoadState('networkidle')
+        await this.page.waitForTimeout(250)
     }
 
     async wcag(testInfo, disabledRules = []) {