How to wait for a page or item to load when using Protractor for an Angular page

Question

I am new to Protractor. I think this happens to me when working with an Angular page, but I can’t figure it out on an Angular page. Any help would be greatly appreciated.

describe('Search', function() { it('should click Search button and wait for results', function() { browser.driver.findElement(by.id('search')).click(); }); }); 

Answer 1

Figured it out. I just added the code below, after the click method:

 describe('Search', function() { it('should click Search button and wait for results', function() { browser.driver.findElement(by.id('search')).click(); dvr.wait(function() { return dvr.isElementPresent(by.xpath( '/html/body/div/div[4]/div/div[2]/div/div/div/span')); }, 20000); }); }); 

Answer 2

Testing non-angular pages with Protractor can be tricky regarding material expectations.

I suggest you upgrade Protractor to last (1.5.0 at the moment), use the waitReady () user-defined function , which browser.wait is ready for the elements and rewrites your test, as shown below. Notice you can put everything in 1 spec if you like it.

 // TODO: use page objects var searchBtnElm = $('#search'); // use element(by.id('search')) if you prefer it('waits for the elements present and visible (non-angular)', function() { expect(searchBtnElm.waitReady()).toBeTruthy(); }); it('should click Search button', function() { searchBtnElm.click(); }); it('wait for more results', function() { // keep using waitReady() before interacting with the elements // and before performing expectations on them }); 

More on why waitReady here .

Note. Remember to set synchronization ignore to test your angular page:

  browser.ignoreSynchronization = true; 

You can set it before the browser.get page is not angular.

I suggested setting high implicit wait in the past, for example

 browser.manage().timeouts().implicitlyWait(5000); 

This hack avoids waitReady and continues to use the standard

 expect(searchBtnElm.isPresent()).toBeTruthy(); 

But it has an ugly flaw when testing elements NOT , i.e. when testing missing or invisible elements, in which case he will wait 5 seconds (5000 ms) in a weather vane, for example. by doing

 expect(someNonExistingElm.isPresent()).toBeFalsy(); 

Answer 3

Another neat approach is to use the "Expected Conditions" inside the .wait browser - something like this:

 var EC = protractor.ExpectedConditions; var search = element(by.id('search')) browser.wait(EC.visibilityOf(search), 2000).then(function(){ search.click() }) 

You can get more details here: https://angular.imtqy.com/protractor/#/api?view=ExpectedConditions

Answer 4

There are two types of terms per page in a transporter. isPresent ask if an item exists on the page. isDisplayed asks if the item is visible. If you expect the page to load, you need to wait for isDisplayed , but it will be an error if it is missing, so wait for isPresent first. I use a function to wait for an item.

 function waitForElement(el, waitTimeoutMilliseconds){ return browser.wait(function() { return el.isPresent(); }, waitTimeoutMilliseconds) .then(function(){ return browser.wait(function() { return el.isDisplayed(); }, waitTimeoutMilliseconds); }); } 

Then just call this function in your test.

 describe('Search', function() { it('should click Search button and wait for results', function() { var el = element(by.id('search')); waitForElement(el, 5000); el.click(); }); });