This site works best in modern browsers. Looks like you're using an old one, you should upgrade if you can.

Using Page Object Models in UI Test Automation

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

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.

Kill CapsLock with AutoHotkey

capslock key on a keyboard

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.

Find a Designer for your Open Source Project

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.

OS Designer Finder screenshot

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.

Universal Windows App Paper Prototype

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.

Universal Windows Apps Paper Protoype template

5 Ways to Contribute to Open Source - It’s Not All Code

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.

Contributing To Open Source pyramid diagram

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.

about jason

My Bio Photo

Jason Roberts is a Journeyman Software Developer, Microsoft MVP, writer, Pluralsight author, open source contributor and Windows Phone & Windows 8 app author.

He holds a Bachelor of Science in computing and is an amateur music producer and landscape photographer.

MVP Logo