Waits in Protractor

waits-in-protractor

Wait is the process of matching the speed of action and reaction, Protractor does the action, and web application shows the reaction.

Wait is nothing but synchronizing the speed of the protractor with speed of the application, protractor is always faster than the application under test.

There are few ways to synchronize the protractor with the application under test:

  • Implicitly Wait
  • Explicitly Wait
  • pageLoadTimeout
  • scriptLoadTimeOut
  • Sleep [ Try to avoid ]

Locators in Protractor

Implicitly Wait in Protractor

implicitly wait in protractor, sets the maximum time that we are going to wait for the element to be available on the Website.

Implicit wait affects only element and element.all methods in protractor

If we have given implicit wait of 30,000 milliseconds then, Implicit wait tries to find the element in first go, if element is not present implicit wait tries to find the element after 500ms of first polling, if element is not available on the second time also then implicitWait tries the third time after 500 ms of the second try and it goes on till the time reaches the 30,000 milliseconds.

// implicitly wait
browser.manage().timeouts().implicitlyWait(30000)
If the element is found before implicitly wait time, selenium moves to the next commands in the program without waiting to complete the implicitly wait time; this wait is also called dynamic wait.

The ImplicitWait is set for the entire duration of your webdriver and is set at the start of your program. Most of the automation testers write the implicit wait in the conf file.

Implicitly wait is one of the ways Default wait time of to request protractor not throw any exception until provided time. The Default wait time of the selenium is 500 milliseconds, implicitly wait overrides the default wait time of the selenium webdriver.

Setting the wait timeout to 0 (its default value) disables implicit waiting, but not recommended.

Set Window Size with Protractor

Implicitly wait method accepts int parameter, which specifies the amount of time the protractor should wait when searching for an element if it is not immediately present.

When searching for a single element, the protractor should poll the page until the element has been found, or this timeout expires before failing with a NO_SUCH_ELEMENT Error.

When searching for multiple elements, the protractor should poll the page until at least one element has been found, or this timeout has expired.

import { browser, element, by} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().timeouts().implicitlyWait(50000)
	it('sendkeys operation', function() {
		browser.get('https://google.com/');
		browser.sleep(1000)
		element(by.name('noSuchNameIsThere')).sendKeys("hello")
	});
});


The above example will wait for 50 seconds till that it polls again and again to find the element, but we have given a 'name' locator, which is not present on the google page.

Video Tutorial for Implicit Wait in protractor

Scope of Implicitly Wait in Protractor

Once set, the implicit wait is set for the life of the protractor object instance. You can re-assign the implicit wait time anywhere you want.

When does Implicitly Wait is applicable for element.all method. :

Implicit wait in protractor is applicable for all element statements, but the applicability of implicit wait to the element.all is Limited.

Implicitly wait is applicable to the element.all only when there are no elements present, protractor moves to the next command the moment it finds a single element.

If there are Zero matching elements protractor waits till the time, it reaches provided implicitly wait.

Scenario 1 : Consider a page having 100 checkboxes and applied implicit wait is 30 Seconds
When the page is loading protractor tries to find all the matching elements, but at that moment, there no matching elements.

After 10 seconds of wait 1 checkbox is loaded, now protractor finds that one checkbox and concludes that there is only one element, so it ends the wait and moves to the next command.

protractor does not wait till 100 checkboxes loaded into the page, as protractor does not know how many elements going to be present on the page.

Scenario 2 : Consider a page having 0 checkboxes and applied implicit wait is 30 Seconds
Protractor tries to find all the matching elements in DOM, but so far, no checkbox is loaded.

Now there are zero matches, so protractor waits till 30 seconds, and if it does not find element after 30 seconds protractor throws NoSuchElement Error.

Errors in Protractor

Explicit wait in Protractor

The explicit wait tells the protractor to wait for certain conditions or the maximum time limit before throwing an "Exception".

ExplicitWait is a dynamic wait, which means it will wait only until the condition is not met; the moment condition is met, then protractor starts executing the next line of code.

For example: if you are waiting for a condition with 60 seconds, if the condition is met at 4th second, then Explicit wait will not wait till 60 seconds.

ExplicitWait does not have any effect on element and element.all, ExplicitWait also called WebdriverWait.

ExplicitWait, by default, calls the ExpectedCondition every 500 milliseconds until it returns successfully.

browser.wait(conditions)


Most of the time, the conditions are used from the ExpctedCoditions class in protractor.

Protractor Locators

Expected Conditions in Protractor

ExpectedConditions is a class that represents a library of canned expected conditions that are useful for the protractor, especially when dealing with non-angular apps.

Each condition returns a function that evaluates to a promise

  • alertIsPresent
  • elementToBeClickable
  • textToBePresentInElement
  • textToBePresentInElementValue
  • titleContains
  • titleIs
  • urlContains
  • urlIs
  • presenceOf
  • stalenessOf
  • visibilityOf
  • invisibilityOf
  • elementToBeSelected
  • not
  • and
  • or

alertIsPresent

alertIsPresent method wait checks whether an alert is present or not, the value is returned in promise, we have to resolve it to get the value.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		browser.sleep(1000)
		element(by.id('alert')).click();
		browser.wait(ExpectedConditions.alertIsPresent(), 30000)
	});
});


Sometimes instead of writing ExpectedConditions full form all the times, we can store it in a variable and use a short name like below.

Below code wait for an alert to be present within 30 seconds; if not, the browser.wait() will throw a Timeout Error.

let EC = ExpectedConditions;
browser.wait(EC.alertIsPresent(), 30000)

elementToBeClickable

elementToBeClickable() method will wait till, a given element becomes clickable. If the element is not clickable after reaching the given time limit, then protractor will throw a Timeout Error.

In the below example, if you click button Enable after 10 seconds and wait for the target button to become clickable, max in 30 seconds.

We can store the total condition in a variable.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		browser.sleep(7000)
		element(by.id('enable-button')).click();
		let EC = ExpectedConditions;
		let condition = EC.elementToBeClickable(element(by.id("disable")))
		browser.wait(condition, 30000)
	});
});

What is ElementArrayFinder

textToBePresentInElement

textToBePresentInElement() methods waits till a given element's text becomes some value that we pass.

We have to pass target and element and expected text to this message.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		browser.sleep(7000)
		element(by.id('populate-text')).click();
		let EC = ExpectedConditions;
		let condition = EC.textToBePresentInElement(element(by.class("target-text")), "Selenium Webdriver")
		browser.wait(condition, 30000)
	});
});

textToBePresentInElementValue

textToBePresentInElementValue method is almost like textToBePresentInElement method, but the change is; in textToBePresentInElementValue we are looking for matching case sensitive substring the text values.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		browser.sleep(7000)
		element(by.id('populate-text')).click();
		let EC = ExpectedConditions;
		let condition = EC.textToBePresentInElementValue(element(by.class("target-text")), "Webdriver")
		browser.wait(condition, 30000)
	});
});

Create Select class with Protractor

titleContains

titleContains() wait for a webpage title contains a given substring.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		let EC = ExpectedConditions;
		let condition = EC.titleContains("Practice")
		browser.wait(condition, 30000)
	});
});

titleIs

titleIs() method wait till a page title becomes required string, but if the title is not given string then protractor throws an exception

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		let EC = ExpectedConditions;
		let condition = EC.titleIs("ExplicitlyWait Practice page in Selenium Webdriver")
		browser.wait(condition, 30000)
	});
});

Switch to Parent Frame

urlContains

urlContains() method waits till a page URL becomes to contain expected substring or till the timeout reaches

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		let EC = ExpectedConditions;
		let condition = EC.urlContains("explicit")
		browser.wait(condition, 30000)
	});
});

urlIs

urlIs() waits till the page URL becomes expected string or till max timeout

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		let EC = ExpectedConditions;
		let condition = EC.urlContains("explicit-wait")
		browser.wait(condition, 30000)
	});
});

presenceOf

presenceOf() methods waits will a particular element is present with a given max timeout. If the element is not present on the webpage with a given time, then it will throw a TimeoutError.

let EC = ExpectedConditions;
let condition = EC.presenceOf(element(by.id("something")))
browser.wait(condition, 30000)

stalenessOf

stalenessOf() method waits for an element to be refreshed.

let EC = ExpectedConditions;
let condition = EC.stalenessOf(element(by.id("something")))
browser.wait(condition, 30000)

visibilityOf

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

Visibility means that the element is not only displayed but also has a height and width that is greater than 0.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		element(by.id("display-other-button")).click()
		let EC = ExpectedConditions;
		let condition = EC.visibilityOf(element(by.id("hidden")))
		browser.wait(condition, 30000)
	});
});

invisibilityOf

This is the opposite of the visibilityOf() method; it waits for an element to disappear within the given time.

Screenshot in Protractor

elementToBeSelected

elementToBeSelected() this method waits till Checkbox, Radio button, or dropdown option is selected with a given time limit.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		element(by.id("checkbox")).click()
		let EC = ExpectedConditions;
		let condition = EC.elementToBeSelected(element(by.id("ch")))
		browser.wait(condition, 30000)
	});
});

not

the not() method in expected condition invert the given expected condition.

Below code waits for an element to be unchecked with a specific time

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		element(by.id("checkbox")).click()
		let EC = ExpectedConditions;
		let condition = EC.not(EC.elementToBeSelected(element(by.id("ch"))))
		browser.wait(condition, 30000)
	});
});

GET method in API

and

We can group the expected condition using and method in ExpectedConditions class.

This will throw Error if any of the given condition is not met within a given time.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		element(by.id("checkbox")).click()
		element(by.id("populate-text")).click()
		let EC = ExpectedConditions;
		let condition = EC.elementToBeSelected(element(by.id("ch")))
		let condition2 = EC.textToBePresentInElement(element(by.class("target-text")), "Selenium Webdriver")
		browser.wait(EC.and(condition,condition2), 30000)
	});
});

or

or() method combines all the Expected conditions, and it will wait for at least one conditions to be met.

or() throws Error if non of the conditions are met.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		element(by.id("checkbox")).click()
		element(by.id("populate-text")).click()
		let EC = ExpectedConditions;
		let condition = EC.elementToBeSelected(element(by.id("ch")))
		let condition2 = EC.textToBePresentInElement(element(by.class("target-text")), "Selenium Webdriver")
		browser.wait(EC.or(condition,condition), 30000)
	});
});

Default Content in protractor

pageLoadTimeout in Protractor

pageLoadTimeout() method in protractor waits for an page to load within given time limit when we use get() or navigate().to() method to load a webpage.

If the page is not loaded within the given time, then the protractor throws a Timeout Error, this method is not applicable for a page which loaded by click or some other method.

I guess you do not have a doubt, whether to use it before using the get() method or after using get() method.

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.manage().timeouts().pageLoadTimeout(45000)
		browser.get('https://chercher.tech/practice/explicit-wait');
	});
});

Send email in protractor.

browser.sleep() in Protractor

sleep() method is a more useful method when you have nightmare scenarios in your application.

sleep() is a static wait, which means it will wait till given time no matter what happens or no matter who comes.

sleep() method will be useful when you have a condition where the element is refreshed in the last step of code but try to avoid the sleep method.

sleep() accepts a parameter which is in milliseconds, below program waits for 5 seconds

import { browser, element, by, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('sendkeys operation', function() {
		browser.get('https://chercher.tech/practice/explicit-wait');
		browser.sleep(5000)
		element(by.id("checkbox")).click()
		element(by.id("populate-text")).click()
	});
});

Handle Authentication Pop Up in Protractor

Protractor Interview Questions

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • kurt
    For your expected conditions section for NOT and OR you have something like this:
    
      let condition = EC.elementToBeSelected(element(by.id("ch")))
    		let condition2 = EC.textToBePresentInElement(element(by.class("target-text")), "Selenium Webdriver")
    		browser.wait(EC.and(condition,condition), 30000)
    
    Should the last line be browser.wait(EC.and(condition,condition2), 30000)  where the second condition is "condition2" and not just "condition?"
    Reply
    • Author
      My Bad, I have corrected it
      Reply
      • gr8 work. In urlls promise, plz correct the method name as urlls()
        Reply