Integrate Applitools with selenium cucumber js .

The Applitools Eyes Selenium JavaScript SDK allows you to easily add visual checkpoints to your JavaScript Selenium tests.

It takes care of getting screenshots of your application from the underlying WebDriver, sending them to the Eyes server for validation and failing the test in case differences are found.

Author: Temilayo kufeji

index.js

@@ -53,19 +53,22 @@ program
     .option('-n, --noScreenshot [optional]', 'disable auto capturing of screenshots when an error is encountered')
     .parse(process.argv);
 
-program.on('--help', function() {
+program.on('--help', function () {
     console.log('  For more details please visit https://github.com/john-doherty/selenium-cucumber-js#readme\n');
 });
 
 // store browserName globally (used within world.js to build driver)
 global.browserName = program.browser;
 
+// store Eyes Api globally (used within world.js to set Eyes)
+global.eyeskey = config.eye_key
+
 // used within world.js to import page objects
 global.pageObjectPath = path.resolve(program.pageObjects);
 
 // used within world.js to output reports
 global.reportsPath = path.resolve(program.reports);
-if (!fs.existsSync(program.reports)){
+if (!fs.existsSync(program.reports)) {
     fs.makeTreeSync(program.reports);
 }
 
@@ -82,7 +85,7 @@ global.junitPath = path.resolve(program.junit || program.reports);
 global.DEFAULT_TIMEOUT = global.DEFAULT_TIMEOUT || program.timeOut || 10 * 1000;
 
 // used within world.js to import shared objects into the shared namespace
-global.sharedObjectPaths = program.sharedObjects.map(function(item) {
+global.sharedObjectPaths = program.sharedObjects.map(function (item) {
     return path.resolve(item);
 });
 
@@ -111,8 +114,8 @@ process.argv.push(path.resolve(program.steps));
 // add tag
 if (program.tags) {
     program.tags.forEach(function (tag) {
-      process.argv.push('-t');
-      process.argv.push(tag);
+        process.argv.push('-t');
+        process.argv.push(tag);
     })
 }
 

package.json

@@ -52,14 +52,14 @@
     "fs-plus": "2.9.1",
     "geckodriver": "1.1.2",
     "merge": "1.2.0",
-    "phantomjs-prebuilt": "2.1.12",
     "require-dir": "0.3.2",
     "selenium-webdriver": "3.0.0"
   },
   "devDependencies": {
     "eslint": "^3.19.0",
     "eslint-config-airbnb-base": "^11.2.0",
-    "eslint-plugin-import": "^2.2.0"
+    "eslint-plugin-import": "^2.2.0",
+    "eyes.selenium": "0.0.72"
   },
   "eslintConfig": {
     "extends": "airbnb-base",

runtime/world.js

@@ -16,6 +16,9 @@ var assert = require('chai').assert;
 var reporter = require('cucumber-html-reporter');
 var cucumberJunit = require('cucumber-junit');
 
+// Initialize the eyes SDK and set your private API key.
+var Eyes = require('eyes.selenium').Eyes;
+
 // drivers
 var FireFoxDriver = require('./firefoxDriver.js');
 var PhantomJSDriver = require('./phantomDriver.js');
@@ -34,19 +37,23 @@ function getDriverInstance() {
 
         case 'firefox': {
             driver = new FireFoxDriver();
-        } break;
+        }
+            break;
 
         case 'phantomjs': {
             driver = new PhantomJSDriver();
-        } break;
+        }
+            break;
 
         case 'electron': {
             driver = new electronDriver();
-        } break;
+        }
+            break;
 
         case 'chrome': {
             driver = new ChromeDriver();
-        } break;
+        }
+            break;
 
         // try to load from file
         default: {
@@ -62,6 +69,21 @@ function getDriverInstance() {
     return driver;
 }
 
+
+/**
+ * Initialize the eyes SDK and set your private API key via the config file.*/
+function getEyesInstance() {
+
+    var eyes = new Eyes();
+
+    //retrieve apikey from config file in the project root as defined by the user
+    eyes.setApiKey(eyeskey);
+
+    return eyes;
+
+
+}
+
 function consoleInfo() {
     var args = [].slice.call(arguments),
         output = chalk.bgBlue.white('\n>>>>> \n' + args + '\n<<<<<\n');
@@ -77,6 +99,7 @@ function createWorld() {
 
     var runtime = {
         driver: null,               // the browser object
+        eyes: null,
         selenium: selenium,         // the raw nodejs selenium driver
         By: selenium.By,            // in keeping with Java expose selenium By
         by: selenium.By,            // provide a javascript lowercase version
@@ -112,7 +135,7 @@ function importSupportObjects() {
 
             if (fs.existsSync(itemPath)) {
 
-                var dir = requireDir(itemPath, { camelcase: true });
+                var dir = requireDir(itemPath, {camelcase: true});
 
                 merge(allDirs, dir);
             }
@@ -130,7 +153,7 @@ function importSupportObjects() {
     if (global.pageObjectPath && fs.existsSync(global.pageObjectPath)) {
 
         // require all page objects using camel case as object names
-        global.page = requireDir(global.pageObjectPath, { camelcase: true });
+        global.page = requireDir(global.pageObjectPath, {camelcase: true});
     }
 
     // add helpers
@@ -149,12 +172,14 @@ module.exports = function () {
     // set the default timeout for all tests
     this.setDefaultTimeout(global.DEFAULT_TIMEOUT);
 
-    // create the driver before scenario if it's not instantiated
-    this.registerHandler('BeforeScenario', function(scenario) {
+    // create the driver and applitools eyes before scenario if it's not instantiated
+    this.registerHandler('BeforeScenario', function (scenario) {
 
-        if (!global.driver) {
+        if (!global.driver || !global.eyes) {
             global.driver = getDriverInstance();
+            global.eyes = getEyesInstance();
         }
+
     });
 
     this.registerHandler('AfterFeatures', function (features, done) {
@@ -196,14 +221,20 @@ module.exports = function () {
 
                 scenario.attach(new Buffer(screenShot, 'base64'), 'image/png');
 
-                return driver.close().then(function() {
+                return driver.close().then(function () {
                     return driver.quit();
-                });
+                })
+            }).then(function () {
+                // If the test was aborted before eyes.close was called ends the test as aborted.
+                return eyes.abortIfNotClosed();
             });
         }
 
-        return driver.close().then(function() {
+        return driver.close().then(function () {
             return driver.quit();
+        }).then(function () {
+            // If the test was aborted before eyes.close was called ends the test as aborted.
+            return eyes.abortIfNotClosed();
         });
     });
 };