WIP: Migration to WebdriverIO 5

.travis.yml

@@ -24,32 +24,32 @@ env:
 
 matrix:
   include:
-    # Node 4 with GraphicsMagick
-    - node_js: 4
+    # Node 8 with GraphicsMagick
+    - node_js: 8
       env: GRAPHICSMAGICK=true
       addons:
         apt:
           packages:
             - graphicsmagick
             - google-chrome-stable
 
-    # Node 4 without GraphicsMagick
-    - node_js: 4
+    # Node 8 without GraphicsMagick
+    - node_js: 8
       env: GRAPHICSMAGICK=false
+      addons:
+        apt:
+          packages:
+            - google-chrome-stable
 
-    # Node 6 without GraphicsMagick
-    - node_js: 6
-      env: GRAPHICSMAGICK=false
 
 before_script:
   - echo "using chrome $(google-chrome  --version)"
   - echo "using firefox $(firefox --version)"
   - export FIREFOX_BIN=$(which firefox)
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
   - npm run server &
 
 script:
   - npm run test
+  - npm run test:local
   - npm run test:standalone
   - if ( [ "${TRAVIS_PULL_REQUEST}" != "false" ] || [ "${TRAVIS_BRANCH}" = "master" ] ) && [ "${TRAVIS_NODE_VERSION}" = "4" ] && [ "$GRAPHICSMAGICK" = "false" ]; then npm run test:sauce; fi

README.md

@@ -3,6 +3,7 @@
 
 [![Build Status][build-badge]][build] [![Build Status Windows][build-windows-badge]][build-windows] [![npm package][npm-badge]][npm]
 
+Working properly with WebdriverIO > 5.0.0
 
 ## Browser Support
 [![Build Status](https://saucelabs.com/open_sauce/build_matrix/zinserjan.svg)](https://saucelabs.com/u/zinserjan)
@@ -27,15 +28,16 @@ Instructions on how to install `WebdriverIO` can be found [here.](http://webdriv
 Note: If you want to improve performance, you can [install GraphicsMagick](#use-graphicsmagick).
 
 ## Configuration
-Setup wdio-screenshot by adding a `wdio-screenshot` key to the plugins section of your WebdriverIO config.
+Setup wdio-screenshot by adding a `wdio-screenshot` key to the service section of your WebdriverIO config.
+More information [Custom Services](https://webdriver.io/docs/customservices.html)
 
 ```js
+const WdioScreenshot = require('wdio-screenshot');
+
 // wdio.conf.js
 exports.config = {
   // ...
-  plugins: {
-    'wdio-screenshot': {}
-  },
+  services: [..., [WdioScreenshot]]
   // ...
 };
 ```

appveyor.yml

@@ -3,16 +3,16 @@ environment:
   global:
       DEBUG: "wdio-screenshot:*"
   matrix:
-    - nodejs_version: "6"
+    - nodejs_version: "8"
       GRAPHICSMAGICK: true
-    - nodejs_version: "6"
+    - nodejs_version: "8"
       GRAPHICSMAGICK: false
 
 # Install scripts. (runs after repo cloning)
 install:
   # Install GraphicsMagick
-  - if %GRAPHICSMAGICK%==true appveyor-retry appveyor DownloadFile http://downloads.sourceforge.net/graphicsmagick/GraphicsMagick-1.3.20-Q8-win32-dll.exe
-  - if %GRAPHICSMAGICK%==true GraphicsMagick-1.3.20-Q8-win32-dll.exe /SP /VERYSILENT /NORESTART /NOICONS /DIR=%CD%\gm
+  - if %GRAPHICSMAGICK%==true appveyor-retry appveyor DownloadFile http://downloads.sourceforge.net/graphicsmagick/GraphicsMagick-1.3.31-Q8-win32-dll.exe
+  - if %GRAPHICSMAGICK%==true GraphicsMagick-1.3.31-Q8-win32-dll.exe /SP /VERYSILENT /NORESTART /NOICONS /DIR=%CD%\gm
   - if %GRAPHICSMAGICK%==true set PATH=%CD%\gm;%PATH%
   # Get the wanted version of Node
   - ps: Install-Product node $env:nodejs_version

package.json

@@ -14,10 +14,10 @@
     "clean": "npm run clean-lib && npm run clean-tmp",
     "build": "npm run clean && babel ./src -d lib",
     "test": "npm run clean && mocha --compilers js:babel-register --timeout 15000 --recursive test/unit",
-    "test:local": "npm run clean && wdio ./test/wdio/wdio.local-conf.js",
-    "test:sauce": "npm run clean && wdio ./test/wdio/wdio.sauce-conf.js",
-    "test:appveyor": "npm run clean && wdio ./test/wdio/wdio.appveyor-conf.js",
-    "test:standalone": "npm run clean && npm run selenium-install && mocha --compilers js:babel-register --timeout 30000 --recursive test/standalone",
+    "test:local": "npm run build && wdio ./test/wdio/wdio.local-conf.js",
+    "test:sauce": "npm run build && wdio ./test/wdio/wdio.sauce-conf.js",
+    "test:appveyor": "npm run build && wdio ./test/wdio/wdio.appveyor-conf.js",
+    "test:standalone": "npm run build && npm run selenium-install && mocha --compilers js:babel-register --timeout 30000 --recursive test/standalone",
     "selenium-install": "selenium-standalone install",
     "server": "http-server test/fixture/web -p 3000",
     "deploy-integration-tests": "gh-pages -d test/fixture/web",
@@ -34,7 +34,7 @@
   "author": "Jan-André Zinser",
   "license": "MIT",
   "peerDependencies": {
-    "webdriverio": "^4.0.7"
+    "webdriverio": "^5.7.6"
   },
   "dependencies": {
     "babel-runtime": "^6.9.0",
@@ -48,6 +48,12 @@
     "which": "^1.2.10"
   },
   "devDependencies": {
+    "@wdio/cli": "^5.7.6",
+    "@wdio/local-runner": "^5.7.6",
+    "@wdio/mocha-framework": "^5.7.6",
+    "@wdio/selenium-standalone-service": "^5.7.2",
+    "@wdio/spec-reporter": "^5.7.2",
+    "@wdio/sync": "^5.7.6",
     "babel-cli": "^6.9.0",
     "babel-plugin-lodash": "^3.2.9",
     "babel-plugin-syntax-async-functions": "^6.8.0",
@@ -56,7 +62,7 @@
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-register": "^6.9.0",
-    "chai": "^3.5.0",
+    "chai": "^4.2.0",
     "gh-pages": "^0.11.0",
     "glob": "^7.1.0",
     "http-server": "^0.9.0",
@@ -66,10 +72,7 @@
     "rimraf": "^2.5.2",
     "selenium-standalone": "^6.4.1",
     "sinon": "^1.17.6",
-    "wdio-mocha-framework": "^0.3.2",
-    "wdio-sauce-service": "^0.4.0",
-    "wdio-selenium-standalone-service": "0.0.8",
-    "webdriverio": "~4.8.0"
+    "webdriverio": "^5.7.6"
   },
   "engines": {
     "node": ">=4"

src/WdioScreenshotLauncher.js

@@ -0,0 +1,39 @@
+import saveDocumentScreenshot from "./commands/saveDocumentScreenshot";
+import saveElementScreenshot from "./commands/saveElementScreenshot";
+import saveViewportScreenshot from "./commands/saveViewportScreenshot";
+
+import makeDocumentScreenshot from "./modules/makeDocumentScreenshot";
+import makeElementScreenshot from "./modules/makeElementScreenshot";
+import makeViewportScreenshot from "./modules/makeViewportScreenshot";
+
+export default class WdioScreenshot {
+  constructor(browser = {}, options = {}, standalone = false) {
+    if (!browser) {
+      throw new Error('A WebdriverIO instance is needed to initialise wdio-screenshot')
+    }
+  }
+
+  before() {
+    // add commands to WebdriverIO instance
+    browser.addCommand('saveDocumentScreenshot', saveDocumentScreenshot);
+    browser.addCommand('saveElementScreenshot', saveElementScreenshot);
+    browser.addCommand('saveViewportScreenshot', saveViewportScreenshot);
+  }
+}
+
+export function init(webdriverInstance) {
+  // return new WdioScreenshot(webdriverInstance, options, true);
+
+
+  webdriverInstance.addCommand('saveDocumentScreenshot', saveDocumentScreenshot);
+  webdriverInstance.addCommand('saveElementScreenshot', saveElementScreenshot);
+  webdriverInstance.addCommand('saveViewportScreenshot', saveViewportScreenshot);
+
+
+}
+
+export {
+  makeDocumentScreenshot,
+  makeElementScreenshot,
+  makeViewportScreenshot,
+};

src/index.js

@@ -1,33 +1,3 @@
-import saveDocumentScreenshot from './commands/saveDocumentScreenshot';
-import saveElementScreenshot from './commands/saveElementScreenshot';
-import saveViewportScreenshot from './commands/saveViewportScreenshot';
+import WdioScreenshot from './WdioScreenshotLauncher';
 
-import makeDocumentScreenshot from './modules/makeDocumentScreenshot';
-import makeElementScreenshot from './modules/makeElementScreenshot';
-import makeViewportScreenshot from './modules/makeViewportScreenshot';
-
-class WDIOScreenshot {
-
-  constructor(browser, options) {
-    if (!browser) {
-      throw new Error('A WebdriverIO instance is needed to initialise wdio-screenshot')
-    }
-
-    // add commands to WebdriverIO instance
-    browser.addCommand('saveDocumentScreenshot', saveDocumentScreenshot);
-    browser.addCommand('saveElementScreenshot', saveElementScreenshot);
-    browser.addCommand('saveViewportScreenshot', saveViewportScreenshot);
-  }
-}
-
-// export init function for initialization
-export function init(webdriverInstance, options) {
-  return new WDIOScreenshot(webdriverInstance, options);
-}
-
-// export also helpers for regression lib
-export {
-  makeDocumentScreenshot,
-  makeElementScreenshot,
-  makeViewportScreenshot,
-};
+module.exports = new WdioScreenshot();

src/modules/afterScreenshot.js

@@ -1,24 +1,34 @@
 import debug from 'debug';
 
 import scrollbars from '../scripts/scrollbars';
-import modifyElements from '../scripts/modifyElements';
+import removeElements from '../scripts/removeElements';
+import hideElements from '../scripts/hideElements';
 
 const log = debug('wdio-screenshot:afterScreenshot');
 
 export default async function afterScreenshot(browser, options) {
-  // show elements
-  if (Array.isArray(options.hide) && options.hide.length) {
-    log('show the following elements again: %s', options.hide.join(', '));
-    await browser.selectorExecute(options.hide, modifyElements, 'opacity', '');
-  }
-
-  // add elements again
-  if (Array.isArray(options.remove) && options.remove.length) {
-    log('add the following elements again: %s', options.remove.join(', '));
-    await browser.selectorExecute(options.remove, modifyElements, 'display', '');
-  }
-
-  // show scrollbars
-  log('show scrollbars again');
-  await browser.execute(scrollbars, true);
+    // show elements
+    if (Array.isArray(options.hide) && options.hide.length) {
+        log('show the following elements again: %s', options.hide.join(', '));
+
+
+        for (let i = 0; i < options.hide.length; i++) {
+            let elements = await browser.$$(options.hide[i]);
+            await browser.execute(hideElements, elements, false);
+        }
+    }
+
+    // add elements again
+    if (Array.isArray(options.remove) && options.remove.length) {
+        log('add the following elements again: %s', options.remove.join(', '));
+
+      for (let i = 0; i < options.remove.length; i++) {
+        let elements = await browser.$$(options.remove[i]);
+        await browser.execute(removeElements, elements, false);
+      }
+    }
+
+    // show scrollbars
+    log('show scrollbars again');
+    await browser.execute(scrollbars, true);
 }

src/modules/beforeScreenshot.js

@@ -2,8 +2,9 @@ import debug from 'debug';
 
 import scroll from '../scripts/scroll';
 import scrollbars from '../scripts/scrollbars';
-import modifyElements from '../scripts/modifyElements';
+import removeElements from '../scripts/removeElements';
 import triggerResize from '../scripts/triggerResize';
+import hideElements from '../scripts/hideElements';
 
 const log = debug('wdio-screenshot:beforeScreenshot');
 
@@ -18,17 +19,26 @@ export default async function beforeScreenshot(browser, options) {
   // hide elements
   if (Array.isArray(options.hide) && options.hide.length) {
     log('hide the following elements: %s', options.hide.join(', '));
-    await browser.selectorExecute(options.hide, modifyElements, 'opacity', '0');
+
+    for (let i = 0; i < options.hide.length; i++) {
+      let elements = await browser.$$(options.hide[i]);
+      await browser.execute(hideElements, elements, true);
+    }
   }
 
+  // TODO
   // remove elements
   if (Array.isArray(options.remove) && options.remove.length) {
     log('remove the following elements: %s', options.remove.join(', '));
-    await browser.selectorExecute(options.remove, modifyElements, 'display', 'none');
+
+    for (let i = 0; i < options.remove.length; i++) {
+      let elements = await browser.$$(options.remove[i]);
+      await browser.execute(removeElements, elements, true);
+    }
   }
 
   // scroll back to start
-  const x  = 0;
+  const x = 0;
   const y = 0;
   log('scroll back to start x: %s, y: %s', x, y);
   await browser.execute(scroll, x, y);

src/modules/makeAreaScreenshot.js

@@ -25,9 +25,9 @@ async function storeScreenshot(browser, screenDimensions, cropDimensions, base64
 }
 
 export default async function makeAreaScreenshot(browser, startX, startY, endX, endY) {
-  log('requested a screenshot for the following area: %j', {startX, startY, endX, endY});
+  log('requested a screenshot for the following area: %j', { startX, startY, endX, endY});
 
-  const screenDimensions = (await browser.execute(getScreenDimensions)).value;
+  const screenDimensions = await browser.execute(getScreenDimensions);
   log('detected screenDimensions %j', screenDimensions);
   const screenDimension = new ScreenDimension(screenDimensions, browser);
 
@@ -56,9 +56,10 @@ export default async function makeAreaScreenshot(browser, startX, startY, endX,
       await browser.pause(100);
 
       log('take screenshot');
-      const base64Screenshot = (await browser.screenshot()).value;
+
       const cropDimensions = screenshotStrategy.getCropDimensions();
       const filePath = path.join(dir, `${indexY}-${indexX}.png`);
+      const base64Screenshot = await browser.saveScreenshot(filePath);
 
       screenshotPromises.push(storeScreenshot(browser, screenDimension, cropDimensions, base64Screenshot, filePath));
 
@@ -81,15 +82,14 @@ export default async function makeAreaScreenshot(browser, startX, startY, endX,
         await fsExtra.remove(dir);
         return mergedBase64Screenshot;
       }),
-      Promise.resolve().then(async() => {
+      Promise.resolve().then(async () => {
         log('reset page height');
         await browser.execute(pageHeight, '');
 
         log('revert scroll to x: %s, y: %s', 0, 0);
         await browser.execute(virtualScroll, 0, 0, true);
       })
     ]);
-
     return mergedBase64Screenshot;
 
   } catch(e) {

src/modules/makeDocumentScreenshot.js

@@ -17,7 +17,7 @@ export default async function makeDocumentScreenshot(browser, options = {}) {
   await beforeScreenshot(browser, options);
 
   // get screen dimisions to determine document height & width
-  const screenDimensions = (await browser.execute(getScreenDimensions)).value;
+  const screenDimensions = await browser.execute(getScreenDimensions);
   const screenDimension = new ScreenDimension(screenDimensions, browser);
 
   // make screenshot of area

src/modules/makeElementScreenshot.js

@@ -17,7 +17,10 @@ export default async function makeElementScreenshot(browser, elementSelector, op
   await beforeScreenshot(browser, options);
 
   // get bounding rect of elements
-  const boundingRects = await browser.selectorExecute(elementSelector, getBoundingRects);
+
+  const elements = await browser.$$(elementSelector);
+  const boundingRects = await browser.execute(getBoundingRects, elements);
+
   const boundingRect = groupBoundingRect(boundingRects);
 
   // make screenshot of area