Fluent Bytes

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

Testing Angular sites with CodedUI

Last week we hosted the first of a series of Pluralsight Study group meetings at our company Xpirit together with the DotNed user group. The study group focuses on the new training I just got published on pluralsight called “Testing Web Applications with CodedUI”.

In the first few chapters we covered last week we looked at how the CodedUI object model works and as one of the hands on assignments we thought it would be fun to test an Angular sample website created by my fellow MVP Maurice de Beijer that he uses in his training on Angular. (http://rawstack.azurewebsites.net/)

The site we wanted to test with CodedUI is located here and shows a list of movies as an infinite scroll list and it has admin pages where you can filter the list of movies and then click one of the rows to edit the movie details.

The scenario we wanted to test was as follows:

Goto the site, Click on the Admin link, enter a movie in the filter box, Click on one row and then alter the rating.

In my course I always urge people to find unique identifiers to find the controls you want to interact with, but as Maurice showed me with his Angular website, there is no use of the id attribute in any of the pages. This seems to be a common practice and therefore we need to find some other ways to uniquely identify the controls we want to interact with so we can find them on the screen.

With Angular it is very common you use attributes like: ng-model, ng-controller, ng-repeat, ng-submit, etc. So there is a way to uniquely identify these controls we just need another way to find them then using an id attribute.

Basically there are two options you have to achieve to find the controls with CodedUI. the first one is the one that most closely matches the CodedUI object model and the way CodedUI finds controls. We need to specify search properties and additional filter properties to find the control. The problem with this approach is that it is not working when you are using the cross browser plug-in and want to playback on chrome or Firefox. (what happens is that all filterProperties are ignored except taginstance, meaning you will most likely have a match that can contain multiple objects in stead of just one.

Since it is a common requirement to test cross multiple browsers this options is only useful for those who only test on the IE browser. Here is a code sample on finding the Filter control on the Admin page (http://rawstack.azurewebsites.net/MoviesAdmin#/moviesAdminList)

 

The second way of implementing this search, is by utilizing the ExecuteScript method on the BrowserWindow class. We construct a simple piece of JavaScript that runs in all browsers where we use CssSelectors to find the unique match on the ng-* attributes and then return the right type of Html control. You can see the code here below:

 

Great thing about the ExecuteScript method is that it returns a correctly typed object so you can interact with the control with it’s provided convenience properties that make interaction with the controls more easy.

With this way of finding the control, we also ensure it works cross browser, since  the ExecuteScript method is implemented for all supported browsers in CodedUI. You can apply any Css selector that is supported by the document.querySelector method. see here for more info on selectors: http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

In my next post I will show you the full steps on testing the full scenario.

Hope this helps,

Marcel

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

4 Comments

  1. Test method CodedUITestMethod1 threw exception:
    invalid element state: Failed to execute ‘querySelector’ on ‘Document’: ‘[0]’ is not a valid selector. (Session info: chrome=44.0.2403.157) (Driver info: chromedriver=2.8.241075,platform=Windows NT 6.3 x86_64)

    Microsoft.VisualStudio.TestTools.UITest.Extension.UITestJScriptExecutionException

    at Microsoft.VisualStudio.TestTools.UITest.Extension.CrossBrowser.CrossBrowserService.ExecuteScript(String script, Object[] args)

    at Microsoft.VisualStudio.TestTools.UITesting.BrowserWindow+c__DisplayClass34.b__33()

    at Microsoft.VisualStudio.TestTools.UITesting.CodedUITestMethodInvoker.InvokeMethod(Func`1 function, UITestControl control, Boolean firePlaybackErrorEvent, Boolean logAsAction)

    at Microsoft.VisualStudio.TestTools.UITesting.BrowserWindow.ExecuteScript(String script, Object[] args)

    at CodedUITestProject1.CodedUITest1.CodedUITestMethod1()
    in c:\Try\CodedUITestProject1\CodedUITestProject1\CodedUITest1.cs:line 77

    Script to Execute : ”document.querySelector(‘[0]’);”

    • I don’t know what you are trying to select, but the resulting selector [0] does not seem to be right. You might want to take a look here on how query selectors work: http://www.w3schools.com/css/css_selectors.asp so you create the right string to search for. Hope that helps.

      • Hi Marcel,

        It looks nice. But I have tried this code in both IE and Chrome, I got the same exception(which mentioned above by : ) while running in chrome and got script execution failed with IE.

        I hope, the document.querySelector is not supported to CodedUI ExecuteScript method.

        Please do the needful.

  2. Very interesting this means that Xpath and basic DOM navigation that have been available in Selenium for years can now be done in Coded UI.

Leave a Reply

Your email address will not be published.

*

© 2017 Fluent Bytes

Theme by Anders NorenUp ↑