From a003dbadc4d9ad3a1711c62039b4c84a27af21d5 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 28 Mar 2024 14:29:55 +0100 Subject: [PATCH 01/13] :chore: Add steps, functions to test lazyload images -- #56 --- src/features/lazy-load.feature | 14 +++++++++++ src/support/steps/general.ts | 8 +++++++ src/support/steps/ll-css-bg-image.ts | 36 +++++++++++++++++++++++++++- utils/page-utils.ts | 10 ++++++++ 4 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 src/features/lazy-load.feature diff --git a/src/features/lazy-load.feature b/src/features/lazy-load.feature new file mode 100644 index 0000000..6c3bb53 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/support/steps/general.ts b/src/support/steps/general.ts index 89fd6e4..0d2dae7 100644 --- 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 index 6707ece..4f9b1fa 100644 --- 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 { 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 = 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; }); \ No newline at end of file diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 6af5c80..bf2ce3e 100644 --- a/utils/page-utils.ts +++ b/utils/page-utils.ts @@ -373,6 +373,16 @@ export class PageUtils { await this.sections.massToggle(); } + public clearWPRCache = async(): Promise => { + 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. * From 63282bd87e361794f5d5e5aff0234a80a8877679 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 28 Mar 2024 15:37:49 +0100 Subject: [PATCH 02/13] :feat: Add command --- package.json | 1 + src/support/steps/ll-css-bg-image.ts | 41 +++++++++++++++++++--------- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 8280d62..54cb20c 100755 --- a/package.json +++ b/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", diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index 4f9b1fa..1675f15 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -76,20 +76,35 @@ When('I go to {string} Check initial image loaded', async function (this: ICusto }); Then('I must see other lazyloaded images', async function (this: ICustomWorld) { - const scrollPage: Promise = 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(); + await this.page.evaluate(async () => { + const scrollPage: Promise = 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; + this.page.on('request', request => { + if (request.resourceType() === 'image') { + console.log(request.url()); + //expect(images).not.toContain(LL_BACKGROUND_IMAGES.templateOne.onLoad) } - }, 700); + }); }); - await scrollPage; + this.page.on('request', request => { + if (request.resourceType() === 'image') { + console.log(request.url()); + //expect(images).not.toContain(LL_BACKGROUND_IMAGES.templateOne.onLoad) + } + }); }); \ No newline at end of file From 81bce2a3415af1156d50713aedc19c3109506f7f Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 28 Mar 2024 16:56:53 +0100 Subject: [PATCH 03/13] :close: modified functions to get network request #56 --- src/support/steps/ll-css-bg-image.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index 1675f15..f3bb185 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -66,18 +66,24 @@ When('I go to {string} Check initial image loaded', async function (this: ICusto this.page.on('request', request => { if (request.resourceType() === 'image') { - images[0] = request.url(); - expect(images).not.toContain(LL_BACKGROUND_IMAGES.templateOne.onLoad) + images.push(request.url()); } }); - await this.utils.visitPage(page); await this.page.waitForLoadState('load', { timeout: 100000 }); + + expect(images).toEqual(LL_BACKGROUND_IMAGES.templateOne.initialImages) }); Then('I must see other lazyloaded images', async function (this: ICustomWorld) { + this.page.on('request', request => { + if (request.resourceType() === 'image') { + console.log(request.url()); + } + }); await this.page.evaluate(async () => { const scrollPage: Promise = new Promise((resolve) => { + let totalHeight = 0; const distance = 100; const timer = setInterval(() => { @@ -93,12 +99,6 @@ Then('I must see other lazyloaded images', async function (this: ICustomWorld) { }); await scrollPage; - this.page.on('request', request => { - if (request.resourceType() === 'image') { - console.log(request.url()); - //expect(images).not.toContain(LL_BACKGROUND_IMAGES.templateOne.onLoad) - } - }); }); this.page.on('request', request => { From ace5fcd69c441f105159f9a2e43b3bdc3215e478 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 29 Mar 2024 11:55:02 +0100 Subject: [PATCH 04/13] :sparkles: Add check for lazyloaded images after scrolling --- src/features/lazy-load.feature | 6 +++--- src/support/steps/ll-css-bg-image.ts | 10 +++------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/features/lazy-load.feature b/src/features/lazy-load.feature index 6c3bb53..8357f8f 100644 --- a/src/features/lazy-load.feature +++ b/src/features/lazy-load.feature @@ -1,9 +1,9 @@ -@llimg +@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 + 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 diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index f3bb185..1352ae9 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -76,9 +76,10 @@ When('I go to {string} Check initial image loaded', async function (this: ICusto }); Then('I must see other lazyloaded images', async function (this: ICustomWorld) { + const images = []; this.page.on('request', request => { if (request.resourceType() === 'image') { - console.log(request.url()); + images.push(request.url()); } }); await this.page.evaluate(async () => { @@ -101,10 +102,5 @@ Then('I must see other lazyloaded images', async function (this: ICustomWorld) { await scrollPage; }); - this.page.on('request', request => { - if (request.resourceType() === 'image') { - console.log(request.url()); - //expect(images).not.toContain(LL_BACKGROUND_IMAGES.templateOne.onLoad) - } - }); + expect(images).toEqual(LL_BACKGROUND_IMAGES.templateOne.lazyLoadedImages) }); \ No newline at end of file From 9d4e19215665946488a49b7332559f10d16d0b3b Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 29 Mar 2024 12:16:32 +0100 Subject: [PATCH 05/13] Update config with lazyload const --- config/wp.config.sample.ts | 67 +++++++++++++++++++++++++++- src/support/steps/ll-css-bg-image.ts | 4 +- 2 files changed, 68 insertions(+), 3 deletions(-) diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts index 1115b6b..61bda41 100755 --- a/config/wp.config.sample.ts +++ b/config/wp.config.sample.ts @@ -45,6 +45,70 @@ const { WP_SSH_ROOT_DIR = '' } = process.env; +/** + * Lazy load template images + */ +const LL_BACKGROUND_IMAGES = { + lazyLoadCSSTemplate: { + 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: [ + '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/revslidertest/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/images/wp-rocket.svg', + 'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/nature.jpeg' + ] + }, + singleColonTemplate: { + 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: [ + ] + }, + doubleColonTemplate:{ + 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' + ], + } +}; + + /** * Exported Scenario urls to be used for visual regression testing with backstopjs * @exports @@ -118,5 +182,6 @@ export { WP_SSH_ADDRESS, WP_SSH_KEY, WP_SSH_ROOT_DIR, - SCENARIO_URLS + SCENARIO_URLS, + LL_BACKGROUND_IMAGES }; \ No newline at end of file diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index 1352ae9..c64cba8 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -72,7 +72,7 @@ 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 }); - expect(images).toEqual(LL_BACKGROUND_IMAGES.templateOne.initialImages) + expect(images).toEqual(LL_BACKGROUND_IMAGES.lazyLoadCSSTemplate.initialImages) }); Then('I must see other lazyloaded images', async function (this: ICustomWorld) { @@ -102,5 +102,5 @@ Then('I must see other lazyloaded images', async function (this: ICustomWorld) { await scrollPage; }); - expect(images).toEqual(LL_BACKGROUND_IMAGES.templateOne.lazyLoadedImages) + expect(images).toEqual(LL_BACKGROUND_IMAGES.lazyLoadCSSTemplate.lazyLoadedImages) }); \ No newline at end of file From 36a9adad5e9da0b14b1de5582e6705cf3e6b9f54 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Tue, 2 Apr 2024 13:38:33 +0100 Subject: [PATCH 06/13] Add other scenarios and update wp.config.sample file --- config/wp.config.sample.ts | 26 +++++++----- src/features/lazy-load.feature | 14 ++++++- src/support/steps/ll-css-bg-image.ts | 60 +++++++++++++++++----------- utils/page-utils.ts | 22 ++++++++++ 4 files changed, 88 insertions(+), 34 deletions(-) diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts index 61bda41..418dd86 100755 --- 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 index 8357f8f..a06f47d 100644 --- 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 \ No newline at end of file + 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 index c64cba8..9bae307 100644 --- 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 = 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) }); \ No newline at end of file diff --git a/utils/page-utils.ts b/utils/page-utils.ts index bf2ce3e..8c0a1b1 100644 --- a/utils/page-utils.ts +++ b/utils/page-utils.ts @@ -579,4 +579,26 @@ export class PageUtils { await activate.click(); } + + public scrollDownBottomOfAPage = async (): Promise => { + await this.page.evaluate(async () => { + const scrollPage: Promise = 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; + }); + } } \ No newline at end of file From 6e6e936f831f83669cef5a2a2d3e847fc26104e5 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Tue, 2 Apr 2024 14:25:34 +0100 Subject: [PATCH 07/13] Remove unused import --- src/support/steps/ll-css-bg-image.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index 9bae307..fe088d4 100644 --- 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, WP_USERNAME} from '../../../config/wp.config'; +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 () => { @@ -111,10 +111,12 @@ Then('Check {string} inputs for background images', async function (this: ICusto } }); await this.page.locator('input[name="lastName"]').nth(1).fill('Random text') - - await this.page.locator('input#fileUpload').hover() + //await this.page.locator('#fileUpload').hover() + //await this.page.getByText('Choose file').click(); await this.utils.scrollDownBottomOfAPage(); + await this.page.locator('#fileUpload').click() + expect(images).toEqual(LL_BACKGROUND_IMAGES[page].lazyLoadedImages) }); \ No newline at end of file From 19a0c546669eb60ccd96a95a948738c64d01803e Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Wed, 3 Apr 2024 11:58:02 +0100 Subject: [PATCH 08/13] Removed unused functions and update config --- config/wp.config.sample.ts | 1 - src/features/lazy-load.feature | 2 +- src/support/steps/ll-css-bg-image.ts | 18 ------------------ 3 files changed, 1 insertion(+), 20 deletions(-) diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts index 418dd86..5030aac 100755 --- a/config/wp.config.sample.ts +++ b/config/wp.config.sample.ts @@ -111,7 +111,6 @@ const LL_BACKGROUND_IMAGES = { ], 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 index a06f47d..08092d8 100644 --- a/src/features/lazy-load.feature +++ b/src/features/lazy-load.feature @@ -21,4 +21,4 @@ Feature: Check if content are lazyloaded while scrolling 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 + Then Check 'll_bg_css_double_colon' input for background images diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index fe088d4..a79e01a 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -100,23 +100,5 @@ Then('Check {string} input for background images', async function (this: ICustom 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('#fileUpload').hover() - //await this.page.getByText('Choose file').click(); - - await this.utils.scrollDownBottomOfAPage(); - - await this.page.locator('#fileUpload').click() - expect(images).toEqual(LL_BACKGROUND_IMAGES[page].lazyLoadedImages) }); \ No newline at end of file From cb0b0ae0dfc4dbc16d21f5fc04abdf7d20946cbe Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 4 Apr 2024 14:29:34 +0100 Subject: [PATCH 09/13] Remove constant from config --- config/wp.config.sample.ts | 71 ---------------------------- src/support/steps/ll-css-bg-image.ts | 68 +++++++++++++++++++++++++- 2 files changed, 67 insertions(+), 72 deletions(-) diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts index 5030aac..a2d89e6 100755 --- a/config/wp.config.sample.ts +++ b/config/wp.config.sample.ts @@ -45,76 +45,6 @@ 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 @@ -190,5 +120,4 @@ export { WP_SSH_KEY, WP_SSH_ROOT_DIR, SCENARIO_URLS, - LL_BACKGROUND_IMAGES }; \ No newline at end of file diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index a79e01a..12b0dd0 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -1,7 +1,6 @@ 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 () => { @@ -61,6 +60,73 @@ Then('I must see the correct style in the head', async function (this: ICustomWo 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 = []; From fe5e7d33b66c53d9a2495b82272e2a3a95c68ca0 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 4 Apr 2024 16:12:28 +0100 Subject: [PATCH 10/13] :sparkles: PR review modifcations --- package.json | 1 - src/features/lazy-load.feature | 2 +- utils/page-utils.ts | 10 ++++++++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 75cfb06..90b29c7 100755 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "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:wpml": "$npm_package_config_testCommand --tags @wpml", "test:delayjs:genesis": "THEME=genesis-sample-develop $npm_package_config_testCommand --tags @delayjs", "test:delayjs:flatsome": "THEME=flatsome $npm_package_config_testCommand --tags @delayjs", diff --git a/src/features/lazy-load.feature b/src/features/lazy-load.feature index 08092d8..288ccc5 100644 --- a/src/features/lazy-load.feature +++ b/src/features/lazy-load.feature @@ -1,4 +1,4 @@ -@llimg @setup +@llcssbg @setup Feature: Check if content are lazyloaded while scrolling Background: Given I am logged in diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 4aaa5a5..9007b27 100644 --- a/utils/page-utils.ts +++ b/utils/page-utils.ts @@ -375,6 +375,11 @@ export class PageUtils { await this.sections.massToggle(); } + /** + * Performs to clear all cache action on WP Rocket. + * + * @return {Promise} + */ public clearWPRCache = async(): Promise => { await this.gotoWpr(); await this.page.waitForLoadState('load', { timeout: 30000 }); @@ -582,6 +587,11 @@ export class PageUtils { await activate.click(); } + /** + * Scroll down to the bottom of a page + * + * @return {Promise} + */ public scrollDownBottomOfAPage = async (): Promise => { await this.page.evaluate(async () => { const scrollPage: Promise = new Promise((resolve) => { From 1eae5cedda25ef0bbcb1dd8d73febe284fd03e45 Mon Sep 17 00:00:00 2001 From: Michael Lee Date: Thu, 4 Apr 2024 23:23:51 +0100 Subject: [PATCH 11/13] Reverted config changes --- config/wp.config.sample.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts index a2d89e6..1115b6b 100755 --- a/config/wp.config.sample.ts +++ b/config/wp.config.sample.ts @@ -45,7 +45,6 @@ const { WP_SSH_ROOT_DIR = '' } = process.env; - /** * Exported Scenario urls to be used for visual regression testing with backstopjs * @exports @@ -119,5 +118,5 @@ export { WP_SSH_ADDRESS, WP_SSH_KEY, WP_SSH_ROOT_DIR, - SCENARIO_URLS, + SCENARIO_URLS }; \ No newline at end of file From 6501c591c8db78787b33119467c8c694962c5682 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 5 Apr 2024 16:18:12 +0100 Subject: [PATCH 12/13] Update template and make base url dynamic --- src/support/steps/ll-css-bg-image.ts | 71 ++++++++++++++++------------ 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index 12b0dd0..5a3a1ba 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -1,6 +1,7 @@ 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 () => { @@ -64,65 +65,73 @@ 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' + `${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', - 'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/image/file_example_JPG_100kB.jpg', + `${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', - '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', + `${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', - 'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/file_example_TIFF_1MB.tiff', + `${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', - 'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/butterfly%202.avif', + `${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', - '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', + `${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', - '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', + `${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', - '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' + `${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: [ - 'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/miguel-luis-6wxFtwSuXHQ-unsplash.jpg' + `${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: [ - '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' + `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/fabio-sasso-UgpCjt4XLTY-unsplash.jpg', + `${WP_BASE_URL}/`+'wp-content/rocket-test-data/images/600px-Mapang-test.gif', + `${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: [ - 'https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/miguel-luis-6wxFtwSuXHQ-unsplash.jpg', + `${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/miguel-luis-6wxFtwSuXHQ-unsplash.jpg', ] } }; From 3a6f9e1232bf00f34ad5a720dbd2799ad8f8aa18 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Sat, 6 Apr 2024 13:08:13 +0100 Subject: [PATCH 13/13] Update command and templates --- package.json | 1 + src/features/lazy-load.feature | 2 +- src/support/steps/ll-css-bg-image.ts | 9 +++++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 90b29c7..6295c34 100755 --- 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: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 index 288ccc5..c5d1a18 100644 --- a/src/features/lazy-load.feature +++ b/src/features/lazy-load.feature @@ -1,4 +1,4 @@ -@llcssbg @setup +@llimages @setup Feature: Check if content are lazyloaded while scrolling Background: Given I am logged in diff --git a/src/support/steps/ll-css-bg-image.ts b/src/support/steps/ll-css-bg-image.ts index 5a3a1ba..44a08ec 100644 --- a/src/support/steps/ll-css-bg-image.ts +++ b/src/support/steps/ll-css-bg-image.ts @@ -121,7 +121,7 @@ const LL_BACKGROUND_IMAGES = { 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/600px-Mapang-test.gif', + `${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', @@ -129,9 +129,14 @@ const LL_BACKGROUND_IMAGES = { `${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/miguel-luis-6wxFtwSuXHQ-unsplash.jpg', + `${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' ] } };