feat: Backstop page interaction support (#66)

sigwinhq · Nov 3, 2022 · cbb5a3f · cbb5a3f
1 parent b975085
commit cbb5a3f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/resources/Visual/create-backstop-config.js b/resources/Visual/create-backstop-config.js
@@ -23,7 +23,8 @@ function createBackstopConfig(root = __dirname + "/public", scenarios = [], defa
                 const scenario = {...defaults, label: file, url: PREVIEW_BASE_URL + file};
                 return scenario;
             } else if (typeof file === "object" && "path" in file) {
-                const scenario = {...defaults, label: file.path, url: PREVIEW_BASE_URL + file.path, ...file};
+                if (typeof file.label !== "string") throw new Error(`${JSON.stringify(file)} - scenario must have a label property`);
+                const scenario = {...defaults, ...file, label: `${file.path} ${file.label}`, url: PREVIEW_BASE_URL + file.path};
                 return scenario;
             } else {
                 throw new Error("Scenario must be a string or an object literal containing a path property");
@@ -32,7 +33,7 @@ function createBackstopConfig(root = __dirname + "/public", scenarios = [], defa
         scenarioLogsInReports: true,
         paths: {
             bitmaps_reference: "tests/visual/references",
-            engine_scripts: "tests/visual/scripts",
+            engine_scripts: __dirname,
             bitmaps_test: "var/backstop/tests",
             html_report: "var/backstop/reports",
             ci_report: "var/backstop/reports"
@@ -42,6 +43,7 @@ function createBackstopConfig(root = __dirname + "/public", scenarios = [], defa
         engineOptions: {
             args: ["--no-sandbox", "--allow-file-access-from-files"]
         },
+        onReadyScript: "on-ready.js",
         asyncCaptureLimit: 5,
         asyncCompareLimit: 50,
         debug: false,

diff --git a/resources/Visual/helpers.js b/resources/Visual/helpers.js
@@ -0,0 +1,47 @@
+module.exports = async (page, scenario) => {
+    const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+    const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+    const keyPressSelector =
+        scenario.keyPressSelectors || scenario.keyPressSelector;
+    const scrollToSelector = scenario.scrollToSelector;
+    const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+    if (keyPressSelector) {
+        for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+            await page.waitForSelector(keyPressSelectorItem.selector);
+            await page.type(
+                keyPressSelectorItem.selector,
+                keyPressSelectorItem.keyPress
+            );
+        }
+    }
+
+    if (hoverSelector) {
+        for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+            await page.waitForSelector(hoverSelectorIndex);
+            await page.hover(hoverSelectorIndex);
+        }
+    }
+
+    if (clickSelector) {
+        for (const clickSelectorIndex of [].concat(clickSelector)) {
+            await page.waitForSelector(clickSelectorIndex);
+            await page.click(clickSelectorIndex);
+        }
+    }
+
+    if (postInteractionWait) {
+        if (typeof postInteractionWait === 'number') {
+            await page.waitForTimeout(postInteractionWait);
+        } else {
+            await page.waitForSelector(postInteractionWait);
+        }
+    }
+
+    if (scrollToSelector) {
+        await page.waitForSelector(scrollToSelector);
+        await page.evaluate((scrollToSelector) => {
+            document.querySelector(scrollToSelector).scrollIntoView();
+        }, scrollToSelector);
+    }
+};
diff --git a/resources/Visual/on-ready.js b/resources/Visual/on-ready.js
@@ -0,0 +1,3 @@
+module.exports = async (page, scenario, vp) => {
+    await require(__dirname + "/helpers")(page, scenario);
+};