jasmine async callback was not invoked within timeout specified

Question

I am new to Protractor and javascript. I know there are a lot of questions and solutions regarding this error. But none of the solutions gave me a clear understanding of async callback and this error still persists for me.

I am using the Page Object model. Please refer the below code that I framed on my own:

elements.js:

var pageElements = function(){};

pageElements.prototype = Object.create({},{
  usernameField:{get: function(){return element(by.id('username'));}},
  passwordField:{get: function(){return element(by.id('password'));}},
  signinButton:{get: function(){return element(by.xpath("xpath"));}},
  formField1:{get: function(){return element(by.xpath("xpath1"));}},
  formField2:{get: function(){return element(by.xpath("xpath2"));}},
});

module.exports = pageElements;

controls.js:

var EC = protractor.ExpectedConditions;
var controls = require('../Controls/controls.js');

exports.waitForElementById = async function(id){
  debugger;
  var isVisible = EC.visibilityOf(id);
  await browser.wait(isVisible,50000);
  browser.sleep(3000);
};

exports.waitForElementByXpath = async function(xpaths){
  var isVisible = EC.visibilityOf(xpaths);
  await browser.wait(isVisible,50000);
  browser.sleep(3000);
};

exports.sendKeysById = async function(ids, value){
  controls.waitForElementById(ids);
  var isVisible;
  for(i = 1; i<5; i++){
    isVisible = EC.visibilityOf(ids);
    if(isVisible){
        return await ids.sendKeys(value).then(function(){
            browser.sleep(500);
        }) .catch(error => {
            console.log('---------Error: Element not sent by id-----------');

            throw error;
        });
    }
  }
}

exports.clickElementById = async function(id){
  controls.waitForElementById(id);
  var isClickable;
  var processingBar;
  var check;
  for(i = 1; i<5; i++){
    isClickable = EC.elementToBeClickable(id);
    processingBar = EC.invisibilityOf(element(by.xpath("//*[contains(@id,'exterroLoader')]")));
    check = EC.and(isClickable,processingBar);
    if(check){
        return await id.click().then(function(){
            browser.sleep(500);
        }) .catch(error => {
            console.log('---------Error: Element not clicked by id-----------');
            throw error;
        });
    }
  }
};

formOperations.js

browser.ignoreSynchronization = true;
var controls = require('./controls.js');
var pageElements = require('./elements.js');
var e;

exports.form1 = async function(){
    e = new pageElements();
    browser.get("https://form.htm");
    await controls.sendKeysById(e.usernameField);
    await controls.sendKeysById(e.passwordField);
    await controls.clickByXpath(e.signinButton);
    await controls.sendKeysById(e.formField1);
};

exports.form2 = async function(){
    e = new pageElements();
    browser.get("https://form.htm");
    await controls.sendKeysById(e.usernameField);
    await controls.sendKeysById(e.passwordField);
    await controls.clickByXpath(e.signinButton);
    await controls.sendKeysById(e.formField2);
};

TestCases.js

var ignore = function(exp){return{it:((typeof exp==='function')?exp():exp)?function(){}:it}};

describe('Automation', function() {
var controls = require('./controls.js');
browser.ignoreSynchronization = true;
browser.get('https://prre2eauto.exterrocloud.info');

it('Form 1', async function(){
    var a = require('./formOperations.js');
    await a.form1();
});

it('Form 2', async function(){
    var a = require('./formOperations.js');
    await a.form2();
});

});

The above is given an example code but the model I m using is exactly the same.

What I am exactly facing is

1. form1 is executed successfully without any errors.

2. form2 is executed successfully but gives the following error:

   Jasmine spec timed out. Resetting the WebDriver Control Flow.
   Message:
   [31m    Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.[0m
   Stack:
   Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
   at ontimeout (timers.js:498:11)
   at tryOnTimeout (timers.js:323:5)
   at Timer.listOnTimeout (timers.js:290:5)
   

Please help on this as this takes much longer time for me to understand.

Answer 1

Try the below one

var controls = require('./controls.js');
describe('Automation', function() {

beforeEach(async() =>{ //This block will be executed before every `it` block
await browser.waitForAngualrEnabled(true);
await browser.get('https://prre2eauto.exterrocloud.info');
});

it('Form 1', async function(){
    var a = require('./formOperations.js');
    await a.form1();
});

it('Form 2', async function(){
    var b = require('./formOperations.js');
    await b.form2();
});

});

Hope it helps you