protractor-cucumber

Cucumber support for protractor

protractor-cucumber

protractor-cucumber allows one to drive protractor tests using cucumber

Install npm package to dev dependencies

npm install protractor-cucumber --save-dev

npm install -g cucumber

npm install -g protractor

webdriver-manager update

webdriver-manager start

Below demonstrates how to use protractor-cucumber

seleniumAddress is the address of a running selenium standalone server

protractor-cucumber returns a world object; which you can configure; with options described below.

Lets create a steps file in features/step_definitions/steps.js

var pc = require('protractor-cucumber');
 
var steps = function() {
  var seleniumAddress = 'http://localhost:4444/wd/hub';
  var options = { browser : 'chrome', timeout : 100000 };
  this.World = pc.world(seleniumAddress, options);
 
  this.After(function(callback) {
    this.quit(callback);
  });
};
 
module.exports = steps;

Now create a feature file, features/homepage.feature

 
Feature: Homepage 
  As a user
  I want to visit the homepage
  So that I can access the various features on offer
 
  Scenario: Visit Homepage
    Given I am on the homepage
    Then I should see a "navbar"
    And I should see a "login" link
    And I should see a "register" link
 

Now create some steps for the above feature, features/step_definitions/homepage/steps.js

 
var support = require('../support');
 
var steps = function() {
 
  this.Given(/^I am on the homepage$/, function(callback) {
    support.get(this, 'http://localhost:5000', function(result){
      setTimeout(callback, 1000);
    });
  });
 
  this.Then(/^I should see a "([^"]*)" link$/, function(linkcallback) {
    support.findByBinding(this, link, function(result){
      result.getText().then (function(text){
        text.trim().toLowerCase().should.equal(link.trim().toLowerCase());             
        setTimeout(callback, 1000);
      });     
    });
  });
 
  this.Then(/^I should not see a "([^"]*)" link$/, function(linkcallback) {
    support.isElementPresent(this, link, function(result){
      result.should.equal(false);
      setTimeout(callback, 1000);
    });
  });
 
  this.Then(/^I should see a "([^"]*)"$/, function(linkcallback) {
    support.isElementPresentByClass(this, link, function(result){
      result.should.equal(true);
      setTimeout(callback, 1000);
    });
  });
 
};
 
module.exports = steps;
 

Add some support, features/step_definitions/support.js

 
var Support = function(){
};
 
Support.prototype.get = function(suturlcallback){
  sut.browser.get(url).then(function(result) {
    callback(result)
  });
};
 
Support.prototype.findByBinding = function(sutitemcallback){
  sut.browser.findElement(sut.by.binding(item)).then(function(result) {
    callback(result);
  });
};
 
Support.prototype.isElementPresent = function(sutfindcallback){
  sut.browser.isElementPresent(sut.by.linkText(find)).then(function(result) {
     callback(result)
  });
};
 
Support.prototype.isElementPresentByClass = function(sutfindcallback){
  sut.browser.isElementPresent(sut.by.css('.'+find)).then(function(result) {
     callback(result)
  });
};
 
module.exports = new Support();
 

Now run cucumber:

cucumber.js

Below is a list of properties/methods exposed on the world object

a wrapper around an instance of webdriver. Used for navigation and page-wide information.

the protractor lib

a collection of element locator strategies.

our chosen assertion library, not required is using should

allows you to set a baseurl to use in your tests

an object of anything you like to use in your tests

quits the browser used in your tests

Specifies a browser; chrome, phantomjs, defaults to chrome

Specifies a timeout for setScriptTimeout, defaults to 100000

Specifies an assert module; to use within your tests

Specifies a baseurl to be used within your tests

Specifies a properties object; stick whatever you like in there