From 511a35909c84dc85d824ac8dd5d6c119c7394718 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Mon, 23 Sep 2024 12:07:44 +0100 Subject: [PATCH] Improve scenario one -- #129 --- src/features/ll-lcp.feature | 8 +-- src/support/steps/lcp-beacon-script.ts | 80 +++++++++++++++++--------- 2 files changed, 57 insertions(+), 31 deletions(-) diff --git a/src/features/ll-lcp.feature b/src/features/ll-lcp.feature index 8694ba6..6dab4fc 100644 --- a/src/features/ll-lcp.feature +++ b/src/features/ll-lcp.feature @@ -1,4 +1,4 @@ -@lcpll +@lcpll @delaylcp @setup Feature: Lazyload with LCP Background: @@ -10,13 +10,13 @@ Feature: Lazyload with LCP And I save settings 'media' 'lazyloadCssBgImg' Scenario: Should Exclude LCP/ATF from Lazyload + And I clear cache When I log out And I visit the urls for 'desktop' When I am logged in And I clear cache - And I visit the urls for 'desktop' and check for lazyload - Then lcp image markup is not written to LL format -# And ATF image markup is not written to LL format + And I visit the urls and check for lazyload + Then lcp and atf images are not written to LL format #Scenario: Should exclude next-gen lcp/atf from LL # Given I install plugin 'imagify' diff --git a/src/support/steps/lcp-beacon-script.ts b/src/support/steps/lcp-beacon-script.ts index cdd7049..43c0d97 100644 --- a/src/support/steps/lcp-beacon-script.ts +++ b/src/support/steps/lcp-beacon-script.ts @@ -8,14 +8,14 @@ * @requires {@link @playwright/test} * @requires {@link @cucumber/cucumber} */ -import { ICustomWorld } from "../../common/custom-world"; -import { expect } from "@playwright/test"; -import { When, Then } from "@cucumber/cucumber"; -import { LcpData, Row } from "../../../utils/types"; - -import { dbQuery, getWPTablePrefix } from "../../../utils/commands"; -import { extractFromStdout } from "../../../utils/helpers"; -import { WP_BASE_URL } from '../../../config/wp.config'; +import {ICustomWorld} from "../../common/custom-world"; +import {expect} from "@playwright/test"; +import {Then, When} from "@cucumber/cucumber"; +import {LcpData, Row} from "../../../utils/types"; + +import {dbQuery, getWPTablePrefix} from "../../../utils/commands"; +import {extractFromStdout} from "../../../utils/helpers"; +import {WP_BASE_URL} from '../../../config/wp.config'; import fs from 'fs/promises'; let data: string, @@ -23,14 +23,14 @@ let data: string, failMsg: string, jsonData: Record, isDbResultAvailable: boolean = true, - lcpLLImages: Array<{ src: string; fetchpriority: string | boolean; lazyloaded: string | boolean }> = []; + lcpLLImages: { [key: string] : { src: string; url: string | boolean; lazyloaded: string | boolean }} = {}; const actual: LcpData = {}; /** - * Executes step to visit page based on the form factor(desktop/mobile) and get the LCP/ATF data from DB. + * Executes step to visit page based on the templates and get check for lazyload. */ -When('I visit the urls for {string} and check for lazyload', async function (this: ICustomWorld, formFactor: string) { +When('I visit the urls and check for lazyload', async function (this: ICustomWorld) { const resultFile: string = './src/support/results/expectedResultsDesktop.json'; await this.page.setViewportSize({ @@ -47,14 +47,20 @@ When('I visit the urls for {string} and check for lazyload', async function (thi // Visit the page url. await this.utils.visitPage(key); - lcpLLImages = await this.page.evaluate(() => { - const images = document.querySelectorAll('img'); - return Array.from(images).map(img => ({ - src: img.getAttribute('src'), - fetchpriority: img.getAttribute('fetchpriority') || false, - lazyloaded: img.classList.contains('lazyloaded') - })); - }); + lcpLLImages = await this.page.evaluate((url) => { + const images = document.querySelectorAll('img'), + result = {}; + + Array.from(images).forEach((img) => { + result[url] = { + src: img.getAttribute('src'), + url: `${WP_BASE_URL}/${key}`, + lazyloaded: img.classList.contains('lazyloaded') + } + }); + + return result; + }, key); } } @@ -103,8 +109,9 @@ When('I visit the urls for {string}', async function (this: ICustomWorld, formFa // Wait the beacon to add an attribute `beacon-complete` to true before fetching from DB. await this.page.waitForFunction(() => { const beacon = document.querySelector('[data-name="wpr-wpr-beacon"]'); + console.log(beacon ? beacon.getAttribute('beacon-completed') : 'No beacon found'); return beacon && beacon.getAttribute('beacon-completed') === 'true'; - }, { timeout: 900000 }); + }, { timeout: 100000 }); if (formFactor !== 'desktop') { isMobile = 1; @@ -208,15 +215,34 @@ Then('lcp image should have fetchpriority', async function (this: ICustomWorld) expect(truthy).toBeTruthy(); }); -Then('lcp image markup is not written to LL format', async function (this: ICustomWorld) { - console.log(lcpLLImages) - /*truthy = false; +Then('lcp and atf images are not written to LL format', async function (this: ICustomWorld) { + // Reset truthy to true here. + truthy = true; - for (const image of lcpImages) { - if(image.lazyloaded === false) { - truthy = true + // Iterate over the data + for (const key in jsonData) { + if (Object.hasOwnProperty.call(jsonData, key) && jsonData[key].enabled === true) { + const expected = jsonData[key]; + // Check for LCP + for (const lcp of expected.lcp) { + // Check if expected lcp is present in actual lcp. + if (lcpLLImages[key].src.includes(lcp) && lcpLLImages[key].lazyloaded) { + truthy = false; + failMsg += `Expected LCP for - ${lcp} for ${lcpLLImages[key].url} is lazyloaded - ${lcpLLImages[key].src}\n\n\n`; + } + } + + // Check for ATF + for (const viewport of expected.viewport) { + if (lcpLLImages[key].src.includes(viewport) && lcpLLImages[key].lazyloaded) { + truthy = false; + failMsg += `Expected Viewport for - ${viewport} for ${lcpLLImages[key].url} is lazyloaded - ${lcpLLImages[key].src} + \n\n\n`; + } + } } } - expect(truthy).toBeTruthy();*/ + // Fail test when there is expectation mismatch. + expect(truthy).toBeTruthy(); }); \ No newline at end of file