Fixed conflicts

backstop.json

@@ -7,8 +7,7 @@
       "height": 1080
     }
   ],
-  "scenarios": [
-  ],
+  "scenarios": [],
   "paths": {
     "bitmaps_reference": "backstop_data/bitmaps_reference",
     "bitmaps_test": "backstop_data/bitmaps_test",

config/wp.config.sample.ts

@@ -1,3 +1,4 @@
+import ScenarioUrls from "./scenarioUrls.json";
 /**
  * The default WordPress admin user configuration for both local and live environments.
  * @constant
@@ -15,6 +16,16 @@ const WP_ADMIN_USER = {
 
 } as const;
 
+/**
+ * The default Imagify settings information
+ *
+ * @constant
+ * @type {{ apiKey: string }}
+ */
+const IMAGIFY_INFOS = {
+	apiKey: ''
+} as const;
+
 /**
  * Extracted environment variables related to WordPress configuration.
  * Uses default values if environment variables are not set.
@@ -62,7 +73,9 @@ const {
  *	 mobile?: boolean
  *	}
  * }}
-*/
+ */
+const scriptName = process.env.npm_lifecycle_event;
+const SCENARIO_URLS = ScenarioUrls[scriptName];
 
 /**
  * Exported WordPress environment configuration.
@@ -86,7 +99,7 @@ const {
  * 		llcss: string;	
  * 		noJsLlcss: string;
  * 		elementorLlcss: string;
- * 	 }
+ * 	 },
  * }}
  */
 export { 
@@ -102,5 +115,7 @@ export {
 	WP_SSH_USERNAME,
 	WP_SSH_ADDRESS,
 	WP_SSH_KEY,
-	WP_SSH_ROOT_DIR
+	WP_SSH_ROOT_DIR,
+	SCENARIO_URLS,
+	IMAGIFY_INFOS
 };

package.json

@@ -10,8 +10,8 @@
   "scripts": {
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint  . --ext .ts --fix",
-    "test:e2e": "$npm_package_config_testCommand --tags \"not @vr\"",
-    "test:smoke": "$npm_package_config_testCommand --tags @smoke",
+    "test:e2e": "$npm_package_config_testCommand  --tags \"not @vr\" ; npm run push-report --tag=$npm_config_tag",
+    "test:smoke": "$npm_package_config_testCommand --tags @smoke ; npm run push-report --tag=$npm_config_tag",
     "test:local": "$npm_package_config_testCommand --tags @local",
     "test:online": "$npm_package_config_testCommand --tags @online",
     "test:vr": "$npm_package_config_testCommand --tags @vr $npm_config_wproption",
@@ -23,6 +23,7 @@
     "test:cpcss": "$npm_package_config_testCommand --tags @cpcss",
     "test:performancehints": "$npm_package_config_testCommand --tags @performancehints",
     "healthcheck": "ts-node healthcheck.ts",
+    "push-report": "ts-node report.ts",
     "wp-env": "wp-env"
   },
   "repository": {

report.ts

@@ -0,0 +1,55 @@
+import path from "path";
+import {promises as fs} from "fs";
+
+/**
+ * Moves test results to a destination directory with optional renaming
+ *
+ * @param {string} testTag Tag name of the report generated.
+ * @returns Promise<string> Path where the folder was moved to
+ */
+export async function moveTestReport(testTag: string): Promise<string> {
+    const SOURCE_FOLDER = 'test-results';
+    const destinationDir = '/var/shared/rocket-e2e-reports';
+
+    // Validate source folder exists
+    try {
+        await fs.access(SOURCE_FOLDER);
+    } catch (error) {
+        throw new Error(`Source folder '${SOURCE_FOLDER}' does not exist`);
+    }
+
+    // Ensure destination directory exists
+    try {
+        await fs.access(destinationDir);
+    } catch (error) {
+        throw new Error(`Destination directory '${destinationDir}' does not exist`);
+    }
+
+    const newTestReportPath = path.join(destinationDir, testTag);
+
+    try {
+        await fs.rename(SOURCE_FOLDER, newTestReportPath);
+
+        return newTestReportPath;
+    } catch (error) {
+        throw new Error(`Failed to move folder: ${error.message}`);
+    }
+}
+
+(async (): Promise<void> => {
+    try {
+        const tag = process.env.npm_config_tag;
+
+        //If tag is not provided, then the report shouldn't be moved or renamed.
+        if(! tag) {
+            process.exit(1);
+        }
+
+        await moveTestReport(tag);
+    } catch (err) {
+        console.error(`Failed to execute the script: ${err.message}`);
+        process.exit(1);
+    }
+
+    process.exit(0);
+})();

src/features/ll-lcp.feature

@@ -0,0 +1,46 @@
+@lcp @delaylcp @setup
+Feature: Lazyload with LCP
+
+  Background:
+    Given I am logged in
+    And plugin is installed 'new_release'
+    And plugin 'wp-rocket' is activated
+    When I go to 'wp-admin/options-general.php?page=wprocket#dashboard'
+    And I save settings 'media' 'lazyloadCssBgImg'
+    And I save settings 'media' 'lazyload'
+    And I save settings 'media' 'lazyloadIframes'
+    And I save settings 'media' 'lazyloadYoutube'
+
+  Scenario: Should Exclude LCP/ATF from Lazyload
+    When I log out
+    And I visit the urls for 'desktop'
+    When I am logged in
+    And I clear cache
+    And I log out
+    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'
+    And plugin 'imagify' is activated
+    When I am logged in
+    And Imagify is set up
+    When I log out
+    And I visit page 'lcp_with_imagify' and check for lcp
+    When I am logged in
+    And I clear cache
+    And I log out
+    And I visit the 'lcp_with_imagify' and check lcp-atf are not lazyloaded
+    Then lcp and atf images are not written to LL format
+
+  Scenario: Should exclude Imagify next-gen lcp/atf from LL
+    When I am logged in
+    And display next-gen is enabled on imagify
+    When I log out
+    And I visit page 'lcp_with_imagify' and check for lcp
+    When I am logged in
+    And I clear cache
+    And I log out
+    And I visit the 'lcp_with_imagify' and check lcp-atf are not lazyloaded
+    Then lcp and atf images are not written to LL format
+

src/support/steps/general.ts

@@ -276,8 +276,10 @@ When('I clear cache', async function (this:ICustomWorld) {
     await this.utils.gotoWpr();
 
     this.sections.set('dashboard');
+
     const cacheButton = this.page.locator('p:has-text("This action will clear") + a').first();
     await cacheButton.click();
+
     await expect(this.page.getByText('WP Rocket: Cache cleared.')).toBeVisible();
 });
 

src/support/steps/imagify.ts

@@ -0,0 +1,31 @@
+import { ICustomWorld } from "../../common/custom-world";
+
+import { Given } from '@cucumber/cucumber';
+import { IMAGIFY_INFOS } from "../../../config/wp.config";
+import {expect} from "@playwright/test";
+
+Given('Imagify is set up', async function (this: ICustomWorld) {
+    await this.utils.gotoImagify();
+
+    // Check if the API key input field exists on the page
+    const apiKeyInput = await this.page.$('input#api_key');
+
+    if (apiKeyInput) {
+        // Fill the API key input field with the API key from the config
+        await this.page.fill('input#api_key', IMAGIFY_INFOS.apiKey);
+        // Click the submit button to save the changes
+        await this.page.click('div.submit.imagify-clearfix input#submit');
+    }
+});
+Given('display next-gen is enabled on imagify', async function (this: ICustomWorld) {
+    // Go to Imagify setting page
+    await this.utils.gotoImagify();
+
+    // Check the 'Display images in Next-Gen format on the site' checkbox
+    await this.page.click('label[for="imagify_display_nextgen"]');
+
+    // Click the submit button to save the changes
+    await this.page.click('input#submit');
+
+    await expect(this.page.getByText('Settings saved.')).toBeVisible();
+});