Cucumber Protractor times out after using then() o

Question

I have an issue which description matches perfectly with I am not able to identify elements using protractor in angular 2 application but for me the problem is not fixed by adding # before the id value

Here is the code below:

When('I select my input box', (callback) => {

  let inputbox = element(by.css('#roomWidthInput'));
  console.log('inputBox promise set');

  var scrpt = "return document.getElementById('roomWidthInput');";
  browser.executeScript(scrpt).then(function (text) {
    console.log('info', 'Script is: ' + scrpt);
  });

  inputbox.isPresent().then(function(isElementVisible) {
    console.log('hello!');
    expect(isElementVisible).to.be.true;
    callback();
  });
});

The console logs:

• inputBox promise set
• info Script is: return document.getElementById('roomWidthInput');

and then it throws Error: function timed out after 5000 milliseconds.

I have also tried using by.id locator with exactly the same results.

Any help would be much appreciated, thanks.

Answer 1

Your issue has no matter with protractor can't find element, It's due to your step definition function execution time duration exceeded the default timeout: 5 secs.

You should change the default timeout as below:

Cucumber 3 and above

// supports/timeout.js
var { setDefaultTimeout } = require("cucumber");
setDefaultTimeout(60 * 1000);

Cucumber 2 above, but lower than Cucumber 3

// supports/timeout.js
var {defineSupportCode} = require('cucumber');

defineSupportCode(function({setDefaultTimeout}) {
  setDefaultTimeout(60 * 1000);
});

Cucumber 1 and lower

// supports/timeout.js
module.exports = function() {
    this.setDefaultTimeout(60 * 1000);
};

In protractor conf.js, add the timeout.js into cucumberOpts.require:

// set allScriptsTimeout to fix asynchronous Angular tasks to finish after 11 seconds
allScriptsTimeout: 600 * 1000, 

cucumberOpts: {     
   require: [
      "supports/timeout.js",
   ]
},

onPrepare: function() {
   // add this when page opened by browser.get() is not angular page
   browser.ignoreSynchronization = true;
}