diff --git a/package.json b/package.json index ece102e..6a77ade 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: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 new file mode 100644 index 0000000..c5d1a18 --- /dev/null +++ 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 index 9ceec0e..e5efa23 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..44a08ec 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 {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) }); \ No newline at end of file diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 58032ef..9007b27 100644 --- 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} + */ + 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. * @@ -571,4 +586,31 @@ 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) => { + + 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