How to explain the use of browser.sleep in the protractor

Question

I am new to protractor and I am trying to check the popover event, here is my code:

describe('popover directive', function() { var buttons= element.all(by.tagName('button')); it('should show the popover title by clicking', function() { var popTitle="testTitle"; var popContent="testContent"; element(by.model('title')).clear().sendKeys(popTitle); element(by.model('content')).clear().sendKeys(popContent).then(function(){ buttons.get(0).click().then(function(){ browser.sleep(1000); expect(element(by.className('popover-title')).getText()).toMatch(popTitle); expect(element(by.className('popover-content')).getText()).toMatch(popContent); }); }); buttons.get(0).click(); browser.sleep(1000); expect(element(by.css('[class="popover fade top in"]')).isPresent()).toBe(false); }); }); 

1.If I do not add a delay time code, for example browser.sleep() , the test will fail and show a message:

 NoSuchElementError: No element found using locator: By.className('popover-title') 

Is it possible not to add a delay time code ... for example browser.sleep() ? If this is not possible, then how to set the sleep time? Is this related to CSS animation?

2. Using browser.waitForAngular() or click().then(function(){...}) instead of browser.sleep() seems to be inoperative, it will get the same error message.

It would be great if someone could answer these questions, thank you very much.

Answer 1

The reason you had to add a dream is most likely due to your animation. Many animations use setTimeout , which Angular (thus Protractor) does not know and does not wait. The angular equivalent of setTimeout is its $timeout service.

But often you cannot change the animation library to stop using setTimeout . To work with this in the transporter, use browser.wait with a timeout (not sleeping).

 buttons.get(0).click(); browser.wait(function() { return element(by.css('[class="popover fade top in"]')).isPresent().then(function(present) { return !present; }); // or by checking any other element to know that the animation completed }, 1000); expect(element(by.css('[class="popover fade top in"]')).isPresent()).toBe(false); 

With Protractor 1.7, you can use the library of expected resources to do this:

 var EC = protractor.ExpectedConditions buttons.get(0).click(); var e = element(by.css('[class="popover fade top in"]')); browser.wait(EC.not(EC.presenceOf(e)), 1000); expect(e.isPresent()).toBe(false); 

Answer 2

instead of using a browser, declare an instance of the protractor:

  ptor = protractor.getInstance(); ptor.ignoreSynchronization = true; 

Then use:

 ptor.get 

instead of the browser.