replace browser.sleep in Protractor and WebDriver to wait for an element

You should never use browser.driver.sleep(1000) in order to wait for an element with Protractor.

do not use browser wait with protractorInstead use ExpectedConditions in order to  with Protractor.

browser.wait(EC.presenceOf(detailsTableResidents), 3500);
This means, it will wait up to 3500 ms, until the element is rendered.
If the element is rendered within 1000ms, it will skip the rest of 2500 waiting ms. Therefore, you saved 2500ms.

Explanation. Why you should use EC instead of sleep in order to wait for an element to be rendered with Protractor.

Protractor is “Angular aware”, meaning it does some nice stuff for you, like being smart enough to know when an Angular application is bootstrapped, handling things like waiting for a digest loop to complete when you update your model, etc.
There’s absolutely no rule on how long will it take for a specific element to render. If the network does works really well it will take a longer time to download the sources
In simpler words, this means that Protractor will directly communicate with Angular application, in order to shorthen the time, and it will get real time information that a specific DOM element was updated.
The difference between browser.sleep() and browser.wait() is that browser.wait() expects a specific value/condition. This wait condition is valid of Protractor or any WebDriver framework.
Another thing that needs mentioned here is that Protractor/WebDriver will stop running that function as soon as that function is evaluated to true, or the timeout time is complete.

Now, I will actual show how to use Smart Waits with Protractor / How to use Expected Conditions with Protractor

Another way for rewriting protractor.driver.sleep, is using async functions and browser wait.
let matchingFile = UtilsFiles.getFile(filePath);
browser.driver.wait(function () {
    if (matchingFile) {
        return true;
    }
    return false;
}, 3000);
In the example above the UtilsFiles.getFile(filePath); method, calls for a value. It that method receives a value within 3000 miliseconds, then it will return true and continue, otherwise will return false.
how To wait for an element to contain any text, you can write a custom expected condition:
let EC = protractor.ExpectedConditions;
let testSearchingLookingMethod = function(elementFinder) {
    let searchesForText = function() {
        return elementFinder.getText().then(function(actualTextResultedFromAPromise) {
            return actualTextResultedFromAPromise;
        });
    };
    return EC.and(EC.presenceOf(elementFinder), searchesForText);
};
How to run the above function:
browser.wait(testSearchingLookingMethod(element(by.css(‘.divName')), 5000);
There are a bunch of methods for EC already written for Protractor that you should use in your tests!

Examples of Expected Conditions for Protractor:

not
Negates the result of a promise.
EC.not(EC.titleIs('Foo'));
and
Chain a number of expected conditions using logical_and, short circuiting at the first expected condition that evaluates to false.
vartitleContainsFoo=EC.titleContains('Foo');
vartitleIsNotFooBar=EC.not(EC.titleIs('FooBar'));
// Waits for title to contain 'Foo', but is not 'FooBar'
browser.wait(EC.and(titleContainsFoo,titleIsNotFooBar),5000);
or
Chain a number of expected conditions using logical_or, short circuiting at the first expected condition that evaluates to true.
vartitleContainsFoo=EC.titleContains('Foo');
vartitleContainsBar=EC.titleContains('Bar');
// it waits until title contain either 'Foo' or 'Bar'
browser.wait(EC.or(titleContainsFoo,titleContainsBar),5000);
alertIsPresent
Expect an alert to be present.
browser.wait(EC.alertIsPresent(),5000);
elementToBeClickable
An Expectation for checking an element is visible and enabled such that you can click it.
browser.wait(EC.elementToBeClickable($('#abc')),5000);
textToBePresentInElement
An expectation for checking if the given text is present in the element.
browser.wait(EC.textToBePresentInElement($('#abc'),'foo'),5000);
textToBePresentInElementValue
An expectation for checking if the given text is present in the element’s value.
browser.wait(EC.textToBePresentInElementValue($('#myInput'),'foo'),5000);
titleContains
An expectation for checking that the title contains a case-sensitive substring.
browser.wait(EC.titleContains('foo'),5000);
titleIs
An expectation for checking the title of a page.
browser.wait(EC.titleIs('foo'),5000);
urlContains
An expectation for checking that the URL contains a case-sensitive substring.
browser.wait(EC.urlContains('foo'),5000);
urlIs
An expectation for checking the URL of a page.
browser.wait(EC.urlIs('foo'),5000);
presenceOf
An expectation for checking that an element is present on the DOM of a page.
browser.wait(EC.presenceOf($('#abc')),5000);
stalenessOf
An expectation for checking that an element is not attached to the DOM of a page.
browser.wait(EC.stalenessOf($('#abc')),5000);

visibilityOf

An expectation for checking that an element is present on the DOM of a page and visible.

browser.wait(EC.visibilityOf($('#abc')),5000);

invisibilityOf
An expectation for checking that an element is either invisible or not present on the DOM.
browser.wait(EC.invisibilityOf($('#abc')),5000);
elementToBeSelected
An expectation for checking the selection is selected.
browser.wait(EC.elementToBeSelected($('#myCheckbox')),5000);
How to wait for page complete after click an element with With WebDriver
elementToClick.click().then(function(){
 // will start processing then as soon as click completed loaded.
});
Do you you have some specific question in mind? Get in touch with me and ask me !
3 Comments