Regression testing: google drive reference image storage support

.gitignore

@@ -94,6 +94,7 @@ site-template
 theme/.env
 
 ### BackstopJS Files ###
+theme/test_data/bitmaps_reference/
 theme/test_data/bitmaps_test/
 theme/test_data/html_report/
 

theme/env_template

@@ -6,3 +6,13 @@ AEM_SITE=<site name>
 
 # AEM proxy port
 AEM_PROXY_PORT=7000
+
+# AEM username
+AEM_USERNAME=admin
+
+
+# AEM password
+AEM_PASSWORD=admin
+
+# (OPTIONAL) Path to google drive regression test images
+GOOGLE_DRIVE_TEST_IMAGES_PATH=G:/.shortcut-targets-by-id/{id of shared drive}/regresstiontestimages

theme/live.test.config.js

@@ -1,61 +1,58 @@
 const config = require("./test.config");
 
+const baseURL = `http://localhost:4502/content/${config.aemSite}/`;
+const queryParams = "?wcmmode=disabled";
+
+// add pages you want tested here:
+const pagesToTest = ["en/home.html", "guide.html"];
+
+// add advanced tests here:
+const scenarios = [
+  // {
+  //   label: "",
+  //   url: ``,
+  //   cookiePath: "",
+  //   referenceUrl: "",
+  //   readyEvent: "",
+  //   readySelector: "",
+  //   delay: 0,
+  //   hideSelectors: [],
+  //   removeSelectors: [],
+  //   hoverSelector: "",
+  //   clickSelector: "",
+  //   postInteractionWait: 0,
+  //   selectors: [],
+  //   selectorExpansion: true,
+  //   expect: 0,
+  // },
+  {
+    label: "mobile-menu",
+    login: config.aemLogin,
+    url: baseURL + "en/home.html",
+    viewports: [
+      {
+        label: "phone",
+        width: 320,
+        height: 480,
+      },
+    ],
+    clickSelector: "#mobile-header-button",
+  },
+];
+
+pagesToTest.forEach((url) => {
+  const name = url.slice(url.lastIndexOf("/") + 1, url.indexOf(".html"));
+
+  scenarios.push({
+    label: name,
+    login: config.aemLogin,
+    url: baseURL + url + queryParams,
+  });
+});
+
 module.exports = {
   ...config,
-  scenarios: [
-    // {
-    //   label: "",
-    //   url: ``,
-    //   cookiePath: "",
-    //   referenceUrl: "",
-    //   readyEvent: "",
-    //   readySelector: "",
-    //   delay: 0,
-    //   hideSelectors: [],
-    //   removeSelectors: [],
-    //   hoverSelector: "",
-    //   clickSelector: "",
-    //   postInteractionWait: 0,
-    //   selectors: [],
-    //   selectorExpansion: true,
-    //   expect: 0,
-    // },
-    {
-      label: "Home",
-      login: config.aemLogin,
-      url: `http://localhost:${config.aemPort + 1}/content/${
-        config.aemSite
-      }/en/home.html`,
-      cookiePath: "",
-      referenceUrl: "",
-      readyEvent: "",
-      readySelector: "",
-      delay: 0,
-      hideSelectors: [],
-      removeSelectors: [],
-      hoverSelector: "",
-      clickSelector: "",
-      postInteractionWait: 0,
-      selectors: [],
-      selectorExpansion: true,
-      expect: 0,
-    },
-    {
-      label: "mobile-menu",
-      login: config.aemLogin,
-      url: `http://localhost:${config.aemPort + 1}/content/${
-        config.aemSite
-      }/en/home.html`,
-      viewports: [
-        {
-          label: "phone",
-          width: 320,
-          height: 480,
-        },
-      ],
-      clickSelector: "#mobile-header-button",
-    },
-  ],
+  scenarios,
   // set to one, so browser sync doesn't mess with click/inputs/scrolling during screenshots
   asyncCaptureLimit: 1,
 };

theme/local.test.config.js

@@ -1,17 +1,55 @@
 const config = require("./test.config");
 
-const url =
-  "http://localhost:4502/content/aem-site-template-tailwind/en/home.html";
+const baseURL = `http://localhost:4502/content/${config.aemSite}/`;
+const queryParams = "?wcmmode=disabled";
+
+// add pages you want tested here:
+const pagesToTest = [
+  "en/home.html",
+  "guide.html",
+  "guide/manage.html",
+  "guide/manage/assets.html",
+  "guide/manage/site-elements.html",
+  "guide/manage/authoring.html",
+  "guide/manage/create-a-page.html",
+  "guide/manage/publish.html",
+  "guide/customize.html",
+  "en/article.html",
+  "en/article/donec-tristique-efficitur.html",
+  "en/article/fusce-at-efficitur-mi.html",
+  "en/article/morbi-dapibus-libero-velit.html",
+  "en/article/duis-bibendum-vitae.html",
+  "en/contact-us.html",
+];
+
+// add advanced tests here:
+const scenarios = [
+  {
+    label: "mobile-menu",
+    login: config.aemLogin,
+    url: baseURL + "en/home.html",
+    viewports: [
+      {
+        label: "phone",
+        width: 320,
+        height: 480,
+      },
+    ],
+    clickSelector: "#mobile-header-button",
+  },
+];
+
+pagesToTest.forEach((url) => {
+  const name = url.slice(url.lastIndexOf("/") + 1, url.indexOf(".html"));
+
+  scenarios.push({
+    label: name,
+    login: config.aemLogin,
+    url: baseURL + url + queryParams,
+  });
+});
 
 module.exports = {
   ...config,
-  scenarios: [
-    {
-      label: "Home",
-      login: config.aemLogin,
-      // cookiePath: "",
-      url: url,
-      // referenceUrl: "",
-    },
-  ],
+  scenarios,
 };