Compability with Webdriverio v5

.babelrc

@@ -1,4 +1,9 @@
 {
-  "presets": ["es2015"],
-  "plugins": ["syntax-async-functions", "transform-regenerator", "transform-runtime", "transform-object-rest-spread"]
+  "presets": ["@babel/env"],
+  "plugins": [
+    "@babel/plugin-syntax-async-generators",
+    "@babel/transform-regenerator",
+    "@babel/transform-runtime",
+    "@babel/plugin-proposal-object-rest-spread",
+  ]
 }

README.md

@@ -186,10 +186,10 @@ available:
   exclude frequently changing parts of your screenshot, you can either pass all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html)
   that queries one or multiple elements or you can define x and y values which stretch a rectangle or polygon
 
-* **hide** `String[]`<br>
+* **hide** `Object[]`<br>
   hides all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `visibility: hidden`)
 
-* **remove** `String[]`<br>
+* **remove** `Object[]`<br>
   removes all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `display: none`)
 
 * **viewports** `Object[{ width: Number, height: Number }]` (**desktop only**)<br>

index.js

@@ -1 +1,4 @@
-module.exports = require('./launcher');
+const VisualRegressionLauncher = require('./lib/VisualRegressionLauncher');
+
+module.exports.default = VisualRegressionLauncher;
+module.exports.launcher = VisualRegressionLauncher;

package.json

@@ -6,7 +6,6 @@
   "files": [
     "index.js",
     "compare.js",
-    "launcher.js",
     "*.md",
     "src",
     "lib"
@@ -16,8 +15,9 @@
     "phantom": "phantomjs --webdriver=4444",
     "build": "npm run clean && babel ./src -d lib",
     "test": "npm run test:unit && npm run test:wdio",
-    "test:unit": "npm run clean && mocha --compilers js:babel-register test/unit/**/*.test.js",
-    "test:wdio": "npm run clean && wdio ./test/wdio/wdio.config.js",
+    "test:unit": "npm run clean && mocha --require @babel/register test/unit/**/*.test.js",
+    "test:wdio": "npm run build && wdio ./test/wdio/wdio.config.js",
+    "test:local": "npm run clean && wdio ./test/wdio/wdio.local-conf.js",
     "prepublish": "npm run build",
     "release": "np"
   },
@@ -30,36 +30,41 @@
   },
   "author": "Jan-André Zinser",
   "license": "MIT",
-  "peerDependencies": {
-    "webdriverio": "^4.0.7"
-  },
   "dependencies": {
+    "@babel/runtime": "^7.5.1",
+    "@wdio/logger": "^5.0.0",
     "babel-runtime": "^6.9.0",
-    "debug": "^2.2.0",
     "fs-extra": "^3.0.1",
     "lodash": "^4.13.1",
     "node-resemble-js": "0.0.5",
     "nodeclient-spectre": "^1.0.3",
-    "platform": "^1.3.1",
-    "wdio-screenshot": "^0.6.0"
+    "platform": "^1.3.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.9.0",
-    "babel-plugin-syntax-async-functions": "^6.8.0",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-plugin-transform-regenerator": "^6.9.0",
-    "babel-plugin-transform-runtime": "^6.9.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-register": "^6.9.0",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/helpers": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/plugin-syntax-async-generators": "^7.2.0",
+    "@babel/plugin-transform-regenerator": "^7.4.5",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/register": "^7.4.4",
+    "@wdio/cli": "^5.0.0",
+    "@wdio/local-runner": "^5.0.0",
+    "@wdio/mocha-framework": "^5.0.0",
+    "@wdio/selenium-standalone-service": "^5.0.0",
+    "@wdio/sync": "^5.0.0",
     "chai": "^3.5.0",
-    "mocha": "^2.4.5",
+    "gm": "^1.23.1",
+    "image-size": "^0.7.4",
+    "jimp": "^0.6.4",
+    "mocha": "^6.1.4",
     "nock": "^9.2.3",
     "np": "^2.10.0",
     "phantomjs": "^1.9.20",
     "rimraf": "^2.5.2",
     "sinon": "^1.17.4",
-    "wdio-mocha-framework": "^0.3.1",
-    "wdio-selenium-standalone-service": "0.0.7",
-    "webdriverio": "^4.0.9"
+    "webdriverio": "^5.0.0"
   }
 }

src/VisualRegressionLauncher.js

@@ -1,13 +1,16 @@
 import _ from 'lodash';
 import { parse as parsePlatform } from 'platform';
-import { makeElementScreenshot, makeDocumentScreenshot, makeViewportScreenshot } from 'wdio-screenshot';
+import makeElementScreenshot from './modules/makeElementScreenshot';
+import makeDocumentScreenshot from './modules/makeDocumentScreenshot';
+import makeViewportScreenshot from './modules/makeViewportScreenshot';
+import logger from '@wdio/logger';
 
 import getUserAgent from './scripts/getUserAgent';
 import { mapViewports, mapOrientations } from './modules/mapViewports';
 
+const log = logger('wdio-visual-regression-service');
 
-export default class VisualRegressionLauncher {
-
+class VisualRegressionLauncher {
   constructor() {
     this.currentSuite = null;
     this.currentTest = null;
@@ -23,7 +26,9 @@ export default class VisualRegressionLauncher {
    */
   async onPrepare(config) {
     this.validateConfig(config);
+    log.setLevel(config.logLevel || 'info');
     this.compare = config.visualRegression.compare;
+    log.info('Launching onPrepare functions');
     await this.runHook('onPrepare');
   }
 
@@ -36,13 +41,13 @@ export default class VisualRegressionLauncher {
    * @return {Promise}
    */
   async before(capabilities, specs) {
-    this.validateConfig(browser.options);
+    this.validateConfig(browser.config);
 
-    this.compare = browser.options.visualRegression.compare;
-    this.viewportChangePause = _.get(browser.options, 'visualRegression.viewportChangePause', 100);
-    this.viewports = _.get(browser.options, 'visualRegression.viewports');
-    this.orientations = _.get(browser.options, 'visualRegression.orientations');
-    const userAgent = (await browser.execute(getUserAgent)).value;
+    this.compare = browser.config.visualRegression.compare;
+    this.viewportChangePause = _.get(browser.config, 'visualRegression.viewportChangePause', 100);
+    this.viewports = _.get(browser.config, 'visualRegression.viewports');
+    this.orientations = _.get(browser.config, 'visualRegression.orientations');
+    const userAgent = await browser.execute(getUserAgent);
     const { name, version, ua } = parsePlatform(userAgent);
 
     this.context = {
@@ -66,7 +71,7 @@ export default class VisualRegressionLauncher {
    * Hook that gets executed before the suite starts
    * @param {Object} suite suite details
    */
-  beforeSuite (suite) {
+  beforeSuite(suite) {
     this.currentSuite = suite;
   }
 
@@ -142,7 +147,6 @@ export default class VisualRegressionLauncher {
     this.currentStep = null;
   }
 
-
   /**
    * Gets executed after all tests are done. You still have access to all global
    * variables from the test.
@@ -166,12 +170,12 @@ export default class VisualRegressionLauncher {
 
   async runHook(hookName, ...args) {
     if (typeof this.compare[hookName] === 'function') {
-      return await this.compare[hookName](...args)
+      return await this.compare[hookName](...args);
     }
   }
 
   validateConfig(config) {
-    if(!_.isPlainObject(config.visualRegression) || !_.has(config.visualRegression, 'compare')) {
+    if (!_.isPlainObject(config.visualRegression) || !_.has(config.visualRegression, 'compare')) {
       throw new Error('Please provide a visualRegression configuration with a compare method in your wdio-conf.js!');
     }
   }
@@ -180,7 +184,7 @@ export default class VisualRegressionLauncher {
     const baseContext = {
       type,
       browser: this.context.browser,
-      desiredCapabilities: this.context.desiredCapabilities,
+      desiredCapabilities: this.context.desiredCapabilities
     };
 
     const runHook = this.runHook.bind(this);
@@ -200,11 +204,7 @@ export default class VisualRegressionLauncher {
       const elementSelector = type === 'element' ? args[0] : undefined;
       const options = _.isPlainObject(args[args.length - 1]) ? args[args.length - 1] : {};
 
-      const {
-        exclude,
-        hide,
-        remove,
-      } = options;
+      const { exclude, hide, remove } = options;
 
       const resolutions = _.get(options, resolutionKeyPlural, resolutionDefault);
       const viewportChangePause = _.get(options, 'viewportChangePause', viewportChangePauseDefault);
@@ -214,14 +214,17 @@ export default class VisualRegressionLauncher {
         viewportChangePause,
         resolutions,
         async function takeScreenshot(resolution) {
-          const meta = _.pickBy({
-            url,
-            element: elementSelector,
-            exclude,
-            hide,
-            remove,
-            [resolutionKeySingle]: resolution
-          }, _.identity);
+          const meta = _.pickBy(
+            {
+              url,
+              element: elementSelector,
+              exclude,
+              hide,
+              remove,
+              [resolutionKeySingle]: resolution
+            },
+            _.identity
+          );
 
           const screenshotContext = {
             ...baseContext,
@@ -246,19 +249,23 @@ export default class VisualRegressionLauncher {
         }
       );
       return results;
-
-    }
+    };
   }
 
   getTestDetails() {
-    return _.pickBy({
-     // mocha
-     suite: this.currentSuite,
-     test: this.currentTest,
-     // cucumber
-     feature: this.currentFeature,
-     scenario: this.currentScenario,
-     step: this.currentStep,
-    }, _.identity);
+    return _.pickBy(
+      {
+        // mocha
+        suite: this.currentSuite,
+        test: this.currentTest,
+        // cucumber
+        feature: this.currentFeature,
+        scenario: this.currentScenario,
+        step: this.currentStep
+      },
+      _.identity
+    );
   }
 }
+
+module.exports = VisualRegressionLauncher;

src/commands/saveDocumentScreenshot.js

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import makeDocumentScreenshot from '../modules/makeDocumentScreenshot';
+import saveBase64Image from '../utils/saveBase64Image';
+
+/**
+ * @alias browser.saveDocumentScreenshot
+ * @param {string=} fileName
+ * @param {Object=} options
+ */
+
+// Note: function name must be async to signalize WebdriverIO that this function returns a promise
+export default async function async(fileName, options) {
+  if (_.isPlainObject(fileName) && _.isUndefined(options)) {
+    options = fileName;
+    fileName = undefined;
+  }
+
+  // make screenshot of area
+  const base64Image = await makeDocumentScreenshot(this, options);
+
+  if (typeof fileName !== 'undefined') {
+    // store base64 image as real png
+    await saveBase64Image(fileName, base64Image);
+  }
+
+  return base64Image;
+}

src/commands/saveElementScreenshot.js

@@ -0,0 +1,36 @@
+import _ from 'lodash';
+import makeElementScreenshot from '../modules/makeElementScreenshot';
+import saveBase64Image from '../utils/saveBase64Image';
+
+/**
+ * @alias browser.saveElementScreenshot
+ * @param {string=} fileName
+ * @param {string} elementSelector
+ * @param {Object=} options
+ */
+
+// Note: function name must be async to signalize WebdriverIO that this function returns a promise
+export default async function async(fileName, elementSelector, options) {
+  if ((_.isString(fileName) || _.isArray(fileName)) && _.isPlainObject(elementSelector) && _.isUndefined(options)) {
+    options = elementSelector;
+    elementSelector = fileName;
+    fileName = undefined;
+  } else if ((_.isString(fileName) || _.isArray(fileName)) && _.isUndefined(elementSelector)) {
+    elementSelector = fileName;
+    fileName = undefined;
+  }
+
+  if (!(_.isString(elementSelector) || _.isArray(elementSelector))) {
+    throw new Error('Please pass a valid selector value to parameter elementSelector');
+  }
+
+  // make screenshot of area
+  const base64Image = await makeElementScreenshot(this, elementSelector, options);
+
+  if (typeof fileName !== 'undefined') {
+    // store base64 image as real png
+    await saveBase64Image(fileName, base64Image);
+  }
+
+  return base64Image;
+}

src/commands/saveViewportScreenshot.js

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import makeViewportScreenshot from '../modules/makeViewportScreenshot';
+import saveBase64Image from '../utils/saveBase64Image';
+
+/**
+ * @alias browser.saveViewportScreenshot
+ * @param {string=} fileName
+ * @param {Object=} options
+ */
+
+// Note: function name must be async to signalize WebdriverIO that this function returns a promise
+export default async function async(fileName, options) {
+  if (_.isPlainObject(fileName) && _.isUndefined(options)) {
+    options = fileName;
+    fileName = undefined;
+  }
+
+  // make screenshot of area
+  const base64Image = await makeViewportScreenshot(this, options);
+
+  if (typeof fileName !== 'undefined') {
+    // store base64 image as real png
+    await saveBase64Image(fileName, base64Image);
+  }
+
+  return base64Image;
+}

src/compare.js

@@ -1,3 +1,3 @@
 export { default as LocalCompare } from './methods/LocalCompare';
 export { default as SaveScreenshot } from './methods/SaveScreenshot';
-export { default as Spectre} from './methods/Spectre';
+export { default as Spectre } from './methods/Spectre';