Viewport for scenarios

README.md

@@ -99,6 +99,17 @@ As a new user setting up tests for your project, you will be primarily concerned
 
 - **`scenarios[n].label`** – Required. Also used for screenshot naming.
 - **`scenarios[n].url`** – Required. Tells BackstopJS what endpoint/document you want to test.  This can be an absolute URL or local to your current working directory.
+- **`scenarios[n].selectors`** – An array of CSS selector strings enabling you specify what part of your DOM you want to test.  The default value is `document`, which will attempt to capture your entire layout.
+- **`scenarios[n].viewports`** – An array of screen size objects your DOM will be tested against.  Add as many as you like.
+
+### Creating or updating reference bitmaps
+
+From your project directory...
+```sh
+$ backstop reference
+```
+
+This will create a `bitmaps_reference` directory with screen captures of all DOM elements specified in your config. See [scenario filtering](https://github.com/garris/BackstopJS#incremental-scenario-referencetesting-filtering) for more options.
 
 _TIP: no other SCENARIO properties are required. Other properties can just be added as necessary_
 
@@ -212,6 +223,26 @@ scenarios: [
 ]
 // Just captures the first <li> tag inside .aListOfStuff
 ```
+#### viewports
+
+This is helpful if you want to test few scenarios explicitly for certain viewports without having second config file. For e.g. after navigating you have different selectors for laptop and mobile before taking screen shot, then you can split those scenarios.
+```
+"scenarios": [
+    {
+      "viewports": [
+        {
+          "name": "phone_s",
+          "width": 320,
+          "height": 480
+        },
+        {
+          "name": "tablet_h_s",
+          "width": 1024,
+          "height": 768
+        }
+      ],
+   ]
+```
 
 
 ### Testing Progressive apps, SPAs and AJAX content
@@ -478,6 +509,11 @@ This will also enable the very cool _chromy.js_ (https://github.com/OnetapInc/ch
 "engine": "chrome"
 ```
 
+If you want to specify chrome location use following in Backstop config file(do not specify if you wanted Chromy to find chrome executable):
+```json
+"chromePath": "path/to/chrome/executable"
+```
+
 #### Slimer (Gecko/Mozilla rendering)
 To run in Slimer, be sure to have SlimerJS installed. From your root directory run...
 

capture/genBitmaps.js

@@ -85,6 +85,12 @@ function capturePageSelectors (scenarios, viewports, bitmapsReferencePath, bitma
     var scenarioLabelSafe = makeSafe(scenario.label);
     scenario.sIndex = i;
 
+    // Change to scenario's viewports if exists
+    if(scenario.viewports) {
+      viewports = scenario.viewports;
+      console.log(`Following viewports will be used for scenario: '${scenario.label}': ` + JSON.stringify(scenario.viewports));
+    }
+
     processScenario(casper, scenario, scenarioLabelSafe, scenarioLabelSafe, viewports, bitmapsReferencePath, bitmapsTestPath, screenshotDateTime);
 
     if (!isReference && scenario.hasOwnProperty('variants')) {

core/util/createBitmaps.js

@@ -110,6 +110,12 @@ function delegateScenarios (config) {
 
   var scenarioViewId = 0;
   scenarios.forEach(function (scenario) {
+
+    // Change to scenario's viewports if exists
+    if(scenario.viewports) {
+      config.viewports = scenario.viewports;
+      console.log(`Following viewports will be used for scenario: '${scenario.label}': ` + JSON.stringify(scenario.viewports));
+    }
     config.viewports.forEach(function (viewport) {
       scenarioViews.push({
         scenario: scenario,