{"id":6801,"date":"2015-05-16T23:32:59","date_gmt":"2015-05-16T23:32:59","guid":{"rendered":"http:\/\/fluentbytes.com\/?p=6801"},"modified":"2015-05-16T23:32:59","modified_gmt":"2015-05-16T23:32:59","slug":"how-to-prevent-codedui-tests-from-breaking-angular-ajax-calls","status":"publish","type":"post","link":"https:\/\/fluentbytes.com\/?p=6801","title":{"rendered":"How to prevent CodedUI tests from breaking Angular Ajax calls"},"content":{"rendered":"<p>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.<\/p>\n<p>The pages look like follows:<br \/>\n<a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border-width: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb.png\" alt=\"image\" width=\"244\" height=\"236\" border=\"0\" \/><\/a><\/p>\n<p>After clicking the button you will see<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image1.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border-width: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb1.png\" alt=\"image\" width=\"244\" height=\"238\" border=\"0\" \/><\/a><\/p>\n<p>The code looks like this:<\/p>\n<p>Index.html:<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image2.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb2.png\" alt=\"image\" width=\"599\" height=\"451\" border=\"0\" \/><\/a><\/p>\n<p>and Edit.html<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image3.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb3.png\" alt=\"image\" width=\"549\" height=\"107\" border=\"0\" \/><\/a><\/p>\n<p>and index.js:<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image4.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb4.png\" alt=\"image\" width=\"672\" height=\"499\" border=\"0\" \/><\/a><\/p>\n<p>Now the CodedUI test we ran looks like follows:<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image5.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb5.png\" alt=\"image\" width=\"592\" height=\"175\" border=\"0\" \/><\/a><\/p>\n<p>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\u2019s value.<\/p>\n<p>Now this test works great as long as the Index.js file contains the following line to switch the page:<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image6.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb6.png\" alt=\"image\" width=\"613\" height=\"29\" border=\"0\" \/><\/a><\/p>\n<p>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.<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image7.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb7.png\" alt=\"image\" width=\"242\" height=\"27\" border=\"0\" \/><\/a><\/p>\n<p>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.<\/p>\n<p>Unfortunately this script seems to interfere with the standard way Angular is handling Ajax calls and therefore breaks your site.<\/p>\n<p>Now the big question is how can we solve this?<\/p>\n<p>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 <strong>WebWaitForReadyLevel<\/strong> and set its value to 3. So your config file must contain the following xml:<\/p>\n<p><a href=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image8.png\"><img decoding=\"async\" loading=\"lazy\" style=\"display: inline; border: 0px;\" title=\"image\" src=\"https:\/\/www.fluentbytes.com\/wp-content\/uploads\/2015\/05\/image_thumb8.png\" alt=\"image\" width=\"676\" height=\"178\" border=\"0\" \/><\/a><\/p>\n<p>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.<\/p>\n<p>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 <strong>WaitforControlEnabled<\/strong> or <strong>WaitForControlExists<\/strong> that are available on all the test controls you use.<\/p>\n<p>Hope this helps,<\/p>\n<p>Cheers,<\/p>\n<p>Marcel<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[8],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fluentbytes.com\/index.php?rest_route=\/wp\/v2\/posts\/6801"}],"collection":[{"href":"https:\/\/fluentbytes.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentbytes.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentbytes.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentbytes.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6801"}],"version-history":[{"count":0,"href":"https:\/\/fluentbytes.com\/index.php?rest_route=\/wp\/v2\/posts\/6801\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentbytes.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentbytes.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentbytes.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}