:chore: Add steps, functions to test lazyload images -- #56

src/features/lazy-load.feature

@@ -0,0 +1,14 @@
+@llimg
+Feature: Check if content are lazyloaded while scrolling
+  Background:
+    Given I am logged in
+    #And plugin is installed 'new_release'
+    #And plugin is activated
+    When I go to 'wp-admin/options-general.php?page=wprocket#dashboard'
+    And I save settings 'media' 'lazyloadCssBgImg'
+    And clear wpr cache
+
+  Scenario: Open Lazy load css background images page
+    When I log out
+    And I go to 'lazyload_css_background_images' Check initial image loaded
+    Then I must see other lazyloaded images

src/support/steps/general.ts

@@ -99,6 +99,14 @@ When('I go to {string}', async function (this: ICustomWorld, page) {
     await this.page.waitForLoadState('load', { timeout: 100000 });
 });
 
+/**
+ * Clear wpr cache
+ */
+Given('clear wpr cache', async function (this: ICustomWorld) {
+    await this.utils.clearWPRCache();
+});
+
+
 /**
  * Executes the step to click on a specific button.
  */

src/support/steps/ll-css-bg-image.ts

@@ -1,6 +1,7 @@
-import { Then } from '@cucumber/cucumber';
+import { When, Then } from '@cucumber/cucumber';
 import { ICustomWorld } from "../../common/custom-world";
 import { expect } from "@playwright/test";
+import { LL_BACKGROUND_IMAGES } from '../../../config/wp.config';
 
 Then('I must see the correct style in the head', async function (this: ICustomWorld) {
   const html = await this.page.evaluate(async () => {
@@ -58,4 +59,37 @@ Then('I must see the correct style in the head', async function (this: ICustomWo
   console.log(failMessage);
 
   expect(isMatch, failMessage).toBeTruthy();
+});
+
+When('I go to {string} Check initial image loaded', async function (this: ICustomWorld, page) {
+    const images = [];
+
+    this.page.on('request', request => {
+        if (request.resourceType() === 'image') {
+            images[0] = request.url();
+            expect(images).not.toContain(LL_BACKGROUND_IMAGES.templateOne.onLoad)
+        }
+    });
+
+    await this.utils.visitPage(page);
+    await this.page.waitForLoadState('load', { timeout: 100000 });
+});
+
+Then('I must see other lazyloaded images', async function (this: ICustomWorld) {
+    const scrollPage: Promise<void> = new Promise((resolve) => {
+        let totalHeight = 0;
+        const distance = 100;
+        const timer = setInterval(() => {
+            const scrollHeight = document.body.scrollHeight;
+            window.scrollBy(0, distance);
+            totalHeight += distance;
+
+            if(totalHeight >= scrollHeight){
+                clearInterval(timer);
+                resolve();
+            }
+        }, 700);
+    });
+
+    await scrollPage;
 });

utils/page-utils.ts

@@ -373,6 +373,16 @@ export class PageUtils {
         await this.sections.massToggle();
     }
 
+    public clearWPRCache = async(): Promise<void> => {
+        await this.gotoWpr();
+        await this.page.waitForLoadState('load', { timeout: 30000 });
+
+        const clearCacheURL = await this.page.locator('.wpr-button.wpr-button--icon.wpr-icon-trash').first().getAttribute('href');
+
+        await this.page.goto(clearCacheURL);
+        await this.page.waitForLoadState('load', { timeout: 30000 });
+    }
+
     /**
      * Performs the enable all options action on WP Rocket.
      *