diff --git a/README.md b/README.md index 8ef43044a..0eec08be6 100644 --- a/README.md +++ b/README.md @@ -149,6 +149,7 @@ hideSelectors // Array of selectors set to visibility: hidden removeSelectors // Array of selectors set to display: none onReadyScript // After the above conditions are met -- use this script to modify UI state prior to screen shots e.g. hovers, clicks etc. hoverSelector // Move the pointer over the specified DOM element prior to screen shot (available with default onReadyScript) +activeSelector // Press the pointer on the specified DOM element prior to screen shot (available with default onReadyScript) clickSelector // Click the specified DOM element prior to screen shot (available with default onReadyScript) postInteractionWait // Wait for a selector after interacting with hoverSelector or clickSelector (optionally accepts wait time in ms. Idea for use with a click or hover element transition. available with default onReadyScript) selectors // Array of selectors to capture. Defaults to document if omitted. Use "viewport" to capture the viewport size. See Targeting elements in the next section for more info... @@ -158,15 +159,23 @@ requireSameDimensions // If set to true -- any change in selector size will t ``` -### Testing click and hover interactions +### Testing click, hover and active interactions BackstopJS ships with an onReady script that enables the following interaction selectors... ``` clickSelector: ".my-hamburger-menu", hoverSelector: ".my-hamburger-menu .some-menu-item", ``` -The above would tell BackstopJS to wait for your app to generate an element with a `.my-hamburger-menu` class, then click that selector. Then it would wait again for a `.my-hamburger-menu .some-menu-item` class, then move the cursor over that element (causing a hover state). Then BackstopJS would take a screenshot. +The above would tell BackstopJS to wait for your app to generate an element with a `.my-hamburger-menu` class, then click that selector. Then it would wait again for a `.my-hamburger-menu .some-menu-item` class, then move the cursor over that element (causing a hover state). Then BackstopJS would take a screenshot. -You can use these properties independent of each other to easily test various click and or hover states in your app. These are obviously simple scenarios -- if you have more complex needs then this example should serve as a pretty good starting point create your own onReady scripts. +If you want to get an active state for an element (this is when you keep the mouse button pressed on an element) you can do so by: + +``` +activeSelector: ".my-card-box-with-shadow-when-pressed", +``` + +This will move the mouse pointer in the center of the elements position and keeps the mouse button pressed. After it BackstopJS would take a screenshot. + +You can use these properties independent of each other to easily test various click, hover and or active states in your app. These are obviously simple scenarios -- if you have more complex needs then this example should serve as a pretty good starting point create your own onReady scripts. ### Setting cookies diff --git a/capture/engine_scripts/casper/clickAndHoverHelper.js b/capture/engine_scripts/casper/clickAndHoverHelper.js index 27406ec48..5093791fe 100644 --- a/capture/engine_scripts/casper/clickAndHoverHelper.js +++ b/capture/engine_scripts/casper/clickAndHoverHelper.js @@ -2,9 +2,10 @@ var WAIT_TIMEOUT = 5000; module.exports = function (casper, scenario) { var waitFor = require('./waitForHelperHelper')(casper, WAIT_TIMEOUT); - var hoverSelector = scenario.hoverSelector; - var clickSelector = scenario.clickSelector; - var postInteractionWait = scenario.postInteractionWait; + var hoverSelector = scenario.hoverSelector, + clickSelector = scenario.clickSelector, + activeSelector = scenario.activeSelector, + postInteractionWait = scenario.postInteractionWait; if (hoverSelector) { waitFor(hoverSelector); @@ -20,6 +21,13 @@ module.exports = function (casper, scenario) { }); } + if (activeSelector) { + waitFor(activeSelector); + casper.then(function () { + casper.mouse.down(activeSelector); + }); + } + // TODO: if postInteractionWait === integer then do ==> wait(postInteractionWait) || elsevvv waitFor(postInteractionWait); }; diff --git a/capture/engine_scripts/chromy/clickAndHoverHelper.js b/capture/engine_scripts/chromy/clickAndHoverHelper.js index fb874283b..0862be449 100644 --- a/capture/engine_scripts/chromy/clickAndHoverHelper.js +++ b/capture/engine_scripts/chromy/clickAndHoverHelper.js @@ -1,6 +1,7 @@ module.exports = function (chromy, scenario) { var hoverSelector = scenario.hoverSelector; var clickSelector = scenario.clickSelector; + var activeSelector = scenario.activeSelector; var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int] if (hoverSelector) { @@ -18,6 +19,15 @@ module.exports = function (chromy, scenario) { .click(clickSelector); } + if (activeSelector) { + chromy + .wait(activeSelector) + .rect(activeSelector) + .result(function (rect) { + chromy.mousePressed(rect.left + rect.width/2, rect.top + rect.height/2); + }); + } + if (postInteractionWait) { chromy.wait(postInteractionWait); } diff --git a/capture/engine_scripts/puppet/clickAndHoverHelper.js b/capture/engine_scripts/puppet/clickAndHoverHelper.js index c0e46e86b..d26b025a8 100644 --- a/capture/engine_scripts/puppet/clickAndHoverHelper.js +++ b/capture/engine_scripts/puppet/clickAndHoverHelper.js @@ -1,6 +1,7 @@ module.exports = async (page, scenario) => { var hoverSelector = scenario.hoverSelector; var clickSelector = scenario.clickSelector; + var activeSelector = scenario.activeSelector; var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int] if (hoverSelector) { @@ -13,6 +14,15 @@ module.exports = async (page, scenario) => { await page.click(clickSelector); } + // todo: test + if (activeSelector) { + await page.waitFor(activeSelector) + var el = await page.$(activeSelector); + var rect = el.getBoundingClientRect(); + await page.mouse.move(rect.left + rect.width/2, rect.top + rect.height/2) + await page.mouse.down(); + } + if (postInteractionWait) { await page.waitFor(postInteractionWait); }