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

src/features/lazy-load.feature

@@ -0,0 +1,24 @@
+@llcssbg @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,4 +1,4 @@
-import { Then } from '@cucumber/cucumber';
+import { When, Then } from '@cucumber/cucumber';
 import { ICustomWorld } from "../../common/custom-world";
 import { expect } from "@playwright/test";
 
@@ -58,4 +58,113 @@ Then('I must see the correct style in the head', async function (this: ICustomWo
   console.log(failMessage);
 
   expect(isMatch, failMessage).toBeTruthy();
+});
+
+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',
+        ]
+    }
+};
+
+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

@@ -375,6 +375,21 @@ export class PageUtils {
         await this.sections.massToggle();
     }
 
+    /**
+     * Performs to clear all cache action on WP Rocket.
+     *
+     * @return  {Promise<void>}
+     */
+    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.
      *
@@ -571,4 +586,31 @@ export class PageUtils {
 
         await activate.click();
     }
+
+    /**
+     * Scroll down to the bottom of a page
+     *
+     * @return  {Promise<void>}
+     */
+    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;
+        });
+    }
 }