Merge pull request #145 from wp-media/enhancement/137-vr-on-template

Closes #137 LRC visual regression on live templates

backstop_data/engine_scripts/wait.js

@@ -1,3 +1,3 @@
 module.exports = async (page) => {
-    await page.waitForTimeout(15000); 
+    await page.waitForTimeout(3000); 
 };

config/scenarioUrls.json

@@ -20,40 +20,66 @@
       "path": "ll_bg_css_single_colon"
     }
   },
+  "test:lrc": {
+    "delayJs13Live": {
+      "path": "delayjs_1-3_live_template"
+    },
+    "delayJs68Live": {
+      "path": "delayjs_68_live_template"
+    },
+    "lcp6647Live": {
+      "path": "lcp_6647_live"
+    },
+    "lcpLive4Template": {
+      "path": "lcp_live_4_template"
+    },
+    "lcpLiveTestSpan": {
+      "path": "lcp_live_test_span"
+    },
+    "rucss5213Template": {
+      "path": "rucss_5213_template"
+    },
+    "template4787": {
+      "path": "4787-2"
+    },
+    "lrcWillSite": {
+      "path": "lrc_will_site"
+    }
+  },
   "test:delayjs:genesis": {
     "delayJs": {
       "path": ""
     },
     "delayJsMobile": {
-        "path": "",
-        "mobile": true
+      "path": "",
+      "mobile": true
     }
   },
   "test:delayjs:flatsome": {
     "delayJs": {
       "path": ""
     },
     "delayJsMobile": {
-        "path": "",
-        "mobile": true
+      "path": "",
+      "mobile": true
     }
   },
   "test:delayjs:divi": {
     "delayJs": {
       "path": ""
     },
     "delayJsMobile": {
-        "path": "",
-        "mobile": true
+      "path": "",
+      "mobile": true
     }
   },
   "test:delayjs:astra": {
     "delayJs": {
       "path": ""
     },
     "delayJsMobile": {
-        "path": "",
-        "mobile": true
+      "path": "",
+      "mobile": true
     }
   }
 }

config/wp.config.sample.ts

@@ -60,7 +60,6 @@ const {
  * }}
 */
 
-
 const scriptName = process.env.npm_lifecycle_event;
 const SCENARIO_URLS = ScenarioUrls[scriptName];
 

package.json

@@ -24,6 +24,7 @@
     "test:llimages": "$npm_package_config_testCommand --tags @llimages",
     "test:lcp": "$npm_package_config_testCommand --tags @lcp",
     "test:test": "$npm_package_config_testCommand --tags @test",
+    "test:lrc": "$npm_package_config_testCommand --tags @lrc",
     "test:performancehints": "$npm_package_config_testCommand --tags @performancehints",
     "healthcheck": "ts-node healthcheck.ts",
     "wp-env": "wp-env"

src/features/lrc-visual-regression.feature

@@ -0,0 +1,16 @@
+@setup @lrc
+Feature: LRC Visual Regression Test on Live Template
+
+  Background:
+    Given I am logged in
+    And plugin is installed 'new_release'
+    And plugin is activated
+    And I go to 'wp-admin/options-general.php?page=wprocket#dashboard'
+
+    Scenario: Shouldn't have any visual regression when visiting
+      When I log out
+      And I visit scenario urls
+      And I am logged in
+      And I clear cache
+      Then I must not see any visual regression in scenario urls
+

src/support/steps/general.ts

@@ -14,7 +14,7 @@ import { expect } from "@playwright/test";
 import { ICustomWorld } from "../../common/custom-world";
 
 import { Given, When, Then } from '@cucumber/cucumber';
-import { WP_BASE_URL } from '../../../config/wp.config';
+import {SCENARIO_URLS, WP_BASE_URL} from '../../../config/wp.config';
 import { createReference, compareReference } from "../../../utils/helpers";
 import type { Section } from "../../../utils/types";
 import { Page } from '@playwright/test';
@@ -245,7 +245,8 @@ When('I clear cache', async function (this:ICustomWorld) {
     await this.utils.gotoWpr();
 
     this.sections.set('dashboard');
-    await this.sections.toggle('clearCacheBtn');
+    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();
 });
 
@@ -261,6 +262,20 @@ When('I visit page {string} with browser dimension {int} x {int}', async functio
     await this.utils.visitPage(page);
 });
 
+/**
+ * Executes the step to visit scenario urls for visual regression testing in a specific browser dimension.
+ */
+When('I visit scenario urls', async function (this:ICustomWorld) {
+    await this.page.setViewportSize({
+        width: 1600,
+        height: 700,
+    });
+    const liveUrl = SCENARIO_URLS;
+
+    for (const key in liveUrl) {
+        await this.utils.visitPage(liveUrl[key].path);
+    }
+});
 /**
  * Executes the step to visit beacon driven page in a specific browser dimension.
  */
@@ -326,6 +341,17 @@ Then('I must not see any visual regression {string}', async function (this: ICus
     await compareReference(label);
 });
 
+/**
+ * Executes the step to check for LRC visual regression.
+ */
+Then('I must not see any visual regression in scenario urls', async function (this: ICustomWorld) {
+    const liveUrl = SCENARIO_URLS;
+
+    for (const key in liveUrl) {
+        await compareReference(key);
+    }
+});
+
 /**
  * Executes the step to check for that there is no console error different from the nowprocket page version.
  */

utils/helpers.ts

@@ -273,7 +273,7 @@ export const batchUpdateVRTestUrl = async(config: VRurlConfig): Promise<void> =>
         }
         else{
             beforeScript = '';
-            readyScript = config.optimize ? 'scrollToBottom.js' : '';
+            readyScript = 'scrollToBottom.js';
         }
 
         viewports = 'mobile' in urls[key] && urls[key].mobile ? mobileViewport : [];