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.
After clicking the button you will see
The code looks like this:
Now the CodedUI test we ran looks like follows:
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:
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.
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:
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,