Protractor Tutorial: Handling Timeouts With Selenium

A lot of times while performing Selenium, you’ll come across certain scenarios when your test fails due to the fact that the webpage or the web element takes some time to load completely. In such scenarios, the best approach is to wait for the page or the web elements to load completely in order to avoid any errors due to timeout. These errors can be easily resolved if you know how to handle timeouts in Protractor with Selenium, as they help to set an interval of time before the next action is carried out.

To make it even simpler let’s say you visit Amazon’s website, you find a special deals button, you click on it and it brings out a popup with the offer, which further takes you to the deals page. These different elements like the button and pop-up takes some time to load and become interactive. But when we run our test scripts without any instruction to wait, it’ll end up throwing an error. To deal with this, we need to handle timeouts in Protractor with Selenium so that we give ample amount of time for the particular element to load.

So, in order to help you tackle this problem, I’ll show you how to handle timeouts in this Protractor tutorial. If you’re new to Protractor you can visit this Protractor tutorial on running your first test script for Protractor testing. To delve deeper into the realm of Protractor, explore our dedicated hub focusing on Protractor Interview Questions.

Timeout While Waiting For The Page To Load

While performing Selenium test automation to navigate a page on the browser, you’ll instruct the Selenium WebDriver to load the web page using the browser.get() command. Under the hood, the Protractor framework waits for the page to load completely.

So let’s take a test case to handle timeouts in Selenium Protractor, where we set the timeout as 5000 ms or 5 secs, the browser will wait for the page to load until 5 sec and returns an error if the page takes more time to load.

For this, you’ll have to add getPageTimeout (timeout in milliseconds) to your protractor configuration file, to reflect the change in timeout globally. But in case you want to provide the timeout for individual test cases, you’ll have to pass an additional parameter when calling the browser.get() i.e. browser.get ( address, the timeout in milliseconds ).

test_config.js

Alternatively specifying the value as an argument to handle timeouts in Protractor with Selenium:

Timeout During Activity After Loading The Page

While performing any browser action on a page while performing Selenium test automation for Protractor testing, the javascript framework waits before proceeding with any action until there are no remaining asynchronous tasks in the application. It indicates that all the timeout along with the HTTP requests has been completed.

So let’s take a use case to handle timeouts in Protractor with Selenium where we set the default timeout as 6000 ms or 6 secs, the browser will wait after the page load before proceeding with any activity until 6 sec and then error out stating that it timed out waiting for asynchronous tasks to finish after 6000 ms.

For this, you’ll have to add allScriptsTimeout (timeout in ms) to the Protractor configuration file and this will reflect the change in timeout globally.

test_config.js

You can also fix this by making a change in the web applications for Protractor testing. Protractor waits indefinitely and then time out if the AngularJS application continuously checks $timeout or $http. You can use the $interval for any continuous polling as introduced in Angular 1.2. For Angular applications, Protractor must wait until the Angular Zone is stabilized.

This means that long-running asynchronous operations would prevent your test from continuing. Hence, you’ll need to execute such tasks outside the Angular zone to have a workaround for this fix in this Protractor tutorial. For example:

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

Timeout When Waiting For The Variable To Be Initialized

When launching any URL in the browser for Protractor testing, the protractor waits for the angular variable to be present while loading a new page.

Let’s take a use case to handle timeouts in Protractor with Selenium, where you set the default timeout as 8000 ms or 8 secs, the browser will wait for the angular variable on the page load before proceeding with any activity until 8 sec and return an error stating that angular could not be found on the page, retries looking for the angular exceeded.

For this, you’ll have to add getPageTimeout (timeout in millis) to your protractor configuration file to reflect the change in timeout globally. But in case if you want to provide the timeout individually during each loading of the web page in the browser, you’ll need to pass an additional parameter when calling the browser.get() i.e. browser.get ( address, the timeout in milliseconds ).

test_config.js

Alternatively specifying the value as an argument to handle timeouts in Protractor with Selenium.

Test Specification Timeout in Protractor

The test specification i.e. the ‘it block’ of the Protractor testing case that defines the test case to be executed. In case the test case takes a long time to execute, for any reason like the processing of the test case, then ‘it’ block will fail and result in an error.

If we consider an example to handle timeouts in Protractor with Selenium, where the default timeout is set as 15000 ms or 15 secs, the browser will wait for the spec to complete execution until 15 sec and then results in a failure in the test results.

You need to add jasmineNodeOpts (timeout in millis) to the protractor configuration file to reflect the change in timeout globally. But in case we would like to provide the timeout individually for each test specification, we can achieve this by passing the third parameter in the ‘it’ block i.e. it(description, testFunc, a timeout in milliseconds).

test_config.js

Alternatively, by passing as an argument:

Read More: Protractor Vs Selenium: A Detailed Difference

Asynchronous Script Timeout in Protractor

The asynchronous script timeout is used to indicate the script to wait until the specified timeout limit so that it can complete its execution before the error is thrown to handle timeouts in Protractor Selenium.

So let us take a use case to handle timeouts in Protractor with Selenium where we set the default timeout as 7000 ms or 7 secs, the browser will wait for any asynchronous task to complete its execution to handle timeouts in Protractor Selenium, before proceeding with its throwing an error until 7 sec and then results into a ScriptTimeoutError out stating that it timed out waiting for asynchronous tasks.

In order to modify this behavior to handle timeouts in Protractor Selenium, you need to add allScriptsTimeout (timeout in millis) to the protractor configuration file and this will reflect the change in timeout globally.

test_config.js

Ways To Toggle The Waiting Feature In Protractor

Whenever you want navigation or open a page in the browser that does not use Angular, we can disable this feature of waiting for timeout by passing the argument as false when calling the function i.e. browser.waitForAngularEnabled(false).

But it might happen that we can get the Asynchronous Script TimeOut Exception from the WaitForAngular method. In such a case the first important thing would be to check on the timeout of our webdriver for scripts that have been set to something around 5 seconds for heavy and slowly loading websites.

Below is the complete code that demonstrates the behavior of handling timeouts in protractor.

test_timeout.js

Handle Timeouts In Protractor Selenium On Cloud Selenium Grid

We can run the same Selenium test automation script to handle timeouts in Protractor Selenium on a cloud Selenium grid that provides the capability to run the tests across various real-time browsers and devices. In order to run Selenium test automation scripts for this Protractor tutorial, we just require configuration changes i.e. for building a driver to connect with the LambdaTest hub. Below is our revised script with the appropriate modifications for this Protractor tutorial to handle timeouts in Protractor Selenium.

As we saw in our example for this Protractor tutorial, that just by appending a few lines of code, we can connect to the LambdaTest Platform and run our Selenium test automation script on the Cloud Selenium grid. In order to have this setup, we are required to generate the desired capability matrix.

You can visit LambdaTest Selenium desired capabilities generator to generate the required configuration through which we can specify the environment in which we would like to perform our tests. Also, we just need to pass our LambdaTest username and access key in the configuration file that will uniquely identify us on the LambdaTest platform.

Below is the output on running the Selenium test automation script on LambdaTest for this Protractor tutorial:

Also Read: How To Handle Alerts And Popups In Protractor With Selenium?

Wrapping It Up!

This brings us to the conclusion of this Protractor tutorial on how to handle timeout in Protractor Selenium. Throughout this article, I explored how to handle timeout and explored different approaches for it. After implementing this in our test scripts you’ll realize that it makes Selenium test automation scripts more effective. This helps to perform automated browser testing of websites that have multiple asynchronous tasks and might take some time to render on the browser windows.

Moreover, adding a timeout to our web page allows components on our web page to have enough time to load. This makes Protractor one of the best frameworks to test timeout for Selenium test automation. Also, since we know that protractor is based on selenium and used primarily for automated browser testing, it inherits many of its properties. Finally, there are many other functionalities of the framework available which I’ll discuss in the future Protractor tutorial.

I’d love to hear your opinion on this article in the comment section down below. Also, feel free to share this article with your friends on LinkedIn, Twitter, or any other social media platform. That’s all for now. Happy Testing!!!?