javascript - Protractor Cucumber BDD Tests Show Pass before Execution -

i have sample bdd test using protractor cucumber. on executing code, console shows result passed , code begins executing after that.

i wish execution status display in sync actual execution.(e.g console displays - 'given launch protractor demo page' , code underneath executed, console displays next step , on) know has got async coding , callbacks, not able figure out exact problem though.

feature file:

feature: test scenario:  test scenario     given launch protractor demo page     when enter 2 in first field     , enter 3 in second field     , click go button     result should displayed 5 

step file:

 var chai = require('chai');     var chaiaspromised = require('chai-as-promised');     chai.use(chaiaspromised);     var expect = chai.expect;      module.exports = function () {           this.given(/^i launch protractor demo page$/, function (callback) {             browser.driver.manage().window().maximize();             browser.get('http://juliemr.github.io/protractor-demo/');              browser.gettitle().then(function(text){                console.log('title - ' + text);                 expect(text).to.equal('super calculator');             });          callback();         });          this.when(/^i enter 2 in first field$/, function (callback) {             element(by.model('first')).sendkeys('2');             callback();         });          this.when(/^i enter 3 in second field$/, function (callback) {             element(by.model('second')).sendkeys('3');             callback();         });          this.when(/^i click go button$/, function (callback) {             element(by.id('gobutton')).click();             callback();         });          this.then(/^result should displayed five$/, function (callback) {              element(by.repeater('result in memory')).all(by.tagname('td')).get(2).gettext().then(function(text){             expect(text).to.equal('5');             });             callback();         });      }; 

you need either return promise or use done callback in step definitions. otherwise cucumber doesn't know when asynchronous actions complete.

i had same question , above statement response 1 of core members of protractor-cucumber github forum.

i prefer return promises when performing actions on results .then function , use .done callback function when not, don't need callbacks cucumberjs supports promises. step file should -

var chai = require('chai'); var chaiaspromised = require('chai-as-promised'); chai.use(chaiaspromised); var expect = chai.expect;  module.exports = function () {       this.given(/^i launch protractor demo page$/, function () {         browser.driver.manage().window().maximize();         browser.get('http://juliemr.github.io/protractor-demo/');        return browser.gettitle().then(function(text){            console.log('title - ' + text);             expect(text).to.equal('super calculator');         });     });      this.when(/^i enter 2 in first field$/, function () {        return element(by.model('first')).sendkeys('2');      });      this.when(/^i enter 3 in second field$/, function () {        return element(by.model('second')).sendkeys('3'); // can use return     });      this.when(/^i click go button$/, function () {         return element(by.id('gobutton')).click();     });      this.then(/^result should displayed five$/, function () {         return element(by.repeater('result in memory')).all(by.tagname('td')).get(2).gettext().then(function(text){         expect(text).to.equal('5');         });      });  }; 

i recommend read promises http://www.html5rocks.com/en/tutorials/es6/promises/ requires understanding how behave.they can tricky, took me while idea still have lot learn :)