Improve scenario one -- #129

src/features/ll-lcp.feature

@@ -1,4 +1,4 @@
-@lcpll
+@lcpll @delaylcp @setup
 Feature: Lazyload with LCP
 
   Background:
@@ -10,13 +10,13 @@ Feature: Lazyload with LCP
     And I save settings 'media' 'lazyloadCssBgImg'
 
   Scenario: Should Exclude LCP/ATF from Lazyload
+    And I clear cache
     When I log out
     And I visit the urls for 'desktop'
     When I am logged in
     And I clear cache
-    And I visit the urls for 'desktop' and check for lazyload
-    Then lcp image markup is not written to LL format
-#    And ATF image markup is not written to LL format
+    And I visit the urls and check for lazyload
+    Then lcp and atf images are not written to LL format
 
   #Scenario: Should exclude next-gen lcp/atf from LL
   #  Given I install plugin 'imagify'

src/support/steps/lcp-beacon-script.ts

@@ -8,29 +8,29 @@
  * @requires {@link @playwright/test}
  * @requires {@link @cucumber/cucumber}
  */
-import { ICustomWorld } from "../../common/custom-world";
-import { expect } from "@playwright/test";
-import { When, Then } from "@cucumber/cucumber";
-import { LcpData, Row } from "../../../utils/types";
-
-import { dbQuery, getWPTablePrefix } from "../../../utils/commands";
-import { extractFromStdout } from "../../../utils/helpers";
-import { WP_BASE_URL } from '../../../config/wp.config';
+import {ICustomWorld} from "../../common/custom-world";
+import {expect} from "@playwright/test";
+import {Then, When} from "@cucumber/cucumber";
+import {LcpData, Row} from "../../../utils/types";
+
+import {dbQuery, getWPTablePrefix} from "../../../utils/commands";
+import {extractFromStdout} from "../../../utils/helpers";
+import {WP_BASE_URL} from '../../../config/wp.config';
 import fs from 'fs/promises';
 
 let data: string,
     truthy: boolean = true,
     failMsg: string,
     jsonData: Record<string, { lcp: string[]; viewport: string[]; enabled: boolean, comment: string; }>,
     isDbResultAvailable: boolean = true,
-    lcpLLImages: Array<{ src: string; fetchpriority: string | boolean; lazyloaded: string | boolean }> = [];
+    lcpLLImages: { [key: string] : { src: string; url: string | boolean; lazyloaded: string | boolean }} = {};
 
 const actual: LcpData = {};
 
 /**
- * Executes step to visit page based on the form factor(desktop/mobile) and get the LCP/ATF data from DB.
+ * Executes step to visit page based on the templates and get check for lazyload.
  */
-When('I visit the urls for {string} and check for lazyload', async function (this: ICustomWorld, formFactor: string) {
+When('I visit the urls and check for lazyload', async function (this: ICustomWorld) {
     const resultFile: string = './src/support/results/expectedResultsDesktop.json';
 
     await this.page.setViewportSize({
@@ -47,14 +47,20 @@ When('I visit the urls for {string} and check for lazyload', async function (thi
             // Visit the page url.
             await this.utils.visitPage(key);
 
-            lcpLLImages = await this.page.evaluate(() => {
-                const images = document.querySelectorAll('img');
-                return Array.from(images).map(img => ({
-                    src: img.getAttribute('src'),
-                    fetchpriority: img.getAttribute('fetchpriority') || false,
-                    lazyloaded: img.classList.contains('lazyloaded')
-                }));
-            });
+            lcpLLImages = await this.page.evaluate((url) => {
+                const images = document.querySelectorAll('img'),
+                    result = {};
+
+                Array.from(images).forEach((img) => {
+                    result[url] = {
+                        src: img.getAttribute('src'),
+                        url: `${WP_BASE_URL}/${key}`,
+                        lazyloaded: img.classList.contains('lazyloaded')
+                    }
+                });
+
+                return result;
+            }, key);
         }
     }
 
@@ -103,8 +109,9 @@ When('I visit the urls for {string}', async function (this: ICustomWorld, formFa
             // Wait the beacon to add an attribute `beacon-complete` to true before fetching from DB.
             await this.page.waitForFunction(() => {
                 const beacon = document.querySelector('[data-name="wpr-wpr-beacon"]');
+                console.log(beacon ? beacon.getAttribute('beacon-completed') : 'No beacon found');
                 return beacon && beacon.getAttribute('beacon-completed') === 'true';
-            }, { timeout: 900000 });
+            }, { timeout: 100000 });
 
             if (formFactor !== 'desktop') {
                 isMobile = 1;
@@ -208,15 +215,34 @@ Then('lcp image should have fetchpriority', async function (this: ICustomWorld)
     expect(truthy).toBeTruthy();
 });
 
-Then('lcp image markup is not written to LL format', async function (this: ICustomWorld) {
-    console.log(lcpLLImages)
-    /*truthy = false;
+Then('lcp and atf images are not written to LL format', async function (this: ICustomWorld) {
+    // Reset truthy to true here.
+    truthy = true;
 
-    for (const image of lcpImages) {
-        if(image.lazyloaded === false) {
-            truthy = true
+    // Iterate over the data
+    for (const key in jsonData) {
+        if (Object.hasOwnProperty.call(jsonData, key) && jsonData[key].enabled === true) {
+            const expected = jsonData[key];
+            // Check for LCP
+            for (const lcp of expected.lcp) {
+                // Check if expected lcp is present in actual lcp.
+                if (lcpLLImages[key].src.includes(lcp) && lcpLLImages[key].lazyloaded) {
+                    truthy = false;
+                    failMsg += `Expected LCP for - ${lcp} for ${lcpLLImages[key].url} is lazyloaded - ${lcpLLImages[key].src}\n\n\n`;
+                }
+            }
+
+            // Check for ATF
+            for (const viewport of expected.viewport) {
+                if (lcpLLImages[key].src.includes(viewport) && lcpLLImages[key].lazyloaded) {
+                    truthy = false;
+                    failMsg += `Expected Viewport for - ${viewport} for ${lcpLLImages[key].url} is lazyloaded - ${lcpLLImages[key].src}
+                   \n\n\n`;
+                }
+            }
         }
     }
 
-    expect(truthy).toBeTruthy();*/
+    // Fail test when there is expectation mismatch.
+    expect(truthy).toBeTruthy();
 });