Closes #70 Add scenario for pages without LCP/ATF

src/support/steps/general.ts

@@ -18,7 +18,9 @@ import { WP_BASE_URL } from '../../../config/wp.config';
 import { createReference, compareReference } from "../../../utils/helpers";
 import type { Section } from "../../../utils/types";
 import { Page } from '@playwright/test';
-
+import {
+    deactivatePlugin, installRemotePlugin,
+} from "../../../utils/commands";
 /**
  * Executes the step to log in.
  */
@@ -75,7 +77,6 @@ Given('I save settings {string} {string}', async function (this: ICustomWorld, s
     await this.page.waitForLoadState('load', { timeout: 30000 });
 });
 
-/**
 /**
  * Executes the step to activate the WP plugin.
  */
@@ -326,4 +327,18 @@ Then('page navigated to the new page {string}', async function (this: ICustomWor
     const url = `${WP_BASE_URL}/${path}`;
     const regex = new RegExp(url);
     await expect(this.page).toHaveURL(regex);
+});
+
+/**
+ * Executes the step to deactivate a specified WP plugin via CLI.
+ */
+Given('plugin {word} is deactivated', async function (plugin) {
+    await deactivatePlugin(plugin)
+});
+
+/**
+ * Executes the step to install a WP plugin from a remote url via CLI.
+ */
+Given('I install plugin {string}', async function (pluginUrl) {
+    await installRemotePlugin(pluginUrl)
 });

src/support/steps/lcp-beacon-script.ts

@@ -10,8 +10,8 @@
  */
 import { ICustomWorld } from "../../common/custom-world";
 import { expect } from "@playwright/test";
-import { Given, Then } from "@cucumber/cucumber";
-import { LcpDataTable, LcpData, Row } from "../../../utils/types";
+import { Given, Then, When } from "@cucumber/cucumber";
+import {LcpDataTable, LcpData, Row, NoLcpData} from "../../../utils/types";
 import axios from 'axios';
 import { dbQuery, getWPTablePrefix } from "../../../utils/commands";
 import { extractFromStdout } from "../../../utils/helpers";
@@ -22,6 +22,7 @@ let data: LcpDataTable[],
     failMsg: string = "";
 
 const [actual, expected]: [LcpData, LcpData] = [{}, {}];
+const [noATF, expectedATF]: [NoLcpData, NoLcpData] = [{}, {}];
 
 /**
  * Executes step to visit page based on the form factor(desktop/mobile) and get the LCP/ATF data from DB.
@@ -147,4 +148,81 @@ Then('lcp and atf should be as expected in {string}', async function (this: ICus
     }
 
     expect(truthy, failMsg).toBeTruthy();
-});
+});
+
+/**
+ *
+ */
+When('I go to {string} in {string}', async function (this: ICustomWorld, page, formFactor: string) {
+    let viewPortWidth: number = 1600,
+        viewPortHeight: number = 700;
+
+    // Set page to be visited in mobile.
+    if ( formFactor === 'mobile' ) {
+        viewPortWidth = 393;
+        viewPortHeight = 830;
+    }
+
+
+    await this.page.waitForLoadState('load', { timeout: 100000 });
+
+    await this.page.setViewportSize({
+        width: viewPortWidth,
+        height: viewPortHeight
+    });
+
+    const tablePrefix: string = await getWPTablePrefix();
+
+    await this.utils.visitPage(page);
+
+    // 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-lcp-beacon"]');
+        return beacon && beacon.getAttribute('beacon-completed') === 'true';
+    });
+
+    // Get the LCP/ATF from the DB
+    const sql = `SELECT lcp, viewport FROM ${tablePrefix}wpr_above_the_fold WHERE url LIKE "%${page}%"`;
+    const result = await dbQuery(sql);
+    const resultFromStdout = await extractFromStdout(result);
+
+    noATF[0] = {
+        type: formFactor,
+        lcp: resultFromStdout[0].lcp,
+        viewport: resultFromStdout[0].viewport
+    }
+
+    expectedATF[0] = {
+        type: formFactor,
+        lcp: 'not found',
+        viewport: '[]'
+    }
+})
+
+/**
+ * Executes step to visit page based on the form factor(desktop/mobile) and get the LCP/ATF data from DB.
+ */
+Then('I must not see any LCP or ATF', async function (this: ICustomWorld) {
+    for (const key in noATF) {
+        if (Object.hasOwnProperty.call(noATF, key)) {
+            const [actualType, expectedType, actualLcp, expectedLcp, actualViewport, expectedViewport] = [noATF[key].type, expectedATF[key].type, noATF[key].lcp, expectedATF[key].lcp, noATF[key].viewport, expectedATF[key].viewport];
+
+            // Check if expected lcp is present in actual lcp.
+            if (!actualLcp.includes(expectedLcp)) {
+                truthy = false;
+                failMsg += `Expected LCP - ${expectedLcp} for ${expectedType} is not present in actual - ${actualLcp} for ${actualType}\n\n\n`;
+            }
+
+            if (!actualViewport.includes(expectedViewport)) {
+                truthy = false;
+                failMsg += `Expected Viewport - ${expectedViewport} for ${expectedType} is not present in actual - ${actualViewport} for ${actualType}\n\n\n`;
+            }
+        }
+    }
+
+    if ( failMsg !== '' ) {
+        console.log(failMsg);
+    }
+
+    expect(truthy, failMsg).toBeTruthy();
+})

src/support/steps/steps.ts

@@ -11,7 +11,14 @@
  */
 import {expect} from "@playwright/test";
 import {AfterAll, BeforeAll} from "@cucumber/cucumber";
-import wp, {activatePlugin, cp, generateUsers, resetWP, rm, setTransient} from "../../../utils/commands";
+import wp, {
+    activatePlugin,
+    cp,
+    generateUsers,
+    resetWP,
+    rm,
+    setTransient
+} from "../../../utils/commands";
 import {configurations, getWPDir} from "../../../utils/configurations";
 import {match} from "ts-pattern";
 

utils/commands.ts

@@ -223,6 +223,20 @@ export async function activatePlugin(name: string): Promise<void>  {
      await wp(`plugin activate ${name}`)
 }
 
+/**
+ * Install a WordPress plugin from a remote zip file using the WP-CLI command.
+ *
+ * @function
+ * @name installRemotePlugin
+ * @async
+ * @param {string} url - The remote zip url of the plugin to be installed.
+ * @returns {Promise<void>} - A Promise that resolves when the installation is completed.
+ */
+export async function installRemotePlugin(url: string): Promise<void>  {
+    await wp(`plugin install ${url}`)
+}
+
+
 /**
  * Executes a SQL query on the WordPress database using WP-CLI.
  *

utils/types.ts

@@ -114,4 +114,12 @@ export interface LcpData {
 
 export interface Row {
     [key: string]: string
+}
+
+export interface NoLcpData {
+    [key: string]: {
+        type: string,
+        lcp: string,
+        viewport: string
+    }
 }