How to use Jasmine and CucumberJS with Protractor

Question

I'm looking to use Protractor, CucumberJS, and Jasmine for testing my project. How do I use both Jasmine and CucumberJS with Protractor? Here's the project setup I've created:

/path/to/myproj/protractor.conf.js

exports.config = {
  seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',

  specs: [
    'features/*.feature'
  ],

  baseUrl: 'http://localhost:8080',

  multiCapabilities: [
    {
      'browserName': 'chrome'
    }
  ],

  allScriptsTimeout: 380000,
  getPageTimeout: 20000,

  framework: 'cucumber',

  cucumberOpts: {
    require: 'features/stepDefinitions.js',
    format: 'summary'
  }
};

As you can see, this project uses "cucumber" as the framework. How do I add in the Jasmine framework alongside CucumberJS? Would this be through the Protractor configuration file or someplace else in the code?

/path/to/myproj/features/demo.feature

Feature: Some terse yet descriptive text of what is desired

  Scenario: Some determinable business situation
    Given some precondition

/path/to/myproj/features/stepDefinitions.js

module.exports = function() {
  this.Given(/^some precondition$/, function (callback) {
    expect(true).toEqual(true);
    callback();
  });
};

When this is executed, "expect" is not defined, presumably because Jasmine has not been integrated, and it's expect global along with it. Here's the full error message:

$ $(npm bin)/protractor protractor.conf.js 
Starting selenium standalone server...
[launcher] Running 1 instances of WebDriver
Selenium standalone server started at http://192.168.1.115:59957/wd/hub
(::) failed steps (::)

ReferenceError: expect is not defined
  at World.<anonymous> (/path/to/myproj/features/stepDefinitions.js:3:5)
  at process._tickCallback (node.js:355:11)


Failing scenarios:
/path/to/myproj/features/demo.feature:3 # Scenario: Some determinable business situation

1 scenario (1 failed)
1 step (1 failed)
Shutting down selenium standalone server.
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1

/path/to/myproj/package.json

{
  "name": "myproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cucumber": "0.4.9",
    "protractor": "git+https://github.com/angular/protractor.git#0262268fa43b9eefac815d986740efa07bb15818"
  }
}

Note: I'm using a particular commit to the Protractor Git repository in my package.json, because the latest version (2.1.0) has a bug, which prevents integration with CucumberJS.

Solution

CucumberJS and Jasmine are mutually exclusive; you won't be able to use Jasmine's expects in Cucumber steps. What you have to do instead is load a separate expectation module. I would suggest Chai with the chai-as-promised plugin. (chai-as-promised simplifies the process of writing expectations around promises. Protractor overrides the expect() function in Jasmine to do this for you behind the scenes) Most likely you'll want to do this in your World as that's the easiest way to provide access to it in your Step Definitions. Your World would look something like this:

var World, chai, chaiAsPromised;
chai = require('chai');
chaiAsPromised = require('chai-as-promised');

World = function World(callback) {
  chai.use(chaiAsPromised);
  this.expect = chai.expect;
  callback();
}

module.exports.World = World;

Then in your Step Definitions file you just load in the World per the CucumberJS documentation and you're Step Definitions will be scoped to provide access to all properties of the World:

module.exports = function() {

  this.World = require("path/to/world.js").World;

  this.Given(/^some precondition$/, function (callback) {
    this.expect(true).to.equal(true);
    callback();
  });
};

Now, for some shameless self-promoting: if you're using Protractor with CucumberJS, I would recommend looking at a module I helped build called CukeFarm. It comes preconfigured with a few modules you'll find useful and it provides a number of general Step Definitions that can be used on most any project.

Comments

[Aristarkh Artemiy]

Mocha is a testing framework which allows for the use of any expectation module, including Chai. Is this one of the reasons why Mocha is popular as a unit testing framework, so that the same expectations module used for writing Cucumber tests can also be used for writing unit tests, making for a more consistent code based in the testing code? Thank you for your answer and for the CukeFarm recommendation!

[jbpros]

@AristarkhArtemiy yep, that's a very good to reason to go for Mocha. Using the same patterns/syntax (with chai for example) in your unit tests and Cucumber step definitions is a good thing, especially if other people have to jump into the codebase.

[Sam Vloeberghs]

can you elaborate on the reasons why CucumberJS and Jasmine are mutually exclusive? I'm trying to integrate CucumberJs in protractor to run E2E tests. If I could make that work out that would be so nice. Stack I'm using: Angular2, webpack, ..

[Nathan Thompson]

@SamVloeberghs Sure, CucumberJS and Jasmine are both test frameworks. They're different libraries that solve the same problem. Saying you want to use Jasmine with CucumberJS is like saying you want to use Jasmine with Mocha, or Gulp with Grunt, or Angular with Ember. As for using Protractor: Protractor is a test runner, and it needs a test framework to provide structure. They seem to prefer Jasmine, but they support any framework you want. Take a look at their frameworks.md file for tips on setting up Protractor with CucumberJS, or just use a library like CukeFarm that provides that for you.

[Nathan Thompson]

@SamVloeberghs Re: my previous comment: frameworks.md CukeFarm

[Jim]

Can't you use Protractor API in the step definitions? Why do you need to bring in chai...

[Nathan Thompson]

@Jim Protractor doesn't have it's own assertions. Protractor's own documentation suggests pulling in Chai when using the Mocha test framework: github.com/angular/protractor/blob/… Using Protractor with Cucumber would be no different.

[Jim]

@Nathan Thompson You are right that Protractor doesn't have it's own assertion library. However, by default Protractor uses Jasmine, not Chai. And Jasmine doesn't work with Cucumber.

[Chuck van der Linden]

I'm doing automation against a React based UI using Protractor (with angular specific stuff turned off), the Cucumber-Protractor-Framework, Chai, ChaiAsPromised and I find it works very well. My only hangup was caused by (rather stupidly) referring to a page on Protractor that used jasmine based assertions, some of which are worded slightly different than those for Chai. that caused a bit of self inflicted pain. just remember to refer to syntax for Chai matchers and you should be fine

[user1559625]

@Nathan Thompson hi, Nathan, i tried to use your cukefarm project by following the instructions at npmjs.com/package/cukefarm. I have a couple of running errors when using it, and if i comment out some of the code, it cannot find the step definitions based on feature file.

[user1559625]

@Nathan Thompson I've created the project at github.com/a22183nj/cukefarm_example, and raised a question at stackoverflow.com/questions/61179918/…. Could you care to take a look?