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 application under test.

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

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

Implicitly Wait in Protractor

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

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

If we have given implicit wait of 30,000 milli-seconds 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 second time also then implicit wait tries third time after 500 ms of second try and it goes on till the time reaches the 30,000 milli-seconds


										// implicitly wait
										browser.manage().timeouts().implicitlyWait(30000)			
										


If element is found before implicitly wait time, selenium moves to next commands in the program without waiting to complete the implicitly wait time, this wait is also called dynamic wait.

Implicit wait 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 way to request selenium not throw any exception until provided time. Default wait time of the selenium is 500 milli-seconds, 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

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")
										});
									});			
									


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

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 applicability of implicit wait to the element.all is Limited.

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

If there is 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 check box is loaded, now protractor finds that one checkbox and concludes that there is only one element, so it ends the wait and moves to next command.

protractor doesnot wait till 100 check boxes loaded into page, as protractor doesnot 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 check box is loaded.

Now there is zero match so protractor waits till 30 seconds, and if doesnot find element after 30 seconds protractor throws NoSuchElement Error

Explicit wait in Protractor

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

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

For example: if you are waiting for a condition with 60 seconds, if the condition is meth 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 as 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 ExpctedCoditions class in protractor.

Expected Conditions in Protractor

ExpectedConditions is a class represents a library of canned expected conditions that are useful for 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		browser.sleep(1000)
		element(by.id('alert')).click();
		browser.wait(ExpectedConditions.alertIsPresent(), 30000)
	});
});			


Sometimes instead of writing ExpectedConditions full form all the 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 an Timeout Error.


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

elementToBeClickable

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

In 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		browser.sleep(7000)
		element(by.id('enable-button')).click();
		let EC = ExpectedConditions;
		let condition = EC.elementToBeClickable(element(by.id("disable")))
		browser.wait(condition, 30000)
	});
});			

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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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)
	});
});			

titleContains

titleContains() wait for an 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		let EC = ExpectedConditions;
		let condition = EC.titleIs("ExplicitlyWait Practice page in Selenium Webdriver")
		browser.wait(condition, 30000)
	});
});			

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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		let EC = ExpectedConditions;
		let condition = EC.urlContains("explicit-wait-sample-selenium-webdriver")
		browser.wait(condition, 30000)
	});
});			

presenceOf

presenceOf() methods waits will a particular element is present with given max timeout. If element is not present in webpage with given time then it will throw an 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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 opposite of visibilityOf() method, it wait for an element to disappear within given time.

elementToBeSelected

elementToBeSelected() this method waits till Checkbox, Radio button, or dropdown option is selected with 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		element(by.id("checkbox")).click()

		let EC = ExpectedConditions;
		let condition = EC.elementToBeSelected(element(by.id("ch")))
		browser.wait(condition, 30000)
	});
});			

not

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

Below code waits for 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		element(by.id("checkbox")).click()

		let EC = ExpectedConditions;
		let condition = EC.not(EC.elementToBeSelected(element(by.id("ch"))))
		browser.wait(condition, 30000)
	});
});			

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 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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,condition), 30000)
	});
});			

or

or() method combines all the Expected conditions, and it will wait for atleast 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		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)
	});
});			

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 page is not loaded within given time then protractor throws an Timeout Error, this method is not applicable for a page which loaded by click or someother method.

I guess you donot have doubt, whether to use it before using 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
	});
});			


browser.sleep() in Protractor

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

sleep() is static wait, which mean 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 element is refresh in the last step of code, but try to avoid sleep method.

sleep() accepts a parameter which is in milli-seconds, 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('http://chercher.tech/practice/explicit-wait-sample-selenium-webdriver.php');
		browser.sleep(5000)
		element(by.id("checkbox")).click()
		element(by.id("populate-text")).click()
	});
});			


 
Join My Facebook Group
Join Group
 

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
 
Selenium-Webdriver.Com [Group]
Facebook Group · 801 members
Join Group
Learn Selenium Webdriver Concepts and Interview Questions Learn and code
 
Copyright © CherCher Tech