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? — beatngu13
– beatngu13, Commented May 24, 2017 at 21:26
@beatngu13 thanks for suggestion of page. I took a look at that page, nothing helped me out from it. — Sunil
– Sunil, Commented May 24, 2017 at 21:44
@Debanjan Thanks Debanjan...I've got my answer. I've shared it too. — Sunil
– Sunil, Commented May 26, 2017 at 14:15

Sunil · Accepted Answer · 2017-05-26 13:46:41Z

2

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

answered May 26, 2017 at 13:46

Sunil

411 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zeeshan S. · Accepted Answer · 2017-05-25 13:40:35Z

1

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.

answered May 25, 2017 at 13:40

Zeeshan S.

2,0912 gold badges21 silver badges42 bronze badges

1 Comment

Sunil Over a year ago

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.

B.V.S Bharat Kumar · Accepted Answer · 2017-05-24 21:29:37Z

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, 2017 at 21:29

B.V.S Bharat Kumar

2222 gold badges5 silver badges15 bronze badges

2 Comments

Sunil Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related