'Wait for element to be visible in Protractor

I spent a couple days trying to make Protractor click elements that are visible on the page appearing after a click on a button. But most of the time I have this error:

  Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  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)

I tried a couple things so far:

browser.waitForAngular was blocking the script, even though I could see I was on the second page.
Multiple browser.driver.wait implementation, like this one:

browser.driver.wait(EC.visibilityOf($('li.unsigned')), 10000).then(() => { element($('li.unsigned')).click(); })
protractor.ExpectedConditions as you can see above, which did not work as well.
I also added an option in my onPrepare script to manage implicitWait, like so:

onPrepare: function () { browser.manage().timeouts().implicitlyWait(15000);

The only way I got it to work was to remove everything I tried and use a browser.sleep(10000) before trying to click the element.

If anybody has an idea of what could cause the issue, or what else I could try, you're welcome!

Solution 1:^[1]

even I had similar issue and I added these lines in my config

 jasmineNodeOpts: {
// Default time to wait in ms before a test fails.
   defaultTimeoutInterval: 250000
},
allScriptsTimeout: 180000

and in my specs

var originalTimeout;  
beforeEach(function () {
originalTimeout = jasmine.defaultTimeoutInterval;
jasmine.defaultTimeoutInterval = 50000;
});

it("texttobe", function(){
}

afterEach(function () {
jasmine.defaultTimeoutInterval = originalTimeout;
});

Solution 2:^[2]

So, after playing a bit more with my code, I got it to work with just the addition to the onPrepare in protractor.conf.js:

  onPrepare: function () {
    browser.manage().timeouts().implicitlyWait(30000);
    require('ts-node').register({
      project: './tsconfig.e2e.json'
    });
  }

And by doing a browser.driver.findElement(by.css(element)).then().

Having the ExpectedConditions with the implicitWait created an issue that resulted in the timeout though, but I don't know the reason why.

Solution 3:^[3]

You can retrieve an element with the following:

const elem = browser.element(by.css("div#target")); // use "browser.element.all" to get multiple elements

Or its equivalent:

const elem = browser.$("div#target"); // use "browser.$$" to get multiple elements

Then wait for it to be visible:

await browser.wait(protractor.ExpectedConditions.visibilityOf(elem), 10000); // 10s timeout

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Vin
Solution 2	Jean-Baptiste
Solution 3	lezhumain

'Wait for element to be visible in Protractor

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]