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

config/wp.config.sample.ts

@@ -45,6 +45,77 @@ const {
 	WP_SSH_ROOT_DIR = ''
 } = process.env;
 
+/**
+ * Lazy load template images
+ */
+const LL_BACKGROUND_IMAGES = {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	lazyload_css_background_images: {
+		initialImages: [
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test.png',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/image-insidescript.jpeg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paper.jpeg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline1.jpeg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline2.jpeg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_internal0.webp'
+		],
+		lazyLoadedImages: [
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.webp',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/image/file_example_JPG_100kB.jpg',
+			'https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/Spain.PNG',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paper.jpeg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_internal4.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/testnotExist.png',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket.svg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/butterfly.avif',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/file_example_TIFF_1MB.tiff',
+			'https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8',
+			'https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg',
+			'https://mega.wp-rocket.me/avada/wp-content/rocket-test-data/prague-conference-center-1056491.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/butterfly%202.avif',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paper%C3%A9quipesTest.jpeg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_internal2.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/plugins/revslidertest1/public/assets/assets/test_internal3.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test.png',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.gif',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_external1.jpeg',
+			'https://e2e.rocketlabsqa.ovh/test.png',
+			'https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg',
+			'https://e2e.rocketlabsqa.ovh/kot%C5%82.png',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/assets/images/relative1.jpeg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/assets/images/relative2.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testsvg.svg',
+			'https://new.rocketlabsqa.ovh//wp-content/rocket-test-data/images/wp-rocket.svg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket2.svg',
+			'https://e2e.rocketlabsqa.ovh/new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_internal2.jpg',
+			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/nature.jpeg'
+		]
+	},
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	ll_bg_css_single_colon: {
+		initialImages: [
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/fabio-sasso-UgpCjt4XLTY-unsplash.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/underline.png',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/maxime-lebrun-6g3Akg708E0-unsplash.jpg'
+		],
+		lazyLoadedImages: [
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/miguel-luis-6wxFtwSuXHQ-unsplash.jpg'
+		]
+	},
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	ll_bg_css_double_colon:{
+		initialImages: [
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/fabio-sasso-UgpCjt4XLTY-unsplash.jpg',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/underline.png',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/maxime-lebrun-6g3Akg708E0-unsplash.jpg'
+		],
+		lazyLoadedImages: [
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/miguel-luis-6wxFtwSuXHQ-unsplash.jpg',
+		]
+	}
+};
+
+
 /**
  * Exported Scenario urls to be used for visual regression testing with backstopjs
  * @exports
@@ -118,5 +189,6 @@ export {
 	WP_SSH_ADDRESS,
 	WP_SSH_KEY,
 	WP_SSH_ROOT_DIR,
-	SCENARIO_URLS
+	SCENARIO_URLS,
+	LL_BACKGROUND_IMAGES
 };

package.json

@@ -16,6 +16,7 @@
     "test:online": "$npm_package_config_testCommand --tags @online",
     "test:vr": "$npm_package_config_testCommand --tags @vr",
     "test:llcssbg": "$npm_package_config_testCommand --tags @llcssbg",
+    "test:llimages": "$npm_package_config_testCommand --tags @llimg",
     "test:delayjs:genesis": "THEME=genesis-sample-develop $npm_package_config_testCommand --tags @delayjs",
     "test:delayjs:flatsome": "THEME=flatsome $npm_package_config_testCommand --tags @delayjs",
     "test:delayjs:divi": "THEME=Divi $npm_package_config_testCommand --tags @delayjs",

src/features/lazy-load.feature

@@ -0,0 +1,24 @@
+@llimg @setup
+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 'lazyload_css_background_images' images
+
+  Scenario: Open single colon template
+    When I log out
+    And I go to 'll_bg_css_single_colon' check initial image loaded
+    Then Check 'll_bg_css_single_colon' input for background images
+
+  Scenario: Open double colon template
+    When I log out
+    And I go to 'll_bg_css_double_colon' check initial image loaded
+    Then Check 'll_bg_css_double_colon' input for background 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,46 @@ 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.push(request.url());
+        }
+    });
+    await this.utils.visitPage(page);
+    await this.page.waitForLoadState('load', { timeout: 100000 });
+    const template = LL_BACKGROUND_IMAGES[page].initialImages
+
+    expect(images).toEqual(template)
+});
+
+Then('I must see other {string} images', async function (this: ICustomWorld, page) {
+    const images = [];
+    this.page.on('request', request => {
+        if (request.resourceType() === 'image') {
+            images.push(request.url());
+        }
+    });
+    await this.utils.scrollDownBottomOfAPage();
+
+    expect(images).toEqual(LL_BACKGROUND_IMAGES[page].lazyLoadedImages)
+});
+
+Then('Check {string} input for background images', async function (this: ICustomWorld, page) {
+    const images = [];
+    this.page.on('request', request => {
+        if (request.resourceType() === 'image') {
+            images.push(request.url());
+        }
+    });
+
+    await this.page.locator('input[name="lastName"]').nth(1).fill('Random text')
+
+    await this.utils.scrollDownBottomOfAPage();
+
+    expect(images).toEqual(LL_BACKGROUND_IMAGES[page].lazyLoadedImages)
 });

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.
      *
@@ -569,4 +579,26 @@ export class PageUtils {
 
         await activate.click();
     }
+
+    public scrollDownBottomOfAPage = async (): Promise<void> => {
+        await this.page.evaluate(async () => {
+            const scrollPage: Promise<void> = new Promise((resolve) => {
+
+                let totalHeight = 0;
+                const distance = 150;
+                const timer = setInterval(() => {
+                    const scrollHeight = document.body.scrollHeight;
+                    window.scrollBy(0, distance);
+                    totalHeight += distance;
+
+                    if (totalHeight >= scrollHeight) {
+                        clearInterval(timer);
+                        resolve();
+                    }
+                }, 700);
+            });
+
+            await scrollPage;
+        });
+    }
 }