As we all know, testing is one of the hardest parts of delivering quality testing. What I really mean by testing is Automated Testing. Sure, we all test our code as we develop, but having a comprehensive suite of tests to run as part of a CI Build or Deployment is key in delivering quality software efficiently.

As part of Visual Studio 2010, Microsoft released a Coded UI Testing Framework that had lots of promise. There have been some updates since then, but IMHO I don’t think that developers and automated test engineers have given it a fair shake. In this post, I am hopefully going to help you discover why the framework is brilliant and can solve many of the problems associated with UI Testing Frameworks.

The biggest problem I have seen in the past with UI Frameworks is brittleness when responding to UI changes. These are really prevalent in Web Applications.  Let’s see how to solve this with Visual Studio Coded UI. The Coded UI Framework is built using C#, so this is really going to be easy for us to extend the framework as you will see in the examples. So the first thing we need to do is get rid of the UIMap part of the Coded UI. If you are not familiar with the UIMap functionality you can read more about it here – https://msdn.microsoft.com/en-us/library/ff398062.aspx. The UIMap is where Visual Studio puts the code it creates as part of using the “Coded UI Test Builder” tool. Unfortunately, it generates a lot of code and uses the tree hierarchies for your application to find things. This is not a bad thing, it just makes our testing pretty brittle. One good thing about searching with in particular containers is that your ability to find a control will be faster. I will show you how to do both when we build the replacement for the UIMap next.

To replace the UIMap, we are going to use the power of Generics in the .Net Framework. For ease of use in our testing, I built a static extension so that I could attach it to any UITestControl and use a SearchFor method to find things. As you can see in my code below, it is pretty straight forward. I use dynamics to pass in variables that I can use for both the SearchProperties and FilterProperties to go find items in the application. If you need to find more information on the controls you can use the “Coded UI Test Builder” to get more detailed information.

Next, let’s see how to use this in a test. You can just start out with a basic class template using the File –> New in Visual Studio. You will see in my example below that I have added some “using” statements to bring in the testing framework while also adding some attributes for CodedUITest and TestMethod. Once you have these in place you can get started writing your test. Since we are not using the Coded UI Test Generator here, we will go ahead and add the items we need on our own. Not only are we going to remove the brittleness here but we are also going to be efficient.

The first thing I do in my test is to open a Browser and go to a url. In my case I am going to our blog. This will open up the browser and navigate all in one line (nifty). Next we are going to start to find the items we need to interact with on the screen. As you can see the first item I am going to go get n my test is the header section. This is a custom html control with the tagname “HEADER.” Once I find this control, I am going to use it in the next section so that I have a container to search within. To be honest, I really don’t have to do this, but I did want to show you that you can search for items using a container instead of having to search the entire DOM every time. Next I will get the search button control and use the “Mouse.Click” operation to click and open the search text box. Once the Coded UI Test finds the search box, it automates the text I want and use and then uses keyboard controls to send the ENTER key for the search.

The next thing I do on the search result screen is find the item that I am interested in evaluating. I made that sound really easy, but having dynamic controls show up and find them is one of the hardest things to do in any Testing Framework. With the power of C# and the flexibility of the Coded UI Framework, I am able to dynamically find my items using search and filter properties so that I can evaluate them. The rest of the test, including the assertion, are basic unit testing techniques.

Hope you found this post interesting. Happy testing!

The following two tabs change content below.
  • Pingback: Dew Drop – October 27, 2015 (#2120) | Morning Dew()

  • Pingback: Generic UI Testing with Coded UI – Day 27 – Visual Studio 2015 | Dinesh Ram Kali.()

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1956()

  • Pingback: 31 Days of Visual Studio 2015 Tricks and Treats - Falafel Software Blog()

  • Pingback: Automate the Planet()

  • Noel Rice

    Thanks for the generic SearchFor() Kris, sweet!

    BTW, generic searching in code and using the Coded UI object repository can be used in tandem. Here’s an example using the generic SearchFor() approach first, then using the UIMap object second as starting points for more searches.

    // var wrapper = browser.SearchFor(new { id = “wrapper” });
    var wrapper = UIMap.UIEventboardAdminPortaWindow.UIEventboardAdminPortaDocument.UIWrapperPane;

    Both versions of “wrapper” resolve to a type Microsoft.VisualStudio.TestTools.UITesting.HtmlControls.HtmlDiv.

    Here’s the a TestMethod against the Falafel EventBoard application:

    [TestMethod]
    public void FilterTiles()
    {
    BrowserWindow browser = BrowserWindow.Launch(new Uri(Properties.Settings.Default.EventBoardHome));
    //var wrapper = browser.SearchFor(new { id = “wrapper” });
    var wrapper = UIMap.UIEventboardAdminPortaWindow.UIEventboardAdminPortaDocument.UIWrapperPane;

    // pass “wrapper” as parent to get all the divs with class “tile”
    HtmlDiv divs = new HtmlDiv(wrapper);
    divs.SearchProperties.Add(HtmlDiv.PropertyNames.Class, “tile”);
    UITestControlCollection tiles = divs.FindMatchingControls();

    // verify at least one tile exists
    Assert.IsTrue(tiles.Count > 0);

    // get the first tile, then get the only HyperLink and click it
    var link = tiles.First().SearchFor(new { ControlType = “Hyperlink” });
    Mouse.Click(link);

    // take a screenshot and save to disk
    var image = browser.CaptureImage();
    image.Save(@”C:\data\screenshot.bmp”);
    }