Framework Structure

Namespaces & Directory Structure

1. Right-click on the CodedUI Test project in the Solution Explorer, select ‘Add’ –> ‘New Folder’ and add the following folders to the root of the test project…
   • Features
   • Steps
   • UI
2. Right-click the ‘UI’ folder, select ‘Add’ –> ‘New Folder’ and add the following subfolder to the ‘UI’ folder…
   • UIMapLoader

UI Maps

In this blog series, I will be using a Sample C# Calculator application as an example application, that can be automated with CodedUI. Please feel free to use your own Windows application instead if you have one and still try to follow along 🙂

The Sample C# Calculator application can be downloaded here

Once downloaded, unzip the contents into a suitable directory.

The reason I am not using the Calculator app that comes with Windows 10, is because that is a Windows Store App, so would require a slightly different project to be created in our Visual Studio solution, a Windows Store –> CodedUI Test Project instead.

UI Maps is an easy way to organise CodedUI tests across large applications.  It is generally good practice to have a UI Map for every different screen/page/section of your Windows application, along with a Base UI Map, for tests that are robust and might carry over across more than one screen/section (e.g. navigation in the application etc). For more information, please see https://msdn.microsoft.com/en-us/library/ff398056.aspx

Because the example Calculator application I am using seems to only really be a one-page application, I will only need to create one UI Map for it.

1. Right-click the ‘UI’ folder and select ‘Add’ –> ‘New Item’
2. Go to ‘Visual C# Items’ –> ‘Test’ tab and select ‘Coded UI Test Map’
3. Name the Coded UI Test Map something suitable like ‘BaseUIMap.uitest’ and click ‘Add’

Recording Dummy Steps

Once you have added the Coded UI Test Map, Visual Studio IDE will minimise and the test recorder will be displayed in the bottom right corner of your screen. With CodedUI, you can press the record button and Visual Studio will record your actions (e.g. mouse clicks, inputting text) and then use its magic to generate the test code for you.

If this is your first ever time using the CodedUI Test Recorder, you may be required to restart your computer before being able to use the ‘record’ feature.

1. Click the ‘Record’ button and then record yourself performing any action as a dummy test action (e.g. clicking the ‘Start’ button in Windows)
2. Click the ‘Record’ button again to stop recording
   • Click the stairs icon next to the record button to see the action/s that was recorded (optional)
3. Click the ‘Generate Code’ button on the right side of the test recorder box to generate the code for your test action/s
4. Name it whatever you want (e.g. ‘DummyTestMethod’) and click ‘Add and Generate’
5. Click the ‘X’ icon to close the test recorder and return to your project

You should notice that the Coded UI Test Map now has child C# files added to it (e.g. ‘BaseUIMap.cs’ and ‘BaseUIMap.Designer.cs’)

The ‘BaseUIMap.cs’ file is where we will store our Coded UI test methods for this Coded UI Test Map.

Next, we will add our Coded UI Test Map to our UI Map Loader.  This is useful when we have several UI Maps, as from our step definitions we can simply write one line of code to call the appropriate UI Map and the test method within.

The generated child C# files of the Coded UI Test Map are required in order to add it to our UI Map Loader (hence why we added a dummy step for now).

UI Map Loader

We will now create a class which will act as our UI Map Loader, and load the UI Maps that we will later specify in each of our step definitions

1. Right-click on the ‘UIMapLoader’ folder in the Solution Explorer and select ‘Add’ –> ‘Class’
2. Name the class ‘UiMapLoader.cs’ and click ‘Add’
3. Open up the ‘UiMapLoader.cs’ class file and replace its contents with the following code, which will create a static class for our application, and then create an object of our Coded UI Test Map which can be instantiated (e.g. from our step definitions)

   using ProductAutomation.UI.BaseUIMapClasses; //replace ProductAutomation with name of your CodedUI Test Project
   
   namespace ProductAutomation.UI.UIMapLoader //replace ProductAutomation with name of your CodedUI Test Project
   {
       public static class ApplicationName //replace with name you want to use for your application (e.g. CalculatorApp)
       {
           public static BaseUIMap Base
           {
               get { return _base ?? (_base = new BaseUIMap()); }
           }
   
           private static BaseUIMap _base;
       }
   }

Step Definitions

1. Right-click the ‘Steps’ folder and select ‘Add’ –> ‘New Item’
2. Select ‘SpecFlow Step Definition’ and name it something suitable like ‘CalculatorSteps.cs’
3. Remove all the placeholder ‘Given’, ‘When’ and ‘Then’ methods so the class file ends up looking like below…

   using TechTalk.SpecFlow;
   
   namespace ProductAutomation.Steps //replace ProductAutomation with name of your CodedUI Test Project
   {
       [Binding]
       public sealed class CalculatorSteps
       {
   
       }
   }

GitIgnore

We will now add a .gitignore file to ignore certain files and packages if/when we push to a remote repository.

Good practice is to have all of our NuGet packages listed in the ‘packages.config’ file and then git ignore the actual NuGet packages folders. When the project is cloned from the remote repository, NuGet Package Restore will be run when we build the solution and will restore all the packages that we need for us.

Additionally, we will git ignore the SpecFlow designer code.  All our SpecFlow Feature files auto-generate designer code, which we can also exclude from the remote repository. When the project is cloned from the remote repository, we can right-click on the project in the Solution Explorer (in Visual Studio) and select ‘Regenerate Feature Files’ 🙂

Finally, we will ignore Visual Studio specific folders that are not needed.

1. Open up a text/file editor program like Notepad++ or Sublime Text (google, download and install if need be)
2. Add the following into a blank file…

   # NuGet Packages
   *.nupkg
   # The packages folder can be ignored because of Package Restore
   **/packages/*
   # except build/, which is used as an MSBuild target.
   !**/packages/build/
   # Uncomment if necessary however generally it will be regenerated when needed
   #!**/packages/repositories.config
   
   # SpecFlow specific
   *.feature.cs
   *.feature.xlsx.*
   *.Specs_*.html
   
   # Visual Studio temp something
   .vs/

3. Save the file as ‘.gitignore’ in your project root (where the .sln file exists)

Copyright secured by Digiprove © 2018

Liked it? Take a second to support Thomas on Patreon!