As a test engineer, I'd like to run smoke/regression test for new Delay JS script using the tool

[Mai-Saad]

Is your feature request related to a problem? Please describe.
With every change at Delay JS script, we need to:
1- Ensure that no console error with different themes => scenario1
2- The mobile menu is working using a single click with different themes => scenario2
3- The links are clickable => scenario3
4- Ensure that no console error with different plugins => Scenario 4 and todo: gather other plugins to be checked based on issues history
5- Rerun some regression tests related to the script => Tests with e2e playwright automation type here

Describe the solution you'd like
Scenario1: Shouldn't cause console error when enabling Delay JS with different themes
Given Delay JS is enabled
When theme 'x' is activated
And visit the home page
And move the mouse
Then no console error different than nowprocket page

Scenario2: Should the mobile menu work While Delay JS is enabled
Given Delay JS is enabled
And Separate mobile cache is enabled
When theme 'x' is activated
And visit the home page in mobile view
And click on the mobile menu
Then the menu shall expand as same as in nowprocket

Scenario3: Should links be clickable While Delay JS is enabled
Given Delay JS is enabled
And Separate mobile cache is enabled
When theme 'x' is activated
And visit the home page in mobile view
And click on the link in the page
Then the page navigated to the new page

Scenario4: Shouldn't cause console error when enabling Delay JS with WPML
Given WPML is active as 'setup-type'
And Delay JS is enabled
When visiting the test page
And switch language
Then no console error different than nowprocket page

Additional context
Add any other context or screenshots about the feature request here.

• Themes to be checked: Divi, Astra, Avada, Flatsome, Genesis, Bridge, Uncode, Kadence, Neve
• Todo=> For point 5, check what other tests are doable to automate
• Todo=> For 4 Check old issues to gather needed plugins to test and if we need any VR
• For WPML , we need to check the different setup (perhaps this can be in WPML suite instead)

[jeawhanlee]

Scope a solution ✅

• Firstly, we need to install the stated themes outlined above on our e2e dedicated test site.
• Create new feature to hold gherkin step above
• Create a new step definition to handle theme switching in general
  To check for console error different than nowprocket page, We can re-use the step definition here

Then to adjust viewport size for mobile at run-time we can create a new scenario in config and modify this function to allow for addition of viewports option for that specific scenario.

We will also create a new onReadyScript here for this scenario to click the collapsible nav menu as the test demands.

Finally for each of our scenario that asserts this: Then no console error different than nowprocket page we will change that step to something like this:

wp-rocket-e2e/src/features/ll-css-bg-image-fallback-js-disabled.feature

Line 10 in 2955212

Then I must not see any visual regression 'noJsLlcss'

but instead of noJsLlcss we use the new label of the SCENARIO_URLS we added in our config

Estimate the effort ✅

[S]