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.

score 7 · Accepted Answer · edited May 23 '17 at 12:25

7

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');

edited May 23 '17 at 12:25

Community

1
1

answered Mar 04 '15 at 15:39

alecxe

462,703
120
1,088
1,195

Cool! I'm going to try it now. Thanks! – devwannabe Mar 04 '15 at 15:46
Got an error - TypeError: Cannot call method 'visibilityOf' of undefined. I ran protractor --version and got 1.3.1 Looks like I need to update my protractor binary. Correct? – devwannabe Mar 04 '15 at 15:48
@devwannabe correct, 1.3.1 is way too old anyway :) – alecxe Mar 04 '15 at 15:49
The only right answer relevant to newer versions at time of writing this comment 5/5/2015. Thank you – Tabby Laredo May 06 '15 at 03:13

score 1 · Answer 2 · answered Mar 04 '15 at 15:56

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);

I'll try your solution to later once I get off the train. The update of protractor to 1.8 also worked with the poster's code above. I'll your code too because of the use of 'then' — devwannabe, Mar 04 '15 at 15:58
It worked too using my old protractor! Thanks Alan Yackel! :) — devwannabe, Mar 04 '15 at 16:38

tell Protractor to wait for the page before executing expect

2 Answers2

Linked