BrowserStack supports Selenium automated tests using Cucumber JS, and running your tests on our cloud setup is simple and straightforward. Get started with a sample test, which opens Google's homepage, searches for ‘BrowserStack’, and asserts for the title of the search results page. For the code to run successfully on your machine, please ensure that the following libraries have been installed:

# Install using npm
npm install cucumber

Here is a sample test case written for running with Cucumber JS.

// Google Feature
Feature: Google Search Functionality

  Scenario: Can find search results
    When I type query as "BrowserStack"
    Then I submit
    Then I should see title "BrowserStack - Google Search"

// Google Steps
module.exports = function() {

  this.When(/^I type query as "([^"]*)"$/, function (searchQuery, next) {
    this.driver.get('https://www.google.com/ncr');
    this.driver.findElement({ name: 'q' })
      .sendKeys(searchQuery + '\n').then(next);
  });

  this.Then(/^I submit$/, function (next) {
    var self = this;
    this.driver.findElement({ name: 'btnG' })
      .click()
      .then(function() {
        self.driver.wait(function () {
          return self.driver.isElementPresent(webdriver.By.id("top_nav"));
        }, 5000);
        next();
      });
  });

  this.Then(/^I should see title "([^"]*)"$/, function (titleMatch, next) {
    this.driver.getTitle()
      .then(function(title) {
        assert.equal(title, titleMatch, next, 'Expected title to be ' + titleMatch);
      });
  });
};

To actually run the test case, we need to integrate with BrowserStack as follows.

To obtain your username and access keys, sign up for a Free Trial or purchase a plan.

Integration of Cucumber JS with BrowserStack is made possible by use of following module:

// hooks.js
var config_file = '../../conf/' + (process.env.CONFIG_FILE || 'single') + '.conf.js';
var config = require(config_file).config;

var username = process.env.BROWSERSTACK_USERNAME || config.user;
var accessKey = process.env.BROWSERSTACK_ACCESS_KEY || config.key;

var createBrowserStackSession = function(config, caps){
  return new webdriver.Builder().
    usingServer('http://'+config.server+'/wd/hub').
    withCapabilities(caps).
    build();
}

var myHooks = function () {
  var bs_local = null;

  this.Before(function (scenario, callback) {
    var world = this;
    var task_id = parseInt(process.env.TASK_ID || 0);
    var caps = config.capabilities[task_id];
    caps['browserstack.user'] = username;
    caps['browserstack.key'] = accessKey;

    if(caps["browserstack.local"]){
      // Code to start browserstack local before start of test and stop browserstack local after end of test
      bs_local = new browserstack.Local();
      bs_local.start({'key': accessKey }, function(error) {
        if (error) return console.log(error.red);

        world.driver = createBrowserStackSession(config, caps);
        callback();
      });
    }
    else {
      world.driver = createBrowserStackSession(config, caps);
      callback();
    }
  });

  this.After(function(scenario, callback){
    this.driver.quit().then(function(){
      if(bs_local){
        bs_local.stop(callback);
      }
      else callback();
    });
  });
};

module.exports = myHooks;

// env.js
var configure = function () {
    this.setDefaultTimeout(60 * 1000);
};

module.exports = configure;

The module reads from config file where you need to put the BrowserStack Hub URL and credentials.

exports.config = {
  user: 'USERNAME',
  key: 'ACCESS_KEY',
  server: 'hub-cloud.browserstack.com',

  capabilities: [{
    browserName: 'chrome'
  }]
}

Run your test on BrowserStack using following command:

CONFIG_FILE=single ./node_modules/cucumber/bin/cucumber.js features/single.feature

To run your tests on BrowserStack Automate, the tests have to be run on remote machines. Therefore, the capabilities of the WebDriver have to be changed accordingly.

capabilities: [{
  'browserName': 'iPhone',
  'platform': 'MAC',
  'device': 'iPhone 5'
}]

capabilities: [{
  'os': 'Windows',
  'os_version': '7',
  'browser': 'IE',
  'browser_version': '8.0',
  'resolution': '1024x768'
}]

capabilities: [{
  'build': 'version1',
  'project': 'newintropage'
}]

capabilities: [{
  'acceptSslCerts': true
}]

capabilities: [{
  'chromeOptions': {
    'excludeSwitches': ["disable-popup-blocking"]
  }
}]

capabilities: [{
  'chromeOptions': {
    'args': ["--disable-popup-blocking"]
  }
}]

capabilities: [{
  'browserstack.ie.enablePopups': true
}]

capabilities: [{
  'browserstack.safari.enablePopups': true
}]

capabilities: [{
  'browserstack.debug': true
}]

capabilities: [{
  'browserstack.video': false
}]

To test a private server with Cucumber JS on BrowserStack, install local bindings.

# Install using npm
npm install browserstack-local

Then update config file and set the browserstack.local capability to true.

exports.config = {
  user: 'USERNAME',
  key: 'ACCESS_KEY',
  server: 'hub-cloud.browserstack.com',

  capabilities: [{
    browserName: 'chrome',
    'browserstack.local': true
  }]
}

Here is a sample test case written for running local with Cucumber JS.

// Local Feature
Feature: BrowserStack Local Testing

  Scenario: Can check tunnel working
    When I open health check
    Then I should see "Up and running"

// Local Steps
'use strict';

var assert = require('cucumber-assert');
var webdriver = require('selenium-webdriver');

module.exports = function() {

  this.When(/^I open health check$/, function (next) {
    this.driver.get('http://bs-local.com:45691/check');
    next();
  });

  this.Then(/^I should see "([^"]*)"$/, function (sourceMatch, next) {
    this.driver.getPageSource()
      .then(function(source) {
        assert.equal(source.indexOf(sourceMatch) > -1, true, next, 'Expected source to contain ' + sourceMatch);
      });
  });
};

Run your local test on BrowserStack using following command:

CONFIG_FILE=local ./node_modules/cucumber/bin/cucumber.js features/local.feature

To run tests on multiple browsers in parallel with Cucumber JS on BrowserStack, modify the config file as below:

exports.config = {
  user: 'USERNAME',
  key: 'ACCESS_KEY',
  server: 'hub-cloud.browserstack.com',

  commonCapabilities: {
    "browserstack.debug": true
  },

  capabilities: [{
    browserName: 'chrome'
  },{
    browserName: 'firefox'
  },{
    browserName: 'safari'
  },{
    browserName: 'internet explorer'
  }]
}

// Code to support common capabilities
exports.config.capabilities.forEach(function(caps){
  for(var i in exports.config.commonCapabilities) caps[i] = caps[i] || exports.config.commonCapabilities[i];
});

Capabilities for each environment can be customised as explained earlier.

You need the following custom script to launch the tests in parallel.

#!/usr/bin/env node
var child_process = require('child_process');
var config_file = '../conf/' + (process.env.CONFIG_FILE || 'single') + '.conf.js';
var config = require(config_file).config;

process.argv[0] = 'node';
process.argv[1] = './node_modules/.bin/cucumber-js';

for(var i in config.capabilities){
  var env = Object.create( process.env );
  env.TASK_ID = i.toString();
  var p = child_process.spawn('/usr/bin/env', process.argv, { env: env } );  
  p.stdout.pipe(process.stdout);
}

Run your tests in parallel on BrowserStack using following command:

# Run using custom runner
CONFIG_FILE=parallel ./scripts/cucumber-runner.js features/single.feature