I am automating one angular based application with Selenium WebDriver(Java).
In my AUT(Application Under Test) after selecting any option from dropdown it loads the data into the page. Now this loading is ajax based, basically it calls a webservice and return the data but in page loading spinner or message is not showing in this interval. Previously I use this following javascript within explicit wait.
notDisplay = Boolean.valueOf(((JavascriptExecutor) input)
.executeScript("return angular.element(document).injector()
.get('$http').pendingRequests.length === 0")
.toString());
But now it is not working. Not working means it always return true so it is not waiting to wait for loading.
This application is using angular so I try to implement angular based wait strategy, but I previously also try with the jQuery or JS wait strategy but it is also not working. For jQuery I use the following JavaScriptExecutor
boolean jqueryReady = (Boolean) ((JavascriptExecutor)driver)
.executeScript("return jQuery.active==0")
Can anyone please help me on this. I also attach the DOM structure for better understanding of the application
<head>
<meta charset="utf-8">
<title>XISOT | Energy Software</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="assets/css/font-include.css" rel="stylesheet">
<link href="assets/css/datepicker-theme.css" rel="stylesheet">
<link href="assets/css/component.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<script async="" src="https://www.google-analytics.com/analytics.js">
<script async="" src="https://www.google-analytics.com/analytics.js">
<script async="" src="https://www.google-analytics.com/analytics.js">
<script async="" src="https://www.google-analytics.com/analytics.js">
<script async="" src="https://www.google-analytics.com/analytics.js">
<script async="" src="https://www.google-analytics.com/analytics.js">
<script src="https://use.fontawesome.com/webfontloader/1.6.24/webfontloader.js">
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-MH7JJN7">
<script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js">
<script src="https://use.fontawesome.com/7fbaaf4e79.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js">
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.30.0/handsontable.full.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.30.0/handsontable.full.js">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js">
<script src="https://www.google.com/jsapi">
<script>
<link rel="stylesheet" href="https://use.fontawesome.com/7fbaaf4e79.css" media="all">
<script src="https://www.google.com/uds/?file=visualization&v=1.0&packages=corechart" type="text/javascript">
<link href="https://www.google.com/uds/api/visualization/1.0/40ff64b1d9d6b3213524485974f36cc0/ui+en.css" type="text/css" rel="stylesheet">
<script src="https://www.google.com/uds/api/visualization/1.0/40ff64b1d9d6b3213524485974f36cc0/format+en,default+en,ui+en,corechart+en.I.js" type="text/javascript">
<script src="https://www.gstatic.com/charts/loader.js">
<link href="styles.77279c25a29673778a1c.bundle.css" rel="stylesheet">
<style>
<script type="text/javascript" charset="utf-8" async="" src="0.9bd994105eb2d54dba78.chunk.js">
<script type="text/javascript" charset="utf-8" async="" src="10.328d3d60aa813c93c06a.chunk.js">
<script type="text/javascript" charset="utf-8" async="" src="1.af512bfedea06d5a0cbc.chunk.js">
<style>
<style>
<style>
<style>
</head>
<body class="" style="padding-right: 0px;">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MH7JJN7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<******-cli-app ng-version="4.0.1">
<script type="text/javascript" src="inline.a72ddd58b7d594fb4f3e.bundle.js">
<script type="text/javascript" src="polyfills.c88a23e25eb2f45b7bb7.bundle.js">
<script type="text/javascript" src="scripts.fd3b917905e45b8ba8f8.bundle.js">
<script type="text/javascript" src="vendor.ebddd23038be460d8b8d.bundle.js">
<script type="text/javascript" src="main.f9ced3beb42f51486f9b.bundle.js">
<script id="" type="text/javascript">
<script id="" type="text/javascript">
<script id="" type="text/javascript">
<script id="" type="text/javascript">
<script id="" type="text/javascript">
<script id="" type="text/javascript">
</body>
2
Answers
If your application is using angular 5 or above, use below java script.
Angular does a lot in the background apart from your check. You can have the below code snippet in a separate class and call the method (waitUntilAngularReady) in your desired class. Also, you must send a WebDriver object to this Class (setDriver method) in a comfortable place in your project. This is working fine for me for Angular version 7.2.0.