Fluent Bytes

"The only source of knowledge is experience" - Albert Einstein-

How to prevent CodedUI tests from breaking Angular Ajax calls

During one of the Pluralsight study group nights, we came across a problem when we test angular websites that make Ajax calls to switch templates in a Single page application. To repro the scenario we created a simple website that did nothing more then showing on the main page an button and hocking up that button with an event to switch the page with an second page, using an Ajax call.

The pages look like follows:
image

After clicking the button you will see

image

The code looks like this:

Index.html:

image

and Edit.html

image

and index.js:

image

Now the CodedUI test we ran looks like follows:

image

We launch the browser, Search for the button, then click the button. On the new page we search for the HtmlEdit box and read out it’s value.

Now this test works great as long as the Index.js file contains the following line to switch the page:

image

If we use an Ajax call by using the following code then the second page will not be shown in the browser. So it looks like the click is not executed.

image

What happens is that codedUI injects java scrip the moment it starts a browser test. This script is used to enable codedUI to wait for Ajax calls to complete and coordinate other timing related things.

Unfortunately this script seems to interfere with the standard way Angular is handling Ajax calls and therefore breaks your site.

Now the big question is how can we solve this?

Fortunately there is a simple solution. You can add an App.config file to your codedUI test project inside this config file you specify a configuration key called WebWaitForReadyLevel and set its value to 3. So your config file must contain the following xml:

image

Now when you run CodedUI will not inject the JavaScript in your page and this will then fix the problem of Ajax calls not working in your site.

Of course this has as side effect that CodedUI will not test the ready level of controls, so in order to ensure you can interact with controls you might need to add some control flow logic to the code to wait for controls to appear like e.g. the WaitforControlEnabled or WaitForControlExists that are available on all the test controls you use.

Hope this helps,

Cheers,

Marcel

CTO at Xpirit, Microsoft Regional Director, Visual studio ALM MVP, Speaker, Pluralsight Author and IT Architect Consultant

6 Comments

  1. Frank Sullivan

    May 21, 2015 at 12:51 pm

    Hi Marcel,

    That worked really nicely, thank you. We had a problem where the code that ran properly in IE8 was failing in IE11, and we couldn’t find a solution, until we tried yours!

  2. Hi Marcel:

    We are currently having the same problem above, and implemented the configuration above. Unfortunately, it did not work for us. Any other suggestions?

    • The only way for me to find the problem is look together what is going on. You can mail or tweet me and I can have a look.

  3. Hi Marcel,

    We are running into an issue where everything is working in the coded UI tests, however when the tests attempts an angular click event, it fails.
    There are no error per se, there simply is no result.
    Our click event should be opening an angular modal with data fetched from our controller. In real life production it works perfectly, in the coded UI if we replace the ng-click with a simple javascript call, it works no problem. We can even see the network result with the html from the call… but the modal never opens and we simply cannot solve it.
    Any ideas?

    • I am sorry but the only way for me to find a solution is to really experiment with the page and the test, to see what is going on. if you still have this issue I am more then willing to help troubleshoot the issue. mail me or tweet me and I will have a look

  4. Thank you so much!
    Have been encountering this issue and took a lot of my time finding out a solution.

Leave a Reply

Your email address will not be published.

*

© 2017 Fluent Bytes

Theme by Anders NorenUp ↑