From abf5067e2c1a3d08083f24fc28f934faf7e79f55 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 8 Feb 2024 10:10:46 +0100 Subject: [PATCH 01/12] Add step one test for wpml --- .gitignore | 4 +- backstop.json | 83 +++++++++++++++- package.json | 1 + src/features/wpml-compatibility.feature | 22 +++++ src/support/hooks.ts | 4 +- src/support/steps/general.ts | 16 ++++ src/support/steps/wpml.ts | 120 ++++++++++++++++++++++++ utils/page-utils.ts | 9 ++ 8 files changed, 255 insertions(+), 4 deletions(-) create mode 100644 src/features/wpml-compatibility.feature create mode 100644 src/support/steps/wpml.ts diff --git a/.gitignore b/.gitignore index f59d98a..47b585e 100755 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,6 @@ @rerun.txt /backstop_data/bitmaps_reference /backstop_data/bitmaps_test -/backstop_data/html_report \ No newline at end of file +/backstop_data/html_report +.DS_Store +.idea \ No newline at end of file diff --git a/backstop.json b/backstop.json index 98d6be4..880df80 100644 --- a/backstop.json +++ b/backstop.json @@ -7,7 +7,88 @@ "height": 1080 } ], - "scenarios": [], + "scenarios": [ + { + "label": "home", + "url": "https://e2e.rocketlabsqa.ovh/?nowprocket", + "referenceUrl": "", + "readyEvent": "", + "readySelector": "", + "delay": 0, + "hideSelectors": [], + "removeSelectors": [], + "hoverSelector": "", + "clickSelector": "", + "postInteractionWait": 0, + "selectors": [], + "selectorExpansion": true, + "expect": 0, + "misMatchThreshold": 0.1, + "requireSameDimensions": true, + "onReadyScript": "", + "onBeforeScript": "" + }, + { + "label": "llcss", + "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images?nowprocket", + "referenceUrl": "", + "readyEvent": "", + "readySelector": "", + "delay": 0, + "hideSelectors": [], + "removeSelectors": [], + "hoverSelector": "", + "clickSelector": "", + "postInteractionWait": 0, + "selectors": [], + "selectorExpansion": true, + "expect": 0, + "misMatchThreshold": 0.1, + "requireSameDimensions": true, + "onReadyScript": "", + "onBeforeScript": "" + }, + { + "label": "noJsLlcss", + "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images?nowprocket", + "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?nowprocket", + "referenceUrl": "", + "readyEvent": "", + "readySelector": "", + "delay": 0, + "hideSelectors": [], + "removeSelectors": [], + "hoverSelector": "", + "clickSelector": "", + "postInteractionWait": 0, + "selectors": [], + "selectorExpansion": true, + "expect": 0, + "misMatchThreshold": 0.1, + "requireSameDimensions": true, + "onReadyScript": "", + "onBeforeScript": "" + } + ], "paths": { "bitmaps_reference": "backstop_data/bitmaps_reference", "bitmaps_test": "backstop_data/bitmaps_test", diff --git a/package.json b/package.json index d12d8db..29482b0 100755 --- a/package.json +++ b/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": { diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature new file mode 100644 index 0000000..aed8c0b --- /dev/null +++ b/src/features/wpml-compatibility.feature @@ -0,0 +1,22 @@ +@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 I am logged in + #Given activate 'wpml-multilingual-cms' plugin + Given wpml has more than one languages + #And I save wpml language settings + Given wpml directory is enabled + + Scenario: Open the page template and compare to nowprocket + 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 + #When I log out + diff --git a/src/support/hooks.ts b/src/support/hooks.ts index da3ad56..d591721 100644 --- a/src/support/hooks.ts +++ b/src/support/hooks.ts @@ -45,7 +45,7 @@ BeforeAll(async function (this: ICustomWorld) { await deleteFolder('./backstop_data/bitmaps_test'); browser = await chromium.launch({ headless: false }); - if (process.env.npm_config_vrurl === undefined) { + /*if (process.env.npm_config_vrurl === undefined) { await batchUpdateVRTestUrl({ optimize: false, urls: SCENARIO_URLS @@ -56,7 +56,7 @@ BeforeAll(async function (this: ICustomWorld) { optimize: true, urls: SCENARIO_URLS }); - } + }*/ }); /** diff --git a/src/support/steps/general.ts b/src/support/steps/general.ts index b6d692b..212faf4 100644 --- a/src/support/steps/general.ts +++ b/src/support/steps/general.ts @@ -58,6 +58,22 @@ 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); +}); + +/** + * Enable multiple languages + */ +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. * diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts new file mode 100644 index 0000000..01502b8 --- /dev/null +++ b/src/support/steps/wpml.ts @@ -0,0 +1,120 @@ +/** + * @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 {expect} from "@playwright/test"; +import {AfterAll, BeforeAll} from "@cucumber/cucumber"; +import wp, {activatePlugin, cp, generateUsers, resetWP, rm, setTransient} from "../../../utils/commands"; +import {configurations, getWPDir} from "../../../utils/configurations"; +import {match} from "ts-pattern"; +import {WP_BASE_URL} from "../../../config/wp.config"; + +const { Given, When, Then } = require("@cucumber/cucumber"); + +/** + * Save directory setting for wpml + */ +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: 50000 }); +}); + +/** + * 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 element = this.page.locator('.wpml-ls-slot-footer:not(.wpml-ls-current-language)').first() + + element.click() + + 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 = new Promise((resolve) => { + let totalHeight = 0; + const distance = 100; + const timer = setInterval(() => { + const scrollHeight = document.body.scrollHeight; + window.scrollBy(0, distance); + totalHeight += distance; + + if(totalHeight >= scrollHeight){ + clearInterval(timer); + resolve(); + } + }, 500); + }); + + await scrollPage; + }); + + // Remove the event listeners to prevent duplicate messages. + this.page.off('console', consoleHandler); + this.page.off('pageerror', pageErrorHandler); + + console.log(consoleMsg.length) +}); \ No newline at end of file diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 1ca3210..555ce7e 100644 --- a/utils/page-utils.ts +++ b/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} + */ + public gotoPage = async (url: string): Promise => { + await this.page.goto(WP_BASE_URL + url); + } + /** * Performs upload new plugin action. * From f98a316a8bce62205c59097d6300a6ec7893c079 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 8 Feb 2024 12:14:09 +0100 Subject: [PATCH 02/12] :feat: Complete first step testing with directory --- src/features/wpml-compatibility.feature | 5 ++--- src/support/steps/general.ts | 8 -------- src/support/steps/wpml.ts | 5 ++--- 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index aed8c0b..2d70c2a 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -8,8 +8,7 @@ Feature: C14655 - Should LL Background work on main/sub language And I save settings 'media' 'lazyloadCssBgImg' Scenario: Check multiple languages are set for wpml directory check - Given I am logged in - #Given activate 'wpml-multilingual-cms' plugin + Given activate 'wpml-multilingual-cms' plugin Given wpml has more than one languages #And I save wpml language settings Given wpml directory is enabled @@ -17,6 +16,6 @@ Feature: C14655 - Should LL Background work on main/sub language Scenario: Open the page template and compare to nowprocket 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 + Then I must not see any error in debug.log #When I log out diff --git a/src/support/steps/general.ts b/src/support/steps/general.ts index 212faf4..585a393 100644 --- a/src/support/steps/general.ts +++ b/src/support/steps/general.ts @@ -66,14 +66,6 @@ Given('activate {string} plugin', async function (plugin) { await this.utils.togglePluginActivation(plugin, true); }); -/** - * Enable multiple languages - */ -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. * diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index 01502b8..7577741 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -87,16 +87,15 @@ Then('switch to another language', async function () { const consoleHandler = (msg): void => { consoleMsg.push(msg.text()); }; - const pageErrorHandler = (error: Error): void => { consoleMsg.push(error.message); }; - + await this.page.pause(); await this.page.evaluate(async () => { // Scroll to the bottom of page. const scrollPage: Promise = new Promise((resolve) => { let totalHeight = 0; - const distance = 100; + const distance = 150; const timer = setInterval(() => { const scrollHeight = document.body.scrollHeight; window.scrollBy(0, distance); From 21bf8801c8ee7335d337637420089d6aacf4b951 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 8 Feb 2024 14:36:50 +0100 Subject: [PATCH 03/12] :chore: Add second test scenario for language query strings #23 --- src/features/wpml-compatibility.feature | 8 +++++++- src/support/steps/wpml.ts | 21 ++++++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index 2d70c2a..adbab92 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -17,5 +17,11 @@ Feature: C14655 - Should LL Background work on main/sub language 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 - #When I log out + + 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 + diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index 7577741..be6b8ef 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -19,7 +19,7 @@ import {WP_BASE_URL} from "../../../config/wp.config"; const { Given, When, Then } = require("@cucumber/cucumber"); /** - * Save directory setting for wpml + * Save directory for wpml language setting */ Given('wpml directory is enabled', async function() { await this.page.waitForSelector('#lang-sec-2'); @@ -27,7 +27,22 @@ Given('wpml directory is enabled', async function() { await this.page.locator('input[type="submit"]').nth(0).click(); - await this.page.waitForLoadState('load', { timeout: 50000 }); + 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.pause() + + 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 }); }); /** @@ -90,7 +105,7 @@ Then('switch to another language', async function () { const pageErrorHandler = (error: Error): void => { consoleMsg.push(error.message); }; - await this.page.pause(); + await this.page.evaluate(async () => { // Scroll to the bottom of page. const scrollPage: Promise = new Promise((resolve) => { From eff8d3a3a0eb71534195d18e71af43dc2e354f35 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Thu, 8 Feb 2024 15:34:13 +0100 Subject: [PATCH 04/12] fixed lint error --- src/support/hooks.ts | 4 ++-- src/support/steps/wpml.ts | 9 +-------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/support/hooks.ts b/src/support/hooks.ts index d591721..da3ad56 100644 --- a/src/support/hooks.ts +++ b/src/support/hooks.ts @@ -45,7 +45,7 @@ BeforeAll(async function (this: ICustomWorld) { await deleteFolder('./backstop_data/bitmaps_test'); browser = await chromium.launch({ headless: false }); - /*if (process.env.npm_config_vrurl === undefined) { + if (process.env.npm_config_vrurl === undefined) { await batchUpdateVRTestUrl({ optimize: false, urls: SCENARIO_URLS @@ -56,7 +56,7 @@ BeforeAll(async function (this: ICustomWorld) { optimize: true, urls: SCENARIO_URLS }); - }*/ + } }); /** diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index be6b8ef..eafff3d 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -9,14 +9,7 @@ * @requires {@link ../../../utils/commands} * @requires {@link ../../../utils/configurations} */ -import {expect} from "@playwright/test"; -import {AfterAll, BeforeAll} from "@cucumber/cucumber"; -import wp, {activatePlugin, cp, generateUsers, resetWP, rm, setTransient} from "../../../utils/commands"; -import {configurations, getWPDir} from "../../../utils/configurations"; -import {match} from "ts-pattern"; -import {WP_BASE_URL} from "../../../config/wp.config"; - -const { Given, When, Then } = require("@cucumber/cucumber"); +import { Given, Then } from '@cucumber/cucumber'; /** * Save directory for wpml language setting From 132da45854a4835442f28c201435f325786a4782 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 9 Feb 2024 13:20:50 +0100 Subject: [PATCH 05/12] :feat: Clean up --- backstop.json | 14 +++++++------- src/features/wpml-compatibility.feature | 7 ++----- src/support/hooks.ts | 4 ++-- src/support/steps/wpml.ts | 8 +++++--- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/backstop.json b/backstop.json index 880df80..cae0829 100644 --- a/backstop.json +++ b/backstop.json @@ -10,7 +10,7 @@ "scenarios": [ { "label": "home", - "url": "https://e2e.rocketlabsqa.ovh/?nowprocket", + "url": "https://e2e.rocketlabsqa.ovh/", "referenceUrl": "", "readyEvent": "", "readySelector": "", @@ -25,12 +25,12 @@ "expect": 0, "misMatchThreshold": 0.1, "requireSameDimensions": true, - "onReadyScript": "", + "onReadyScript": "scrollToBottom.js", "onBeforeScript": "" }, { "label": "llcss", - "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images?nowprocket", + "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images", "referenceUrl": "", "readyEvent": "", "readySelector": "", @@ -45,12 +45,12 @@ "expect": 0, "misMatchThreshold": 0.1, "requireSameDimensions": true, - "onReadyScript": "", + "onReadyScript": "scrollToBottom.js", "onBeforeScript": "" }, { "label": "noJsLlcss", - "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images?nowprocket", + "url": "https://e2e.rocketlabsqa.ovh/lazyload_css_background_images", "referenceUrl": "", "readyEvent": "", "readySelector": "", @@ -70,7 +70,7 @@ }, { "label": "elementorLlcss", - "url": "https://e2e.rocketlabsqa.ovh/elementor-overlay?nowprocket", + "url": "https://e2e.rocketlabsqa.ovh/elementor-overlay", "referenceUrl": "", "readyEvent": "", "readySelector": "", @@ -85,7 +85,7 @@ "expect": 0, "misMatchThreshold": 0.1, "requireSameDimensions": true, - "onReadyScript": "", + "onReadyScript": "scrollToBottom.js", "onBeforeScript": "" } ], diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index adbab92..9a82374 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -10,10 +10,9 @@ Feature: C14655 - Should LL Background work on main/sub language Scenario: Check multiple languages are set for wpml directory check Given activate 'wpml-multilingual-cms' plugin Given wpml has more than one languages - #And I save wpml language settings Given wpml directory is enabled - Scenario: Open the page template and compare to nowprocket + 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 @@ -22,6 +21,4 @@ Feature: C14655 - Should LL Background work on main/sub language 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 - - + Then I must not see any error in debug.log \ No newline at end of file diff --git a/src/support/hooks.ts b/src/support/hooks.ts index da3ad56..bfcf15e 100644 --- a/src/support/hooks.ts +++ b/src/support/hooks.ts @@ -46,7 +46,7 @@ BeforeAll(async function (this: ICustomWorld) { browser = await chromium.launch({ headless: false }); if (process.env.npm_config_vrurl === undefined) { - await batchUpdateVRTestUrl({ + /*await batchUpdateVRTestUrl({ optimize: false, urls: SCENARIO_URLS }); @@ -55,7 +55,7 @@ BeforeAll(async function (this: ICustomWorld) { await batchUpdateVRTestUrl({ optimize: true, urls: SCENARIO_URLS - }); + });*/ } }); diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index eafff3d..5762f63 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -29,7 +29,6 @@ Given('wpml directory is enabled', async function() { 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.pause() await this.page.locator('input[name="icl_language_negotiation_type"]').nth(2).check() await this.page.locator('input[type="submit"]').nth(0).click(); @@ -87,9 +86,11 @@ Given('wpml has more than one languages', async function () { * Switch to another language */ Then('switch to another language', async function () { - const element = this.page.locator('.wpml-ls-slot-footer:not(.wpml-ls-current-language)').first() + 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) - element.click() + await this.page.waitForLoadState('load', { timeout: 30000 }); const consoleMsg: string[] = []; const consoleHandler = (msg): void => { @@ -118,6 +119,7 @@ Then('switch to another language', async function () { await scrollPage; }); + this.page.pause(); // Remove the event listeners to prevent duplicate messages. this.page.off('console', consoleHandler); From 07089940c6699e28b2836e3889806f8bde23d531 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 9 Feb 2024 13:22:03 +0100 Subject: [PATCH 06/12] uncoment code --- src/support/hooks.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/support/hooks.ts b/src/support/hooks.ts index bfcf15e..da3ad56 100644 --- a/src/support/hooks.ts +++ b/src/support/hooks.ts @@ -46,7 +46,7 @@ BeforeAll(async function (this: ICustomWorld) { browser = await chromium.launch({ headless: false }); if (process.env.npm_config_vrurl === undefined) { - /*await batchUpdateVRTestUrl({ + await batchUpdateVRTestUrl({ optimize: false, urls: SCENARIO_URLS }); @@ -55,7 +55,7 @@ BeforeAll(async function (this: ICustomWorld) { await batchUpdateVRTestUrl({ optimize: true, urls: SCENARIO_URLS - });*/ + }); } }); From af9662757e3c2e94afede28f7f70c9e11b1370fc Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 9 Feb 2024 13:40:09 +0100 Subject: [PATCH 07/12] add check for console error --- src/support/steps/wpml.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index 5762f63..278afe9 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -10,6 +10,7 @@ * @requires {@link ../../../utils/configurations} */ import { Given, Then } from '@cucumber/cucumber'; +import {expect} from "@playwright/test"; /** * Save directory for wpml language setting @@ -125,5 +126,5 @@ Then('switch to another language', async function () { this.page.off('console', consoleHandler); this.page.off('pageerror', pageErrorHandler); - console.log(consoleMsg.length) + expect(consoleMsg.length).toEqual(0); }); \ No newline at end of file From 425ed8d34ff410e0d7f9a917eec3f0f6a5947486 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Fri, 9 Feb 2024 17:28:58 +0100 Subject: [PATCH 08/12] Review modification --- src/features/wpml-compatibility.feature | 6 ++---- src/support/steps/general.ts | 4 ++-- src/support/steps/wpml.ts | 22 +++++++++++----------- utils/page-utils.ts | 9 --------- 4 files changed, 15 insertions(+), 26 deletions(-) diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index 9a82374..c633d92 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -6,19 +6,17 @@ Feature: C14655 - Should LL Background work on main/sub language 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 + When 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 + When switch to another language Then I must not see any error in debug.log \ No newline at end of file diff --git a/src/support/steps/general.ts b/src/support/steps/general.ts index 585a393..89b11a4 100644 --- a/src/support/steps/general.ts +++ b/src/support/steps/general.ts @@ -61,9 +61,9 @@ Given('plugin is activated', async function (this: ICustomWorld) { /** * Executes the step to activate the WP plugin. */ -Given('activate {string} plugin', async function (plugin) { +Given('activate {string} plugin', async function (this:ICustomWorld, plugin) { await this.utils.gotoPlugin(); - await this.utils.togglePluginActivation(plugin, true); + await this.utils.togglePluginActivation(plugin); }); /** diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index 278afe9..8d2fe75 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -9,13 +9,14 @@ * @requires {@link ../../../utils/commands} * @requires {@link ../../../utils/configurations} */ -import { Given, Then } from '@cucumber/cucumber'; +import { Given, When } from '@cucumber/cucumber'; import {expect} from "@playwright/test"; +import {ICustomWorld} from "../../common/custom-world"; /** * Save directory for wpml language setting */ -Given('wpml directory is enabled', async function() { +Given('wpml directory is enabled', async function(this:ICustomWorld) { await this.page.waitForSelector('#lang-sec-2'); await this.page.locator('input[name="icl_language_negotiation_type"]').nth(0).check() @@ -27,13 +28,12 @@ Given('wpml directory is enabled', async function() { /** * 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'); +Given('wpml query string is enabled', async function (this:ICustomWorld) { + await this.utils.visitPage('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 }); }); @@ -41,7 +41,7 @@ Given('wpml query string is enabled', async function () { /** * Save languages settings */ -Given('I save wpml language settings', async function () { +Given('I save wpml language settings', async function (this:ICustomWorld) { await this.page.waitForSelector('#icl_save_language_selection'); await this.page.locator('#icl_save_language_selection').click(); @@ -51,8 +51,8 @@ Given('I save wpml language settings', async function () { /** * 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'); +Given('wpml has more than one languages', async function (this:ICustomWorld) { + await this.utils.visitPage('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) { @@ -63,12 +63,12 @@ Given('wpml has more than one languages', async function () { await this.page.locator( '#icl_add_remove_button' ).click(); let count = 0; - const checkboxes = await this.page.$$('.available-languages li input[type=checkbox]'); + const checkboxes = this.page.locator('.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 ) ) { + if((await this.page.locator(checkboxes[randomNumber]).isChecked() ) ) { continue; } @@ -86,7 +86,7 @@ Given('wpml has more than one languages', async function () { /** * Switch to another language */ -Then('switch to another language', async function () { +When('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) diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 555ce7e..1ca3210 100644 --- a/utils/page-utils.ts +++ b/utils/page-utils.ts @@ -253,15 +253,6 @@ 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} - */ - public gotoPage = async (url: string): Promise => { - await this.page.goto(WP_BASE_URL + url); - } - /** * Performs upload new plugin action. * From fa4d8650251f968ba4eacdfb734f8bc05a705dd5 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Mon, 12 Feb 2024 15:20:09 +0100 Subject: [PATCH 09/12] pr comment modification --- src/support/steps/wpml.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index 8d2fe75..8a0912a 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -55,7 +55,7 @@ Given('wpml has more than one languages', async function (this:ICustomWorld) { await this.utils.visitPage('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) { + if(languages.length >= 3) { return } @@ -63,20 +63,15 @@ Given('wpml has more than one languages', async function (this:ICustomWorld) { await this.page.locator( '#icl_add_remove_button' ).click(); let count = 0; - const checkboxes = this.page.locator('.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]).isChecked() ) ) { - continue; - } - if(count > 3) { break; } - checkboxes[randomNumber].check() + await this.page.locator('.available-languages li input[type=checkbox]').nth(randomNumber).check() count++; } @@ -120,7 +115,6 @@ When('switch to another language', async function () { await scrollPage; }); - this.page.pause(); // Remove the event listeners to prevent duplicate messages. this.page.off('console', consoleHandler); From a5d5204eb9d38f05ad73ec76a6d53bf9dd87c180 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Tue, 13 Feb 2024 10:54:11 +0100 Subject: [PATCH 10/12] more review modifications --- .gitignore | 3 +- backstop.json | 80 ------------------------- src/features/wpml-compatibility.feature | 4 +- src/support/steps/wpml.ts | 4 +- 4 files changed, 6 insertions(+), 85 deletions(-) diff --git a/.gitignore b/.gitignore index 47b585e..9280d5f 100755 --- a/.gitignore +++ b/.gitignore @@ -13,4 +13,5 @@ /backstop_data/bitmaps_test /backstop_data/html_report .DS_Store -.idea \ No newline at end of file +.idea +backstop.json \ No newline at end of file diff --git a/backstop.json b/backstop.json index cae0829..4f94cd8 100644 --- a/backstop.json +++ b/backstop.json @@ -8,86 +8,6 @@ } ], "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", diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index c633d92..1fcd891 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -7,8 +7,8 @@ Feature: C14655 - Should LL Background work on main/sub language When I go to 'wp-admin/options-general.php?page=wprocket#dashboard' And I save settings 'media' 'lazyloadCssBgImg' Given activate 'wpml-multilingual-cms' plugin - Given wpml has more than one languages - Given wpml directory is enabled + And wpml has more than one languages + And wpml directory is enabled Scenario: Open the page with directory lanaguage Then no error in the console different than nowprocket page 'llcss' diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index 8a0912a..fb93784 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -81,8 +81,8 @@ Given('wpml has more than one languages', async function (this:ICustomWorld) { /** * Switch to another language */ -When('switch to another language', async function () { - const getNextLanguageAnchor = await this.page.locator('.wpml-ls-slot-footer a:not(.wpml-ls-current-language)').first() +When('switch to another language', async function (this:ICustomWorld) { + const getNextLanguageAnchor = 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) From e854f3daf0bdf7369b0cc28f224a6f80811038c2 Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Wed, 3 Apr 2024 13:00:38 +0100 Subject: [PATCH 11/12] Fixed merge error --- src/features/wpml-compatibility.feature | 3 ++- src/support/steps/general.ts | 8 -------- src/support/steps/wpml.ts | 12 ------------ 3 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index 1fcd891..bfda2a8 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -6,7 +6,8 @@ Feature: C14655 - Should LL Background work on main/sub language And plugin is activated When I go to 'wp-admin/options-general.php?page=wprocket#dashboard' And I save settings 'media' 'lazyloadCssBgImg' - Given activate 'wpml-multilingual-cms' plugin + When I go to 'wp-admin/plugins.php' + And activate 'wpml-multilingual-cms' plugin And wpml has more than one languages And wpml directory is enabled diff --git a/src/support/steps/general.ts b/src/support/steps/general.ts index aae3773..89fd6e4 100644 --- a/src/support/steps/general.ts +++ b/src/support/steps/general.ts @@ -57,14 +57,6 @@ 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 (this:ICustomWorld, plugin) { - await this.utils.gotoPlugin(); - await this.utils.togglePluginActivation(plugin); -}); - /** * Performs an action to save a specific WP Rocket setting/option. * diff --git a/src/support/steps/wpml.ts b/src/support/steps/wpml.ts index fb93784..3d651c0 100644 --- a/src/support/steps/wpml.ts +++ b/src/support/steps/wpml.ts @@ -13,18 +13,6 @@ import { Given, When } from '@cucumber/cucumber'; import {expect} from "@playwright/test"; import {ICustomWorld} from "../../common/custom-world"; -/** - * Save directory for wpml language setting - */ -Given('wpml directory is enabled', async function(this:ICustomWorld) { - 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 */ From 88276f38afb3c0297971c7d86e1d750a1297f8df Mon Sep 17 00:00:00 2001 From: Opeyemi Ibrahim Date: Wed, 3 Apr 2024 14:41:14 +0100 Subject: [PATCH 12/12] Modify function for plugin activation and change page url --- src/features/wpml-compatibility.feature | 4 ++-- utils/page-utils.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/features/wpml-compatibility.feature b/src/features/wpml-compatibility.feature index bfda2a8..8d0d69b 100644 --- a/src/features/wpml-compatibility.feature +++ b/src/features/wpml-compatibility.feature @@ -12,12 +12,12 @@ Feature: C14655 - Should LL Background work on main/sub language And wpml directory is enabled Scenario: Open the page with directory lanaguage - Then no error in the console different than nowprocket page 'llcss' + Then no error in the console different than nowprocket page 'lazyload_css_background_images' When 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 no error in the console different than nowprocket page 'lazyload_css_background_images' When switch to another language Then I must not see any error in debug.log \ No newline at end of file diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 6af5c80..58032ef 100644 --- a/utils/page-utils.ts +++ b/utils/page-utils.ts @@ -216,7 +216,9 @@ export class PageUtils { } const action = activate ? '#activate-' : '#deactivate-'; - await this.page.locator(action + pluginSlug).click(); + if (await this.page.locator(action + pluginSlug).isVisible()) { + await this.page.locator(action + pluginSlug).click(); + } if (!activate) { if (await this.page.locator('a:has-text("Force deactivation")').isVisible()) {