When using UI automation technologies, changes to the UI can break our tests. For example, if a textbox is being located by its ID in numerous tests, if this ID changes then all these tests will break. They won’t be able to find the ID.

Another problem that can arise with automated UI testing is code duplication. Imagine a system that had an color drop down list and an apply button in multiple places in the application. Each UI test that exercises these color choices must first locate the color choice box, select a color, locate the apply button, and then click it.

The 3 Levels Of User Interface Testing

One way to think of the “evolution” of UI testing is that of: test script, page object model (POM), and logical functional model (LFM).

Test Script

Test scripts are self contained tests. They contain the whole test from starting the application through to the asserts at the end.

Test scripts can be lengthy as they have to include all the UI control finding and interaction code for every single step of the particular test. This can make them hard to read and understand exactly what behaviour is being tested.

Test scripts also don’t share any code with other tests, so code duplication can create additional maintenance effort over time.

Test scripts are an easy way to get started with automated UI testing, especially if you are learning the UI automation framework at the same time.

Pretty quickly, test scripts become unwieldy and so page object models can be introduced.

Page Object Models

Page object models (POM) represent a screen or page or group of controls in the UI that’s being tested.

For example, a screen with a color chooser could be represented by a POM class that exposes the drop down control and buttons as properties.

These properties encapsulate the locating of the UI dropdown and button (perhaps by ID). The test code itself then uses an instance of the POM to interact with the dropdown and button – it doesn’t have to worry about the UI IDs in the test itself.

There’s a couple of levels of abstraction within POMs. The property that represents a UI control can either expose the underlying automation framework object that represents the control, or a simple type such as string or int.

When first getting started with POMs you might want to go with the former approach until you get the idea of using POMs, though there’s not much additional work to implement the latter option.

By returning simple types rather than automation framework types, the actual test code can become more readable; they also help to abstract away the chosen automation framework.

Logical Functional Models

Logical function models (LFM) are an extension to POMs and may not deserve their own distinction in practice, however the distinction helps us to think how we can further enhance the readability of test code and reduce code duplication.

LFMs add methods to POMs. These methods represent logical actions that the end-user can perform on a given page.

The LFM methods can use the properties already defined on the POM.

For example, the logical user function of “I want to choose a color” can be represented as a single method in the POM, for example: ChooseColor(string color);

Within this single method, the existing POM properties representing the dropdown list of colors and button can be used.

Now, test code can simply write: myScreen.ChooseColor(“red”);

The LFM “style” further increases the ability to discern exactly what behaviour a given test is testing.

Building Page Object Models

When building a POM it’s a good idea to evolve it over time, adding properties and logical functional methods as needed by the tests.

The alternative is to model every control and user interaction on the page before starting writing test that use that POM. This increases the up-front cost of writing automated UI tests, you may not end up interacting with every UI control in your tests so it makes sense to evolve POMs in an iterative fashion.

When choosing a UI automation framework, investigate what built-in support it has for POMs/LFMs. It’s possible to hand-code them from scratch, but a little extra help from our chosen framework helps to reduce the cost of building UI automation tests.

To see POMs/LFMs in action in both WPF and Web UI automation, check out my Building the Right Thing in .NET with TestStack Pluralsight course.

SHARE:

How often do you actually use CapsLock – deliberately that is?

Most of the time I hit it accidentally then END UP SHOUTING in emails or Tweets. It’s especially a pain sometimes while coding…

We can stop CapsLock from doing it’s capsy thing using AutoHotkey.

The following remaps the CapsLock key to nothing:

Capslock::

Now the CapsLock key doesn’t do anything, the caps LED on the keyboard doesn’t even light up.

We could also remap CapsLock to F6, so we can hit CapsLock in Visual Studio to do a build:

Capslock::F6

This will trigger F6 in all applications, not just in Visual Studio.

To limit the remapping to only when we are in Visual Studio:

SetTitleMatchMode, 2
#IfWinActive Microsoft Visual Studio
Capslock::F6
#IfWinActive

Here the remapping only occurs if the window title contains “Microsoft Visual Studio”. (The SetTitleMatchMode command tells AutoHotKey to look in any part of the title for the match.

Now, outside of Visual Studio, CapsLock behaves normally, but inside VS it will perform a build.

To learn more about AutoHotkey, check out my Pluralsight course: Personal Productivity & Performance Tools for Windows Developers.

SHARE:

Are you running an open source project? Need some help with your project CSS, perhaps a NuGet logo, or help with your GUI?

It’s hard to find designers, so I made OS Designer Finder.

If your open source project needs some design help, simply create a GitHub issue (CodePlex support coming soon).

You just need to entitle your issue “designer wanted” followed by the type of work, so for a logo you’d use a title of “designer wanted logo”. For CSS help: “designer wanted css”.

To see how to structure an issue, see this example issue.

It’s currently in a working beta. Please help spread the word to both open source developers and also any designers you know.

SHARE:

In honour of the announcement of universal Windows apps, I though I’d create a simple one page paper prototyping template to visualise what an app would look like on both a PC/tablet and a Windows Phone. This template compliments my previous Windows 8 paper prototypes.

SHARE:

Open source is cool. Most of us use at least one open source project in our daily work. Even if we don’t, the websites we visit probably do.

It’s easy to contribute to an open source project, even if you don’t write code.

This diagram shows some of the different ways to contribute.

Tweet About the Project

The easiest way to contribute to a project is to either Tweet about it to tell people that it exists, or send a Tweet to the contributors / creators. Most open source authors don’t get paid, saying thankyou is not only nice but is good encouragement for the authors to keep the project going.

Submit a Bug or Idea

Don’t like something about the way a product works? Wish it had a killer new feature? Don’t remain silent, instead head over to GitHub or CodePlex or wherever the project is hosted and create a new Issue or Bug “ticket” to tell the authors about it. Even if you think your idea may not be useful to other users, submit it anyway and let the project team decide.

Contribute Documentation or Design

Even if you’re not a programmer or you don’t have time to submit code to the project you can still help. There are some great open source projects out there, unfortunately sometimes the documentation for these projects is either non-existent, out of date, or lacking. Helping to make better documentation is a quick win for everyone.

Another contribution you can make is to the project design. Maybe you’re a graphic designer or know someone who’s an artist. Help the project team out by designing the project website CSS or by contributing a logo design. A lot of projects have limited time and so focus on the code, they don’t have time for design and logo-making. This is a great non-coding contribution to make.

Contribute Code

Contributing code to open source projects is a great gift of our valuable time and keystrokes. We can make the products better for ourselves and others. It’s also a great opportunity to learn.

If you’re running an open source project consider creating a label for easy issues/bugs/work items that a newcomer can tackle.

Create a Project

This is a biggie. If you’ve got an idea for a project, go for it! It’s super easy to get started on GitHub or CodePlex.

SHARE:

Although code snippets can make creating our initial viewmodels easier (properties, commands,etc.) it’s still tantamount to boilerplate code. Obviously the actions that happen when a command is executed is not boilerplate, but the actual definition is.

T4 templates are built into Visual Studio and allow us to define templates that are a mix of literal output (such as HTML tags) and C# code.

We can for example create a C# for loop around some literal output, e.g. “Hello World” to output it 10 times. For more info on T4, check out MSDN.

T4 for View Model Code Generation

Rather than hand-coding viewmodels, we can define a T4 template. In this template we are able to define the view models we want generating – included both commands and properties that we want to have on those view models.

The implementation in this article creates a new abstract base class for each view model that contains our commands and properties, in addition to a command init method to create and wire-up new MVVM Light RelayCommands along with can execute hooks.

Once T4 has generated these base class view models, we inherit from them and a constructor that calls the base class’s InitCommands method.

The sample application bind some text and a button:

When you click the button the bound Person in the viewmodel is updated and the command is disabled:

The actual viewmodel code looks like this:

using SampleWpfApplication.Model;

namespace SampleWpfApplication.ViewModel
{
    class MainViewModel : MainViewModelBase
    {
        public MainViewModel()
        {
            InitCommands();
        }

        protected override void ExecuteLoad()
        {
            Who = new Person {Name="Jason"};
            LoadCommand.RaiseCanExecuteChanged();
        }

        protected override bool CanExecuteLoad()
        {
            return Who == null;
        }
    }
}

Note it derives from MainViewModelBase which is the generated code.

Also note there’s no Person property (called “Who”) and no RelayCommand defined.

We’ve overridden a couple of methods from the base class to get the behaviour we want and also called InitCommands in the constructor.

The fragment of the T4 template that defines the viewmodels looks like this:

/// <summary>
/// Make changes to this class to define what view models you want generating
/// </summary>
public  static class ViewModelGeneratorSettings
{   
    // ********** Which name space the view model classes will live in
    public const string OutputNameSpace = "SampleWpfApplication.ViewModel";


    public static List<ViewModelDefinition> ViewModelDefinitions
    {
        get
        {
            return new List<ViewModelDefinition>()
                   {
                       // Define your view models here
                       new ViewModelDefinition
                       {
                           Name = "MainViewModel",
                           Properties =
                           {
                               Tuple.Create("Who", "Person"), // here Who is the name of the command prop, Person is the type
                               //Tuple.Create("NextTopic", "Topic"),
                               //Tuple.Create("CurrentTopicTimeRemaining", "TimeSpan"),
                               //Tuple.Create("TotalTimeRemaining", "TimeSpan"),
                               //Tuple.Create("IsPlaying", "bool") // here IsPlaying is the name of the command prop, bool is the type
                           },
                           Commands =
                           {
                               "Load", // Name of the commands
                               //"Pause"
                           }
                       },
                       new ViewModelDefinition
                       {
                           Name = "AnotherViewModel",
                           Properties =
                           {
                               Tuple.Create("SomeProperty", "int"),
                           },
                           Commands =
                           {
                               "A",
                               "B"
                           }
                       }, // etc.
                   };
        }
    }
}

To create new viewmodels we just add new ViewModelDefinitions and specify what properties and commands we want – currently property types are specified as strings rather than actual types.

To get started and see it in action, download the sample application from GitHub and see how it fits together. The full template is here as well.

While the examples here relate to MVVM Light, the concept could be used with other frameworks.

SHARE:

When writing .Net console applications we often need to parse command line arguments that the user specified when launching the application.

We get these arguments passed into the program in the args parameter of Main()

static void Main(string[] args)

If our application only has a single simple parameter then it’s probably ok to just parse it ourselves.

Once the number and type of parameters increase then there’s a whole host of complexity that can creep in:

• What if values need converting to enum values?
• How to handle arguments that takes a list of values?
• How to implement verb style arguments like “git push”?
• What if parameters are in different order?
• What about optional parameters and should we use default values if they’re not supplied?
• What about arguments that are mutually exclusive?

While we can program our console applications to account for these things it could be quite a lot of work and testing to implement effectively.

It makes sense in these cases to use a ready-built library such as Command Line Parser Library.

Command Line Parser Library Basics

This library represents arguments by creating a class and decorating its properties that represent args with the [Option] attribute.

class SomeOptions
{
    [Option('n', "name", Required=true)]
    public string Name { get; set; }

    [Option('a', "age")]
    public int Age { get; set; }
}

Here this class is stating that we should always have a name argument (Required=true) and we can specify it at the command line with the shorthand “-n” or longer --name”.

The age argument is optional and can be specified with “-a” or --age”.

So from the command line we could type:

myconsoleapplication.exe -n Jason --age 99

In our Main method we can now parse these arguments into  an instance of our SomeOptions class.

static void Main(string[] args)
{
    var options = new SomeOptions();

    CommandLine.Parser.Default.ParseArguments(args, options);

    // options.Name will = Jason
    // options.Age will = 99
}

The ParseArguments method takes the array of string args from the command line and populates our SomeOptions instance which we can then use in a strongly typed way.

There’s a lot more to this library such as implementing verb style arguments, strict parsing, and creating help text, all of which I cover in my Pluralsight Building .NET Console Applications in C# course.

SHARE:

As a Microsoft MVP I get free Azure credits to use every month, so I thought I’d better start making use of them :)

JS Name-O-Tron is the first web site I’ve deployed to Azure and I’m pleased to say it was crazy-easy :)

It generates a random word and adds “.js” to it – you can then check if there’s an existing library with that name (GitHub, CodePlex, and NuGet).

I used Visual Studio 2013 to create a new ASP.Net application and chose MVC (v5) which resulted in a Bootstrapped site with a default Home controller and views.

More...

SHARE:

I got bored in Visual Studio double clicking a class, copying to clipboard, then heading to browser then pasting into search box.

I wanted to be able to quickly search for something (e.g. in Google) for whatever word the cursor was currently in. Also in other applications.

I have a Microsoft keyboard that has a calculator key that normally opens the Calculator application. I’ve never ever used this and hadn’t even noticed it until now.

To map this key in AutoHotkey, “Launch_App2” can be used, so to trigger a script whenever it’s pressed: Launch_App2::

I also wanted the default behaviour to automatically go to the first result. Pressing CTRL-calckey just does a normal search and lists all the results for me to peruse.

Here’s the script – note that it’s a bit rough and ready, for example it uses the clipboard (CTRL-C) so this will overwrite anything you have in it. It also won’t work if the cursor is at start of line, etc.

Launch_App2:: ; Do an I'm Feeling Lucky Google search when calc key pressed
  Clipboard := 

  SendInput, ^{LEFT}^+{RIGHT}
  SendInput, ^c
  ClipWait, 1

  if !(ErrorLevel)  { 
      Run, % "https://www.google.com/search?hl=en&btnI=I%27m+Feeling+Lucky&&q=" Clipboard
  }
return



^Launch_App2:: ; Do a normal Google search when calc key pressed
  Clipboard := 

  SendInput, ^{LEFT}^+{RIGHT}
  SendInput, ^c
  ClipWait, 1

  if !(ErrorLevel)  { 
      Run, % "https://www.google.com/search?hl=en&q=" Clipboard
  }
return

Now if i have my cursor in the word “ActionResult” in Visual Studio, hitting the calculator key takes me to MSDN http://msdn.microsoft.com/en-us/library/system.web.mvc.actionresult%28v=vs.118%29.aspx as this is the first Google search result for “ActionResult”.

If you’ve never used AutoHotkey before, to get started check out my Pluralsight course.

SHARE:

I’ve just published the initial chapters of my new free Leanpub eBook of C# tips.

You can get it for free or pay whatever you think it’s worth.

New chapters will be added over time, the book is currently about 3% complete.

Check it out at: http://bit.ly/sharpbook

SHARE: