Selenium Webdriver wait for JavaScript JQuery and Angular


Hi all, during the last two weeks I was dealing with the best solution to wait for both JQuery, Angular and JavaScript (JS) in my Selenium (Java) test codes and finally, I found a significantly stable solution without silly sleep() statements to share with you. In this period, I searched maybe more than 20 articles and sites to find best and unique solutions and in this article I combined all solutions in only one method. This is “WaitJQueryAngular()“. When you need to wait for asynchronous wait, you can use below methods as your project type.

I know that you wonder to know what it does? First, it waits JQuery is Ready? and then waits Angular is Ready? and if JQuery or Angular is ready? Then it checks JS is ready? If all of them are ready then the code will continue to run next statements. Also, I added a control that checks JQuery and Angular are defined or not. It is important that if the any of them is not defined in the page, code skips asynchronous wait statements. If this control does not exist, we will get JS error.

You can just add below methods in your code and use “WaitJQueryAngular()” for an asynchronous wait in your test automation codes.

  • Add below JSWaiter utility class into your project.
  • Then, send WebDriver object to JSWaiter Class in a convenient place in your project by adding this line: “JSWaiter.setDriver(driver);”
  • Finally, you can use any of the methods below in you test code:
    • JSWaiter.waitJQueryAngular(); –> Both waits JQuery, Angular, JS
    • waitUntilAngularReady(); –> It only waits Angular and JS
    • waitUntilJQueryReady(); –> It only waits JQuery and JS

Note: I added waitUntilJSReady(); call both in waitUntilJQueryReady() and waitUntilAngularReady() methods. In this way, if your test site only comprises of Angular or JQuery, you can just use the relevant method to wait asynchronous operations.

Note: You should combine this asynchronous wait solution with the synchronous explicit wait statements to get highest stability in your tests. If you face with a problem, please let me know.

Github Link of a Sample Project: https://github.com/swtestacademy/JSWaiter

JQuery, Angular, and JavaScript Waiter

Thanks.

-Onur

javafx

Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 56 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! http://www.swtestacademy.com/getting-started-with-javafx/ At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...
extentreports

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe you how to write effective CSS locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order: First try to use...
extentreports

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 15 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...
javafx

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based...
extentreports

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 4 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...
extentreports

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across wide range of browsers and platforms. In this tutorial you will learn how to do web test automation with Selenium Webdriver and the related tools. Audience...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...
extentreports

How to Select a Date From DatePicker Using Selenium

By Onur Baskirt / Aug 13, 2016 / 6 Comments
When you need to automate a airway, hotel, or similar websites you need to deal with Datepickers and some times it is a little bit cumbersome to select a specific date on the Datepicker or calendar.  In this post, I...
extentreports

Selenium Webdriver Performance testing with Jmeter and Selenium Grid

By Ozgur Kaya / Aug 9, 2016 / 2 Comments
In this post, we will complete Selenium Webdriver Performance testing scenario using Jmeter and Selenium Grid. 1- Install Java 7 or later If necessary https://java.com/tr/download/ 2- Download latest Jmeter version 3.0 or higher. http://jmeter.apache.org/download_jmeter.cgi 3- Download Jmeter PluginsManager JAR file and...
By | 2017-01-21T23:09:17+00:00 January 15th, 2017|Selenium, Test Automation, Web Automation|16 Comments

About the Author:

Onur Baskirt
Onur Baskirt is a senior IT professional with 10+ years of experience. He worked at Bahçesehir University, ST Microelectronics, Huawei and Ericsson as research assistant, design verification engineer and software test leader. Also, he worked as software test leader and software operations manager at Turkey's biggest technology retailer, Teknosa. Now, he is working as Head of Software Testing and Manager of two Development Teams at Kariyer.net. His current research areas are technical software testing, programming, and computer science. Formerly, he has several research works and papers on digital chip design & verification. His hobbies are sport, dancing, traveling, and nutrition. You can find detailed information about him on his linked-in page.

16 Comments

  1. Rahul April 25, 2017 at 3:47 pm - Reply

    HI Onur Baskirt,

    this class works with Selenium v2.53.1 but its throwing an error with Selenium 3.4.0

    Can you please help as my framework depends heavily on this class to wait for angular api calls
    Thanks…

  2. Canh Nguyen Van May 31, 2017 at 2:03 pm - Reply

    Hi Onur Baskirt,
    how to run project?

  3. Ray July 11, 2017 at 6:33 pm - Reply

    Best solution ever. Many thanks.

    Also do you have a tutorial to setup an automation framework in real projects (with real world examples)
    preferably Page object Model ?

    Again Many Thanks.
    Ray

    • Onur Baskirt
      Onur Baskirt July 12, 2017 at 4:47 pm - Reply

      Hi Ray,

      You are welcome. 🙂 I am planning to write a comprehensive real life test automation framework book. If it is finished, I will let you know.

  4. Dmitriy July 26, 2017 at 10:02 am - Reply

    As far as I understand this example for AngularJS. What about Angular 2 ? Can you give example?

    • Onur Baskirt
      Onur Baskirt August 8, 2017 at 11:53 pm - Reply

      I did not have any experience on Angular 2 automation. But it is better to google it. There should be a solution on the web.

  5. Satyank July 27, 2017 at 7:56 am - Reply

    Will this work on Angular 1.5? Since I’m getting message in console “Angular injector is not defined on this site!”.

    Note: I’ve used method “waitJQueryAngular()”

  6. Rodrigo Magalhães October 4, 2017 at 11:50 pm - Reply

    Really great solution!!!

    It Works perfectly for me

    Thank you a lot!!!

  7. Mukesh October 12, 2017 at 9:52 pm - Reply

    this doesn’t support angular 2 and plus.

    • Onur Baskirt
      Onur Baskirt October 13, 2017 at 12:38 am - Reply

      Thank you for your feedback. If I have time, I will find a solution for Angular2 and above soon. By the way, did you ever try Procractor or nightwatch.js? They maybe better solutions for angular2 and above.

    • Onur Baskirt
      Onur Baskirt October 14, 2017 at 7:59 pm - Reply

      Hi Mukesh, I found a small library of WebDriver locators and more for AngularJS (v1.x) and Angular (v2.x +), for Java. They have taken JavaScript from Angular’s Protractor project. While ngWebDriver perfectly compliments the Java version of WebDriver, it has to pass JavaScript up to the browser to interoperate with Angular, and the Protractor project has done the hard work (including testing) to make that solid. You can use ngWebDriver today with the regular Java Selenium2/WebDriver libraries. Like Protractor, ngWebDriver works with Angular versions greater than 1.0.6/1.1.4, and is compatible with Angular 2 applications. Note that for Angular 2 apps, the binding and model locators are not supported. they recommend using by.css.

      new NgWebDriver(driver).waitForAngularRequestsToFinish();

      Do this if WebDriver can possibly run ahead of Angular’s ability finish it’s MVC stuff in your application.

      Library link: https://github.com/paul-hammant/ngWebDriver

Leave A Comment