Resolving cucumber promise in protractor

Question

I am trying to write cucumber scenarios with protractor and using assert to verify that elements in the dom contain what they are supposed to. This is what I have tried so far:

Then('the title should be {string}', function(expectedTitle) {
  const browserTitle=browser.getTitle().then(function(title) {
    return title;
  })
  assert.equal(browserTitle, expectedTitle);
});

This is what I am getting. I read this as the promise not being resolved properly.

1) Scenario: Visit Homepage # e2e/features/homepage.feature:6
   ✔ Given I browse to "/" # e2e/definitions/navsteps.js:4
   ✖ Then the title should be "bla bla bla" # e2e/definitions/navsteps.js:9
       AssertionError [ERR_ASSERTION]: ManagedPromise {
         flow_:
          ControlFlow {
            propagateUnhandledRejections_: true,
            activeQueue_:
             TaskQueue {
            == 'bla bla bla'
           at World.<anonymous> (/Users/arnab/work/bla-bla/e2e/definitions/navsteps.js:13:10)
   ✔ After # node_modules/protractor-cucumber-framework/lib/resultsCapturer.js:25

1 scenario (1 failed)
2 steps (1 failed, 1 passed)

Shouldn't it be enough to resolve the promise using then ? What am I missing? I took a look at this SO question , and the accepted solution resolves the title in the same way.

Answer 1

Then('the title should be {string}', function(expectedTitle) {

  const browserTitle=browser.getTitle().then(function(title) {
    return title;
  })
  // actually, browserTitle here is still a promise, not the string of browser title
  // because Promise.then() will build a new promise

  assert.equal(browserTitle, expectedTitle);
  // Because the `assert` you used can't understand/respect promise, 
  // so it won't wait the promise (browserTitle) resolved/rejected before
  // compare to `expectedTitle`.

  // To fix your problem, you can use assertion library which respect promise,
  // like `chai` and `chai-as-promised`
});

Example of using chai and chai-as-promised

// protractor conf.js
onPrepare: function(){
  var chai = require('chai'),
      expect = chai.expect;

  chai.use(require('chai-as-promised'));
  global.expect = chai.expect;  
}
// add above code in `onPrepare` of protractor conf.js

Then('the title should be {string}', function(expectedTitle) {

  const browserTitle = browser.getTitle();

  return expect(browserTitle).to.eventually.equal(expectedTitle);
  // expect(A).to.eventually.xxx(B)
  // Only when A is promise-like object, you can use `eventually`.

  // Otherwise, you can't.
  return browser.getTitle().then(function(title){
     expect(title).to.equal(expectedTitle);
     // title at here is not a promise-like object
     // you can't use `eventually`
  });

});

For cucumber step definition, it require to return an promise-like object or invoke callback. Otherwise the next step won't wait the previous step complete when self begin execute.

Then('xxxx', function(){

  return a promise-like objct
});

Then('xxxx', function(callback){


  callback(); //it must be the last step of the function
});