Add step one test for wpml

.gitignore

@@ -11,4 +11,6 @@
 @rerun.txt
 /backstop_data/bitmaps_reference
 /backstop_data/bitmaps_test
-/backstop_data/html_report
+/backstop_data/html_report
+.DS_Store
+.idea

backstop.json

@@ -7,7 +7,88 @@
       "height": 1080
     }
   ],
-  "scenarios": [],
+  "scenarios": [
+    {
+      "label": "home",
+      "url": "https://e2e.rocketlabsqa.ovh/",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold": 0.1,
+      "requireSameDimensions": true,
+      "onReadyScript": "scrollToBottom.js",
+      "onBeforeScript": ""
+    },
+    {
+      "label": "llcss",
+      "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold": 0.1,
+      "requireSameDimensions": true,
+      "onReadyScript": "scrollToBottom.js",
+      "onBeforeScript": ""
+    },
+    {
+      "label": "noJsLlcss",
+      "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold": 0.1,
+      "requireSameDimensions": true,
+      "onReadyScript": "wait.js",
+      "onBeforeScript": "disableJavascript.js"
+    },
+    {
+      "label": "elementorLlcss",
+      "url": "https://e2e.rocketlabsqa.ovh/elementor-overlay",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold": 0.1,
+      "requireSameDimensions": true,
+      "onReadyScript": "scrollToBottom.js",
+      "onBeforeScript": ""
+    }
+  ],
   "paths": {
     "bitmaps_reference": "backstop_data/bitmaps_reference",
     "bitmaps_test": "backstop_data/bitmaps_test",

package.json

@@ -16,6 +16,7 @@
     "test:online": "$npm_package_config_testCommand --tags @online",
     "test:vr": "$npm_package_config_testCommand --tags @vr",
     "test:llcssbg": "$npm_package_config_testCommand --tags @llcssbg",
+    "test:wpml": "$npm_package_config_testCommand --tags @wpml",
     "wp-env": "wp-env"
   },
   "repository": {

src/features/wpml-compatibility.feature

@@ -0,0 +1,24 @@
+@wpml @setup
+Feature: C14655 - Should LL Background work on main/sub language
+    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'
+
+    Scenario: Check multiple languages are set for wpml directory check
+      Given activate 'wpml-multilingual-cms' plugin
+      Given wpml has more than one languages
+      Given wpml directory is enabled
+
+    Scenario: Open the page with directory lanaguage
+      Then no error in the console different than nowprocket page 'llcss'
+      Then switch to another language
+      Then I must not see any error in debug.log
+
+    Scenario: Change WPML to query string option
+      Given wpml query string is enabled
+      Then no error in the console different than nowprocket page 'llcss'
+      Then switch to another language
+      Then I must not see any error in debug.log

src/support/steps/general.ts

@@ -58,6 +58,14 @@ Given('plugin is activated', async function (this: ICustomWorld) {
     await this.page.locator('a:has-text("Activate Plugin")').click();
 });
 
+/**
+ * Executes the step to activate the WP plugin.
+ */
+Given('activate {string} plugin', async function (plugin) {
+    await this.utils.gotoPlugin();
+    await this.utils.togglePluginActivation(plugin, true);
+});
+
 /**
  * Performs an action to save a specific WP Rocket setting/option.
  * 

src/support/steps/wpml.ts

@@ -0,0 +1,130 @@
+/**
+ * @fileoverview
+ * This module contains Cucumber step definitions using Playwright for various actions and assertions related to WordPress (WP) and WP Rocket plugin.
+ * It includes steps for managing WP accounts, activating and interacting with plugins, handling banners, refreshing pages, saving options, turning on specific settings,
+ * navigating to pages, connecting as a user, and performing cleanup after all scenarios are executed.
+ *
+ * @requires {@link @playwright/test}
+ * @requires {@link @cucumber/cucumber}
+ * @requires {@link ../../../utils/commands}
+ * @requires {@link ../../../utils/configurations}
+ */
+import { Given, Then } from '@cucumber/cucumber';
+import {expect} from "@playwright/test";
+
+/**
+ * Save directory for wpml language setting
+ */
+Given('wpml directory is enabled', async function() {
+    await this.page.waitForSelector('#lang-sec-2');
+    await this.page.locator('input[name="icl_language_negotiation_type"]').nth(0).check()
+
+    await this.page.locator('input[type="submit"]').nth(0).click();
+
+    await this.page.waitForLoadState('load', { timeout: 30000 });
+});
+
+/**
+ * Save query string for wpml language setting
+ */
+Given('wpml query string is enabled', async function () {
+    await this.utils.gotoPage('/wp-admin/admin.php?page=sitepress-multilingual-cms%2Fmenu%2Flanguages.php');
+    await this.page.getByRole('link', {name: 'Language URL format'}).click()
+
+    await this.page.locator('input[name="icl_language_negotiation_type"]').nth(2).check()
+    await this.page.locator('input[type="submit"]').nth(0).click();
+    await this.page.pause()
+
+    await this.page.waitForLoadState('load', { timeout: 30000 });
+});
+
+/**
+ * Save languages settings
+ */
+Given('I save wpml language settings', async function () {
+    await this.page.waitForSelector('#icl_save_language_selection');
+    await this.page.locator('#icl_save_language_selection').click();
+
+    await this.page.waitForLoadState('load', { timeout: 50000 });
+});
+
+/**
+ * Check WPML has multiple languages activated.
+ */
+Given('wpml has more than one languages', async function () {
+    await this.utils.gotoPage('/wp-admin/admin.php?page=sitepress-multilingual-cms%2Fmenu%2Flanguages.php');
+    const languages = await this.page.locator('.enabled-languages li').all()
+
+    if(languages.length >= 5) {
+        return
+    }
+
+    const checkBoxesLength = await this.page.locator('.available-languages li input[type=checkbox]').all()
+
+    await this.page.locator( '#icl_add_remove_button' ).click();
+    let count = 0;
+    const checkboxes = await this.page.$$('.available-languages li input[type=checkbox]');
+
+    for (let i = 0; i < checkBoxesLength.length; ++i) {
+        const randomNumber = Math.floor(Math.random() * checkBoxesLength.length)
+
+        if((await this.page.locator(checkboxes[randomNumber]).checked ) ) {
+            continue;
+        }
+
+        if(count > 3) {
+            break;
+        }
+
+        checkboxes[randomNumber].check()
+        count++;
+    }
+
+    await this.page.locator('#icl_save_language_selection').click();
+});
+
+/**
+ * Switch to another language
+ */
+Then('switch to another language', async function () {
+    const getNextLanguageAnchor = await this.page.locator('.wpml-ls-slot-footer a:not(.wpml-ls-current-language)').first()
+    const getLink = await getNextLanguageAnchor.getAttribute('href');
+    await this.page.goto(getLink)
+
+    await this.page.waitForLoadState('load', { timeout: 30000 });
+
+    const consoleMsg: string[] = [];
+    const consoleHandler = (msg): void => {
+        consoleMsg.push(msg.text());
+    };
+    const pageErrorHandler = (error: Error): void => {
+        consoleMsg.push(error.message);
+    };
+
+    await this.page.evaluate(async () => {
+        // Scroll to the bottom of page.
+        const scrollPage: Promise<void> = 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();
+                }
+            }, 500);
+        });
+
+        await scrollPage;
+    });
+    this.page.pause();
+
+    // Remove the event listeners to prevent duplicate messages.
+    this.page.off('console', consoleHandler);
+    this.page.off('pageerror', pageErrorHandler);
+
+    expect(consoleMsg.length).toEqual(0);
+});

utils/page-utils.ts

@@ -253,6 +253,15 @@ export class PageUtils {
         await this.page.goto(WP_BASE_URL + '/wp-admin/tools.php?page=rocket_e2e_tests_helper');
     }
 
+    /**
+     * Navigates to e2e helper plugin.
+     *
+     * @return  {Promise<void>}
+     */
+    public gotoPage = async (url: string): Promise<void> => {
+        await this.page.goto(WP_BASE_URL + url);
+    }
+
     /**
      * Performs upload new plugin action.
      *