CODEWITHSUNDEEP
javaangularjsselenium-webdriverwaitpage-load-time
Sunil
Sunil

Reputation: 41

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

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.

Upvotes: 2

Views: 4152

Answers (3)

Sunil
Sunil

Reputation: 41

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

Upvotes: 2

Zeeshan S.
Zeeshan S.

Reputation: 2091

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.

Upvotes: 1

B.V.S Bharat Kumar
B.V.S Bharat Kumar

Reputation: 222

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

Upvotes: 0

Related Questions