How can I wait for the conditions?

Question

I am new to protractor and am trying to run the e2e test. I don't know if this is the right thing to do, but ... The page I want to check is not a full angular page, so ... I have problems.

In my first specification, I:

describe('should open contact page', function() { var ptor = protractor.getInstance(); beforeEach(function(){ var Login = require('./util/Login'); new Login(ptor); }); 

I created this Login class, but after logging in, I want to open the contact page, but the protractor will immediately try to find the item before the page is fully loaded.

I tried to use:

 browser.driver.wait(function() { expect(browser.findElement(by.xpath("//a[@href='#/contacts']")).isDisplayed()); ptor.findElement(by.xpath("//a[@href='#/contacts']")).click(); }); 

But it does not work ... it always tries to find the element before the page loads. I also tried:

 browser.driver.wait(function() { expect(ptor.isElementPresent(by.xpath("//a[@href='#/contacts']"))); ptor.findElement(by.xpath("//a[@href='#/contacts']")).click(); }); 

I can do this with browser.sleep(); but I don’t think this is a good option. Any ideas? In my login class, I have:

 ptor.ignoreSynchronization = true; 

How can I wait for this @href='#/contacts before the protractor tries to click on it?

Answer 1

I had the same problem that you encountered for a long time when using the protractor. In my e2e testing, I run the angular application and then go to the angular part and then go back to the angular part. Made everything complicated. The key is to understand promises and how they work. Here are some examples of my real world code in the current e2e test. Hoping this gives you an idea of ​​how to structure your tests. There are probably some bad practices in this code, please feel free to improve this, but I know that this works, maybe not the best way.

To go to angular, I use

 var ptor; var events = require('events'); var eventEmitter = new events.EventEmitter(); var secondClick = require('./second-click'); beforeEach(function () { browser.driver.get('http://localhost:8080/'); },10000); it("should start the test", function () { describe("starting", function () { it("should find the link and start the test", function(){ var elementToFind = by.linkText('Start'); //what element we are looking for browser.driver.isElementPresent(elementToFind).then(function(isPresent){ expect(isPresent).toBe(true); //the test, kind of redundant but it helps pass or fail browser.driver.findElement(elementToFind).then(function(start){ start.click().then(function(){ //once we've found the element and its on the page click it!! :) ptor = protractor.getInstance(); //pass down protractor and the events to other files so we can emit events secondClick(eventEmitter, ptor); //this is your callback to keep going on to other actions or test in another file }); }); }); }); }); },60000); 

In angular, this code works

  describe("type in a message ", function(){ it("should find and type in a random message", function(){ var elementToFind = by.css('form textarea.limited'); browser.driver.isElementPresent(elementToFind).then(function(isPresent){ element(elementToFind).sendKeys(randomSentence).then(function(){ console.log("typed in random message"); continueOn(); }); }); }); },15000); 

After exiting angular

 browser.driver.wait(function(){ console.log("polling for a firstName to appear"); return browser.driver.isElementPresent(by.name('firstName')).then(function(el){ return el === true; }); }). then(function(){ somefunctionToExecute() }); 

Hope that gives some recommendations and helps you!

Answer 2

1.7.0 also introduced a new feature: expected conditions .

There are several predefined conditions for explicit expectation. If you want to wait for the item to appear:

 var EC = protractor.ExpectedConditions; var e = element(by.id('xyz')); browser.wait(EC.presenceOf(e), 10000); expect(e.isPresent()).toBeTruthy(); 

See also:

• Expected conditions in the protractor

Answer 3

I finally know ...

  var waitLoading = by.css('#loading.loader-state-hidden'); browser.wait(function() { return ptor.isElementPresent(waitLoading); }, 8000); expect(ptor.isElementPresent(waitLoading)).toBeTruthy(); var openContact = by.xpath("//a[@href='#/contacts']"); element(openContact).click(); 

Using this protractor, you can wait for this item until the download page disappears. Thanks for trying to help XD.

Answer 4

 browser.driver.wait(function() { return browser.driver.isElementPresent(by.xpath("//a[@href='#/contacts']")); }); 

This also works for me (without a timeout parameter).

for more information see http://angular.imtqy.com/protractor/#/api?view=webdriver.WebDriver.prototype.wait

Answer 5

Thanks to the answers above it was my simplified and updated use

 function waitFor (selector) { return browser.wait(function () { return browser.isElementPresent(by.css(selector)); }, 50000); } 

Answer 6

Have you tried putting ng-app in the <html> (if this part of the code is under your control)? This solved a lot of initialization synchronization problems for me.

Answer 7

The best way to use the wait conditions in the protractor, which helps to display the correct error message for a particular item in case of a failed test

 const EC = ExpectedConditions; const ele = element(by.xpath(your xpath)); return browser.wait(EC.visibilityOf(ele),9000,'element not found').then(() => { ele.click(); }); 

Answer 8

I am surprised that no one has added this solution. Basically, if you use modal dialogs, you often get the element visible and clickable, but not activated due to the modal dialog in front of it. This is because the protractor moves faster than the corner, and is ready to click on the next element while the corner still closes the modal.

I suggest using

 public async clickElementBug(elementLocator: Locator) { const elem = await element(elementLocator); await browser.wait( async function() { try { await elem.click(); return true; } catch (error) { return false; } }, this.TIMEOUT_MILLIS, 'Clicking of element failed: ' + elem ); 

}