tell Protractor to wait for the page before executing expect

Question

When I click the export button, it makes a REST call to our endpoint then few seconds after, I receive the response then I also render the table. Unfortunately, I read that every call is asynchronous which means my expect will be executed even if table hasn't been rendered yet. The expect I wrote checks if the string is on the table but it's failing since it's not there yet. What is the proper approach to this?

it('should generate global user report', function() {
    element(by.css('button#exportButton')).click();

    expect(element(by.css("th[name*=Date]")).getText()).
        toEqual('Date');
})

The error on the console is

NoSuchElementError: No element found using locator: By.cssSelector("th[name*=Date]")

I noticed that the table hasn't been rendered yet that's why it's failing.

Answer 1

Protractor 1.7 introduced a feature called "Expected Conditions", that can be applied here.

Wait for element to become visible:

var EC = protractor.ExpectedConditions;
var elm = element(by.css("th[name*=Date]"));

browser.wait(EC.visibilityOf(elm), 5000);
expect(elm.getText()).toEqual('Date');

Answer 2

I had problem waiting for a dynamic element to appear. Have the driver wait for it to either be present or displayed. The number at the end is the timeout.

element(by.css('button#exportButton')).click();
var header = element(by.css("th[name*=Date]"));
browser.driver.wait(function() {
    return header.isPresent();
}, 1000);
expect(header.getText()).toEqual('Date');

I had to wait until it was present AND displayed before the test was fully stable. You can do that like this:

var header = element(by.css("th[name*=Date]"));        
browser.driver.wait(function() {
    return header.isPresent().then(function(present) {
        if (present) {
            return header.isDisplayed().then(function(visible) {                   
                return visible;
            });
        } else {
            return false;
        }
    });
}, 1000);