feat: Added custom chrome option in scenario configuration

README.md

@@ -135,6 +135,18 @@ Unlike the onReady and onBefore script options, onBeforeSuite script does not ha
 
 For scenarios where you need to use a mobile emulator, pass in the device name to the property `mobileDeviceName` on your config. Note that at the moment, this will only work with the chrome browser.
 
+## Chrome Custom Options
+
+For scenarios where you would like to add chrome custom options for example like different user-agent etc. pass the whole json configuration to the property `chromeCustomCapabilites` on your config. Note this will only work with the chrome browser.
+```
+  "chromeCustomCapabilites": {
+    "mobileEmulation": {
+      "deviceMetrics": { "width": 360, "height": 1600, "pixelRatio": 3.0 },
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
+    },
+    "args": ["incognito"]
+  }
+```
 ## Running
 
 ### Supported Browsers: Firefox | Chrome

src/configValidator.js

@@ -43,12 +43,15 @@ function isMobileConfigValid(config) {
   let isMobileConfigCorrect = true;
 
   config.scenarios.forEach(scenario => {
-    if (config.browser !== 'chrome' && scenario.mobileDeviceName) {
+    if (
+      config.browser !== 'chrome' &&
+      (scenario.mobileDeviceName || scenario.chromeCustomCapabilites)
+    ) {
       logger.info(
         'configValidator',
         `❗️  ${
           config.browser
-        } not supported on the mobile emulator. Please change your browser to chrome.`
+        } not supported on the mobile emulator / custom capabilities. Please change your browser to chrome.`
       );
       isMobileConfigCorrect = false;
     }

src/configValidator.test.js

@@ -114,6 +114,20 @@ describe('The Config Validator', () => {
     expect(isMobileConfigValid(config)).toBe(true);
   });
 
+  it('config returns true for valid chrome custom capabilities', () => {
+    const config = {
+      browser: 'chrome',
+      scenarios: [
+        {
+          url: 'http:/google.com/',
+          label: 'homepage',
+          chromeCustomCapabilites: '{args:["incognito"]}}'
+        }
+      ]
+    };
+    expect(isMobileConfigValid(config)).toBe(true);
+  });
+
   it('config returns false for invalid mobile configs', () => {
     const config = {
       browser: 'firefox',
@@ -127,4 +141,18 @@ describe('The Config Validator', () => {
     };
     expect(isMobileConfigValid(config)).toBe(false);
   });
+
+  it('config returns false for invalid custom google capabilities', () => {
+    const config = {
+      browser: 'firefox',
+      scenarios: [
+        {
+          url: 'http:/google.com/',
+          label: 'homepage',
+          chromeCustomCapabilites: '{args:["incognito"]}}'
+        }
+      ]
+    };
+    expect(isMobileConfigValid(config)).toBe(false);
+  });
 });

src/getScreenshots.js

@@ -17,6 +17,7 @@ const generateSnapShotPromises = (SnapShotter, config) => {
             label: scenario.label,
             latest: config.latest,
             browser: config.browser,
+            chromeCustomCapabilites: scenario.chromeCustomCapabilites,
             mobileDeviceName: scenario.mobileDeviceName,
             gridUrl: config.gridUrl,
             height: viewport.height,

src/snapshotter.js

@@ -14,6 +14,7 @@ export default class SnapShotter {
       width = 700,
       height = 1024,
       browser = 'chrome',
+      chromeCustomCapabilites,
       mobileDeviceName,
       cookies,
       cropToSelector,
@@ -38,6 +39,7 @@ export default class SnapShotter {
     this._width = width;
     this._height = height;
     this._browser = browser;
+    this._chromeCustomCapabilites = chromeCustomCapabilites;
     this._mobileDeviceName = mobileDeviceName;
     this._cookies = cookies;
     this._cropToSelector = cropToSelector;
@@ -61,9 +63,10 @@ export default class SnapShotter {
       ? this._webdriver.Capabilities.chrome
       : this._webdriver.Capabilities.firefox;
 
-    this._capability = mobileDeviceName
-      ? this.getMobileBrowserCapability()
-      : browserCapability();
+    if (mobileDeviceName) this._capability = this.getMobileBrowserCapability();
+    else if (chromeCustomCapabilites)
+      this._capability = this.getCustomGoogleCapability();
+    else this._capability = browserCapability();
   }
 
   get driver() {
@@ -83,6 +86,14 @@ export default class SnapShotter {
     };
   }
 
+  getCustomGoogleCapability() {
+    return {
+      browserName: 'chrome',
+      version: '*',
+      'goog:chromeOptions': this._chromeCustomCapabilites
+    };
+  }
+
   async snooze(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }