Merge pull request #38 from Temi89/master

Integrate Applitools with selenium cucumber js .

Author: John Doherty

README.MD

@@ -234,6 +234,58 @@ module.exports = function () {
 };
 ```
 
+### Applitools Eyes!
+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.
+To use Applitools Eyes specifying an ApiKey from Aplitools using a `selenium-cucumber-js.json` file at the root of your project
+
+For example the following configuration could be used with an increased timeout which allows enough time for viusual checks:
+
+```json
+{
+  "eye_key": "Your_Api_Key",
+  "timeout": 50000
+}
+```
+
+And its usage within page Objects:
+
+```js
+module.exports = {
+
+    url: 'https://applitools.com/helloworld',
+
+    elements: {
+        clickme: by.tagName('button'),
+        searchResultLink: by.css('div.g > h3 > a')
+    },
+
+    
+    applitools_Eyes_Example: function () {
+
+        // Start the test and set the browser's viewport size to 800x600.
+        eyes.open(driver, 'Hello World!', 'My first Javascript test!',
+            {width: 800, height: 600});
+
+        // Navigate the browser to the "hello world!" web-site.
+        driver.get(page.HelloWorld.elements.url);
+
+        // Visual checkpoint #1.
+        eyes.checkWindow('Main Page');
+
+        // Click the "Click me!" button.
+        driver.findElement(page.HelloWorld.elements.clickme).click();
+
+        // Visual checkpoint #2.
+        eyes.checkWindow('Click!');
+
+        // End the test.
+        eyes.close();
+    }
+};
+```
+
+
 ### Before/After hooks
 
 You can register before and after handlers for features and scenarios:

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: {
@@ -63,6 +70,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');
@@ -78,6 +100,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
@@ -113,7 +136,7 @@ function importSupportObjects() {
 
             if (fs.existsSync(itemPath)) {
 
-                var dir = requireDir(itemPath, { camelcase: true });
+                var dir = requireDir(itemPath, {camelcase: true});
 
                 merge(allDirs, dir);
             }
@@ -131,7 +154,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
@@ -150,12 +173,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) {
@@ -197,14 +222,17 @@ 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();
-        });
+        })
     });
 };