Add other scenarios and update wp.config.sample file

wp-media · Apr 2, 2024 · 36a9ada · 36a9ada
1 parent 9d4e192
commit 36a9ada
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 34 deletions.
diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts
@@ -49,16 +49,14 @@ const {
  * Lazy load template images
  */
 const LL_BACKGROUND_IMAGES = {
-	lazyLoadCSSTemplate: {
+	// 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://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/flowers.jpg',
-			'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/mountain.webp',
-			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/painting-mountain-lake.avif',
 			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_internal0.webp'
 		],
 		lazyLoadedImages: [
@@ -77,34 +75,44 @@ const LL_BACKGROUND_IMAGES = {
 			'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/revslidertest/public/assets/assets/test_internal3.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://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/assets/images/relative1.jpeg',
-			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/assets/images/relative2.jpg',
+			'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'
 		]
 	},
-	singleColonTemplate: {
+	// 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'
 		]
 	},
-	doubleColonTemplate:{
+	// 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',
+			'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/Przechwytywanie.PNG'
+		]
 	}
 };
 

diff --git a/src/features/lazy-load.feature b/src/features/lazy-load.feature
@@ -10,5 +10,15 @@ Feature: Check if content are lazyloaded while scrolling
 
   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
+    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' inputs for background images
diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts
@@ -1,7 +1,7 @@
 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';
+import {LL_BACKGROUND_IMAGES, WP_USERNAME} 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 () => {
@@ -61,7 +61,7 @@ Then('I must see the correct style in the head', async function (this: ICustomWo
   expect(isMatch, failMessage).toBeTruthy();
 });
 
-When('I go to {string} Check initial image loaded', async function (this: ICustomWorld, page) {
+When('I go to {string} check initial image loaded', async function (this: ICustomWorld, page) {
     const images = [];
 
     this.page.on('request', request => {
@@ -71,36 +71,50 @@ When('I go to {string} Check initial image loaded', async function (this: ICusto
     });
     await this.utils.visitPage(page);
     await this.page.waitForLoadState('load', { timeout: 100000 });
+    const template = LL_BACKGROUND_IMAGES[page].initialImages
 
-    expect(images).toEqual(LL_BACKGROUND_IMAGES.lazyLoadCSSTemplate.initialImages)
+    expect(images).toEqual(template)
 });
 
-Then('I must see other lazyloaded images', async function (this: ICustomWorld) {
+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.page.evaluate(async () => {
-        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;
+    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());
+        }
     });
 
-    expect(images).toEqual(LL_BACKGROUND_IMAGES.lazyLoadCSSTemplate.lazyLoadedImages)
+    await this.page.locator('input[name="lastName"]').nth(1).fill('Random text')
+
+    await this.utils.scrollDownBottomOfAPage();
+
+    expect(images).toEqual(LL_BACKGROUND_IMAGES[page].lazyLoadedImages)
+});
+
+Then('Check {string} inputs 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.page.locator('input#fileUpload').hover()
+
+    await this.utils.scrollDownBottomOfAPage();
+
+    expect(images).toEqual(LL_BACKGROUND_IMAGES[page].lazyLoadedImages)
 });
diff --git a/utils/page-utils.ts b/utils/page-utils.ts
@@ -579,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;
+        });
+    }
 }