How to create your tests with Protractor and cucumber

Hello guys, today I will post about how to do assertions when using Cucumber and protractor. If you don’t know what is a promise and how they work, I suggest read this link. WebDriver’s JavaScript API is entirely asynchronous and every command results in a promise. WebDriverJS uses a custom promise library with a promise manager called the ControlFlow. The ControlFlow implicitly synchronizes asynchronous actions, making it so you only have to register a promise callback when you want to catch an error or access a return value.

• So, create a protractor.js in your project’s root folder:

'use strict';

var os = require('os');
var platform = os.platform();

var HOST = 'http://test.protractor.com';
var USER = 'protractor';
var PASS = 'test';

var chrome = {
 browserName: 'chrome'
};

var safari = {
 browserName: 'safari'
};

var firefox = {
 browserName: 'firefox'
};

var capabilities = [chrome];

// Enable Safari only on macos
if (platform === 'darwin') {
 capabilities.push(safari);
}

exports.config = {
 seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
 specs: [
 'src/features/*.feature'
 ],
 multiCapabilities: capabilities,
 noGlobals: true,
 baseUrl: 'http://localhost:5000',
 framework: 'custom',
 frameworkPath: require.resolve('protractor-cucumber-framework'),
 resultJsonOutputFile: 'test-reports/protractor/protractor.json',
 cucumberOpts: {
 require: [
 'src/js/test/common.js',
 'src/js/test/steps/**/*.js'
 ],
 format: 'pretty',
 strict: true,
 tags: [
 '@smoke',
 '~@pending'
 ]
 },
 params: {

 credentials: {
 username: USER,
 password: PASS
 },

 endpoints: {
 authenticate_url: HOST + '/auth'
 }
 },

 //promise to get browserName
 onPrepare: function() {
 var protractor = require('protractor');
 var browser = protractor.browser;
 return browser.getProcessedConfig().then(function(config) {
 browser.browserName = config.capabilities.browserName;
 });
 }
};

• Create your Feature file in: your_project_folder/src/features/login/login.feature

Feature: Login Page


@smoke
 Scenario: Login success
 Given I am on the login page
 When I input valid username and password
 Then I should be redirected to the management page

• Common.js file which will contain the common libraries (You need install them first with npm install command): your_project_folder/src/js/test/common.js

'use strict';

// Configure chai & sinon
global.expect = require('chai')
 .use(require('sinon-chai'))
 .use(require('chai-string'))
 .use(require('chai-as-promised'))
 .use(require('expect-to-be-a-promise'))
 .expect;

global.sinon = require('sinon');

• Create your step definition file in: your_project_folder/src/js/test/steps/login_steps.js

'use strict';

var LoginActions = require('../login_page/login_actions');
var LoginAssertions = require('../login_page/login_assertions');
var protractor = require('protractor');
var browser = protractor.browser;

var LoginPageSteps = function() {

var loginActions = new LoginActions();
var loginAssertions = new LoginAssertions();

this.Given(/^I am on the login page$/, function() {
    loginActions.getPage();
 });

this.When(/^I input valid username and password$/, function() {
    var credentials = browser.params.credentials;
    loginActions.login(credentials.username, credentials.password);
 });

this.Then(/^I should be redirected to the management page$/, function() {
    return loginAssertions.assertManagementPage();
 });

};

module.exports = LoginPageSteps;

• Create your login elements (map repository for login page) file in: your_project_folder/src/js/test/login_page/login_elements.js

'use strict';

var protractor = require('protractor');
var element = protractor.element;
var by = protractor.by;

function LoginStateElements() {
  return {
    url: function() {
    return '/login';
  },
  username: function() {
    return element(by.model('credentials.username'));
  },
  password: function() {
    return element(by.model('credentials.password'));
  },
  submit: function() {
    return element(by.css('[type="submit"]'));
  },
  form: function() {
   return element(by.css('[ng-submit="form("test")"]'));
  }
 };
}

module.exports = LoginStateElements;

• Create your login actions file in: your_project_folder/src/js/test/login_page/login_actions.js

'use strict';

var LoginElements = require('./login_elements');
var protractor = require('protractor');
var browser = protractor.browser;

function LoginStateActions() {

 var loginElements = new LoginElements();

 return {
  getPage: function() {
     browser.get(browser.baseUrl + loginElements.url());
  },
  login: function(username, password) {
     loginElements.username().click();
     loginElements.username().clear();
     loginElements.username().sendKeys(username);
     loginElements.password().click();
     loginElements.password().clear();
     loginElements.password().sendKeys(password);
     loginElements.submit().click();
  }
 };
}

module.exports = LoginStateActions;

• Create your login assertions file in: your_project_folder/src/js/test/login_page/login_assertions.js

'use strict';

var LoginElements = require('./login_elements');

function LoginAssertions() {

 var loginElements = new LoginElements();

 return {
  assertManagementPage: function() {
     var form = loginElements.form();
     var submit = loginElements.submit();
     expect(submit.isEnabled()).to.eventually.be.false;
     return expect(form.isPresent()).to.eventually.be.true;
  }

 };
}

module.exports = LoginAssertions;

Chai Assertion Library to understand how to use expect to assert elements.

WebDriver API commands to understand what you can do with the elements, for example, check if is displayed, click, clear, get Title, etc.

Thanks To Raphael Bonnet, who has been working with me on this project. It’s great when you find such a good developer to work with and really work as a team trying to find the best for the project together (Even that I am still skeptical about protractor instead of Selenium xD ).