How to wait for Element to be visible in angular.js application?

Question

I feel that it seems like the pretty old question. But not actually for me.

My application is based on Angular. While logging into application as soon as Loader appears, Selenium test fails and throws an error exception mentioned below.

 unknown error: Element <a id="user_dropdown" href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">...</a> is not clickable at point (1421, 33). Other element would receive the click: <md-backdrop ng-show="showMainSpinner" class="m-backdrop" aria-hidden="false">...</md-backdrop>
  (Session info: chrome=58.0.3029.110)
(Driver info: chromedriver=2.28.455520 
(cc17746adff54984afff480136733114c6b3704b),platform=Windows NT 10.0.14393 
x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 56 milliseconds
 Build info: version: '2.45.0', revision: 
 '5017cb8e7ca8e37638dc3091b2440b90a1d8686f', time: '2015-02-27 09:10:26'
[Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities \[{applicationCacheEnabled=false, rotatable=false, 
mobileEmulationEn][1]abled=false, networkConnectionEnabled=false, chrome=
 {chromedriverVersion=2.28.455520 
(cc17746adff54984afff480136733114c6b3704b), 
userDataDir=C:\Users\smistry\AppData\Local\Temp\scoped_dir56852_17781}, 
 takesHeapSnapshot=true, pageLoadStrategy=normal, databaseEnabled=false, 
handlesAlerts=true, hasTouchScreen=false, version=58.0.3029.110,         
platform=XP, browserConnectionEnabled=false, nativeEvents=true, 
 acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, 
browserName=chrome, takesScreenshot=true, javascriptEnabled=true, 
cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
Session ID: 41ebcec742d22c760f65efb4bb06b7db

Things I've done so far to achieve this:

1) Used implicit wait

2) Used Explicit wait (WaitForElementPresent/WaitForVisible/elementToBeClickable/ wait for invisibility of element etc.) (all possible tried)

3) Use of Java Script (window.angular.element('body').injector().get('$http').pendingRequests.length === 0)

typeof jQuery != 'undefined'

document.readystate

typeof angular != 'undefined')

4) Tried every possible way of catching the element(Loader) and wait for it to disappear. didn't worked at all.

5) Used Thread.sleep (but i don't want to use it)

Below is the code for the Spinner element of my website:

<md-progress-circular md-mode="indeterminate" md-diameter="70" class="m-spinner md-raised md-hue-2 md-mode-indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="width: 70px; height: 70px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" style="width: 70px; height: 70px; transform-origin: 35px 35px 35px;"><path fill="none" style="stroke-width: 7px;" d="M21.583326164121,6.500125207614687A31.5,31.5 0 0,1 49.405589517818534,63.01301466540359"></path></svg></md-progress-circular>

I am using Selenium webdriver, chrome 58, eclipse neon.2, windows 10.

Really trying hard since last so many days to get solution for it. I hope you got my question. If anything is missing, i can provide detail. Help will be highly appreciated.

Have you had a look at [How to use Selenium (or Seleno) to detect if a DOM element is displayed by Angular](https://stackoverflow.com/q/25141387/3429133)? — beatngu13, May 24 '17 at 21:26
@beatngu13 thanks for suggestion of page. I took a look at that page, nothing helped me out from it. — Sunil, May 24 '17 at 21:44
@Debanjan Thanks Debanjan...I've got my answer. I've shared it too. — Sunil, May 26 '17 at 14:15

score 2 · Answer 1 · answered May 26 '17 at 13:46

Finally after efforts of couple of weeks , I've figured out the solution for my problem.

Thanks everyone for your support and help, I am posting the answer below which worked for me.

Before so many times, I've tried them separately. But this time I've tried them together and worked like charm.

I've used explicit wait and waiting for Loading Element to be invisible from the Page and Visibility of the Home page Icon.

Thanks.

    WebDriverWait wait = new WebDriverWait(webDriver, 10);
    wait.until(ExpectedConditions.presenceOfElementLocated(By.id("elementOfHomePage")));
    wait.until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("loaderElement")));

score 1 · Answer 2 · answered May 25 '17 at 13:40

I use below mentioned code to handle AngularJS related loading issues. Instead of getting pending requests length, it notifies after there are no outstanding requests left.

public void waitForAngularRequestsToFinish() {
    if ((boolean) getJavascriptExecutorFacade().executeScript(
            "return (typeof angular !== 'undefined')? true : false;")) {
        getJavascriptExecutorFacade()
                .executeAsyncScript(
                        "var callback = arguments[arguments.length - 1];"
                                + "angular.element(document.body).injector().get('$browser').notifyWhenNoOutstandingRequests(callback);");
    }
}

It is an excerpt from PageObject class of SerenityBDD.

`public static void waitForAngularRequestsToFinish() { webDriver.manage().timeouts().pageLoadTimeout(5000, TimeUnit.MILLISECONDS); ((JavascriptExecutor) webDriver).executeAsyncScript("var callback = arguments[arguments.length - 1];" + "angular.element(document.body).injector().get('$browser').notifyWhenNoOutstandingRequests(callback);"); }` I've tried using this code, is there any syntex wrong in this code? It doesn't work as well. and `typeof angular !== 'undefined'` always return true for me, so I can't use it. — Sunil, May 25 '17 at 14:40

score 0 · Answer 3 · answered May 24 '17 at 21:29

0

3) Use of Java Script (window.angular.element('body').injector().get('$http').pendingRequests.length === 0)

typeof jQuery != 'undefined'

document.readystate

typeof angular != 'undefined')

by above error, I can say that angular js library is not loaded in your application

answered May 24 '17 at 21:29

B.V.S Bharat Kumar

202
1
5
14

Thanks for replying Bharat Kumar. angular js library is for sure loaded in my application. But what happens is , window.angular.element('body').injector().get('$http').pendingRequests.length === 0 when I try this command in console of chrome developer tools, it returns **false** while website is loading and return **true** while website is ready. But, unfortunately it doesn't work while I use it using selenium....Selenium script doesn't wait for page to load. – Sunil May 24 '17 at 21:32
And one more thing I want to add is **typeof jQuery != 'undefined'** & **typeof angular != 'undefined'** always returns true so that I can't use it. – Sunil May 24 '17 at 21:40

How to wait for Element to be visible in angular.js application?

3 Answers3