Closes #129 Automate the scenario that check LL isnot applied on LCP/ATF images

config/wp.config.sample.ts

@@ -15,6 +15,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.
@@ -99,5 +109,6 @@ export {
 	WP_SSH_ADDRESS,
 	WP_SSH_KEY,
 	WP_SSH_ROOT_DIR,
-	SCENARIO_URLS
+	SCENARIO_URLS,
+	IMAGIFY_INFOS
 };

package.json

@@ -12,6 +12,7 @@
     "lint:fix": "eslint  . --ext .ts --fix",
     "test:e2e": "$npm_package_config_testCommand",
     "test:smoke": "$npm_package_config_testCommand --tags @smoke",
+    "test:lcpll": "$npm_package_config_testCommand --tags @lcpll",
     "test:local": "$npm_package_config_testCommand --tags @local",
     "test:online": "$npm_package_config_testCommand --tags @online",
     "test:vr": "$npm_package_config_testCommand --tags @vr",

src/features/ll-lcp.feature

@@ -0,0 +1,44 @@
+@lcpll @delaylcp @setup
+Feature: Lazyload with LCP
+
+  Background:
+    Given I am logged in
+    And delete 'wp-rocket' plugin
+    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'
+
+  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 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 save settings 'media' 'lazyloadCssBgImg'
+    And I clear cache
+    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 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 save settings 'media' 'lazyloadCssBgImg'
+    And I clear cache
+    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

@@ -19,7 +19,7 @@ import { createReference, compareReference } from "../../../utils/helpers";
 import type { Section } from "../../../utils/types";
 import { Page } from '@playwright/test';
 import {
-    deactivatePlugin, installRemotePlugin,
+    deactivatePlugin, deletePlugin, installRemotePlugin,
 } from "../../../utils/commands";
 /**
  * Executes the step to log in.
@@ -93,6 +93,13 @@ Given('activate {string} plugin', async function (this: ICustomWorld, plugin) {
     await this.utils.togglePluginActivation(plugin);
 });
 
+/**
+ * Executes the step to delete a WP plugin.
+ */
+Given('delete {string} plugin', async function (this: ICustomWorld, plugin) {
+    await deletePlugin(plugin)
+});
+
 /**
  * Executes the step to log in.
  */
@@ -245,7 +252,8 @@ When('I clear cache', async function (this:ICustomWorld) {
     await this.utils.gotoWpr();
 
     this.sections.set('dashboard');
-    await this.sections.toggle('clearCacheBtn');
+    await this.page.locator("text=Clear and preload").last().click();
+    //await this.sections.toggle('clearCacheBtn');
     await expect(this.page.getByText('WP Rocket: Cache cleared.')).toBeVisible();
 });
 

src/support/steps/imagify.ts

@@ -0,0 +1,28 @@
+import { ICustomWorld } from "../../common/custom-world";
+
+import { Given } from '@cucumber/cucumber';
+import { IMAGIFY_INFOS } from "../../../config/wp.config";
+
+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');
+});