Merge pull request #61 from wp-media/enhancement/56-build-lazyload-test

:chore: Add steps, functions to test lazyload images -- #56
wp-media · Apr 8, 2024 · 18e39e8 · 18e39e8
2 parents 52a88c4 + 768fe77
commit 18e39e8
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "test:delayjs:flatsome": "THEME=flatsome $npm_package_config_testCommand --tags @delayjs",
     "test:delayjs:divi": "THEME=Divi $npm_package_config_testCommand --tags @delayjs",
     "test:delayjs:astra": "THEME=astra $npm_package_config_testCommand --tags @delayjs",
+    "test:llimages": "$npm_package_config_testCommand --tags @llimages",
     "test:lcp": "$npm_package_config_testCommand --tags @lcp",
     "test:test": "$npm_package_config_testCommand --tags @test",
     "wp-env": "wp-env"

diff --git a/src/features/lazy-load.feature b/src/features/lazy-load.feature
@@ -0,0 +1,24 @@
+@llimages @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
diff --git a/src/support/steps/general.ts b/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.
  */

diff --git a/src/support/steps/ll-css-bg-image.ts b/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 {WP_BASE_URL} 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,126 @@ 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_inline1.jpeg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/test_inline2.jpeg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/test_internal0.webp'
+        ],
+        lazyLoadedImages: [
+            'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.webp',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/image/file_example_JPG_100kB.jpg',
+            'https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/Spain.PNG',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/paper.jpeg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/test_internal4.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/testnotExist.png',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/wp-rocket.svg',
+            'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/butterfly.avif',
+            `${WP_BASE_URL}/`+'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',
+            `${WP_BASE_URL}/`+'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',
+            `${WP_BASE_URL}/`+'wp-content/plugins/revslidertest/public/assets/assets/test_internal3.jpg',
+            'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paper.jpeg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/test.png',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/image/test3.gif',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/test_external1.jpeg',
+            `${WP_BASE_URL}/`+'test.png',
+            'https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg',
+            `${WP_BASE_URL}/`+'kot%C5%82.png',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/styles/assets/images/relative1.jpeg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/styles/assets/images/relative2.jpg',
+            `${WP_BASE_URL}/`+'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',
+        ]
+    },
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    ll_bg_css_single_colon: {
+        initialImages: [
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/fabio-sasso-UgpCjt4XLTY-unsplash.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testPng.png',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/underline.png',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testjpg.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/maxime-lebrun-6g3Akg708E0-unsplash.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testwebp.webp',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testavif.avif',
+        ],
+        lazyLoadedImages: [
+            `${WP_BASE_URL}/` + 'wp-content/rocket-test-data/images/paper.jpeg',
+            `${WP_BASE_URL}/` + 'wp-content/rocket-test-data/images/test-internal1.png',
+            `${WP_BASE_URL}/` + '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: [
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/fabio-sasso-UgpCjt4XLTY-unsplash.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testjpg4.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/underline.png',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/Przechwytywanie.PNG',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/maxime-lebrun-6g3Akg708E0-unsplash.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/Mapang-test.gif',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/BigJPGImage_20mbmb.jpg',
+        ],
+        lazyLoadedImages: [
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testavif.avif',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/img_nature.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/istockphoto-1184692500-612x612.webp',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testjpg.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testjpg3.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testjpg2.jpg',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/butterfly.avif',
+            `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/lcp/testwebp.webp'
+        ]
+    }
+};
+
+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)
 });
diff --git a/utils/page-utils.ts b/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;
+        });
+    }
 }