Category Archives: Development

UI Automated Testing with Sitecore

home_-_delta

Automated Unit Testing with Sitecore can be a bit tricky because of the context and configuration that goes along with Sitecore, but from a pure UI perspective, testing can be automated with a screenshot comparison approach. I posted an article over at Code Project called Screenshot Smoke Testing. I came up with this approach for my current client witch is a Sitecore engagement. This approach would actually work with any ASP.NET project, not just Sitecore and it  allows one to catch a number of issues that could surface while writing very little code.

Instead of having to write a test script for every element on the page, the test can simply take screenshots of the site and compare them against approved versions. If there is a difference, than the delta would get highlighted and the test would fail.

Feel free to check out the article and let me know what you think: http://www.codeproject.com/Articles/688936/Screenshot-Smoke-Testing

Advertisements

ESATA, SSD and Virtual Machine Goodness (improved)

About a year ago I posted some details on how I setup my environment for each client: https://ledtalks.wordpress.com/2011/10/07/esata-virtual-machines-goodness/

Today I finally upgraded and bought a few Solid State III 2.5″ Drives, the specific one is here: http://www.tigerdirect.com/applications/searchtools/item-details.asp?EdpNo=91218

I have to kick myself for not doing this sooner. Bootup is much faster and opening Visual Studio and debugging my web applications is twice as fast (perceived, I didn’t actually time things). I should be getting a new laptop from work soon, but this will hold me off for a while. The other nice thing is I can suspend my VM images extremely quickly and the resume just as fast.

eSATA + Virtual Machines = Goodness

I am not sure if it is the norm or not, but I like to create a virtual machine image for each project I work on. Being a consultant, I am usually on a few projects at a time and at very least need to refer back to past projects. Having a development environment on a virtual machine for each client makes it easy to stay organized and keep things isolated from one another.

The base image that I use to clone has a base install with the necessary IIS components, SQL Server 2008 and Visual Studio 2010 with the settings just how I like them along with the plug-ins such as ReSharper in place. I also have my AHK script in place as well, because your AHK scripts on your host machine will not work when in your VM (they do work when you are remoted into a server however).

My disk space was getting pretty tight this week because I started a new client and I duplicated an existing clients environment so I can test out upgrading to Sitecore 6.5 while still keeping the 6.4 in place. So today I went out and bought a BlacX SATA HDD eSATA + USB 2.0 Docking Station and a 500 GB drive. I could have gone larger or even gone with a solid state drive but I didn’t want to shell out a lot just yet because I wasn’t sure how performance would be. I tried to run my VMs from a MyBook back in 2006 and it just wasn’t possible and I was a bit pesimistic.

Well after a day of developing, I can officially say, I like it a lot. It is actually a bit more responsive than when the image was on my host machine’s hard drive. I imagine this is due to the fact that the host and VM do not have to compete for attention from a single drive.

I will probably end up getting a second docking station for the office so I just have to carry the small 2.5 mobile hard drive with me when commuting to/from work. The one downside to this is, I won’t be able to code on the train because I will not have access to the external drive. I figure I can catch up on non-development tasks during my commute or if I need, I could keep a copy of one of my images on my laptop too and only use it when commuting (I will just need to remember to get latest/check-in to ensure the external image and local image are in synch).

Web.Config Transformations when Debugging

I am a big fan of the Web.Config Transformations that got introduced with a while back. Prior to them being inherently supported one could accomplish the same thing with part of the Enterprise Library, and prior to that one could leverage a custom MSBuild Task or the XMLPoke Task to get your web.config updated based on the environment it was targeting.

Having your configuration elements managed with a transform file makes it a bit easier to manage and keep track of your settings that could change based on environment or settings. Without this each developer on your team might need to create host entries and keep their folder structure the same to ensure the settings work for each of their machines. Another option is each team member just has their own configuration files with their specific settings that they need but when source control is introduced this can get tricky because one developer might be overwriting another’s settings.

Unfortunately, VS.Net doesn’t do any transforming when you are developing and just debugging your local environment. But there are some steps you can do to make this happen if you want.

  • First, create the configurations you want in VS.Net, assuming the default debug and release are not enough for what you are trying to accomplish.
  • Right click on you web.config and select Add Config Transforms – this will create a dependant transformation config for each of your configurations defined.
  • Now you can rename your web.config to web.base.config.
  • Add a web.config to your project. It doesn’t matter what is in it because it will get overwritten every time we do a build but we want it part of the project so VS.Net doesn’t give us the “Your Project isn’t configured for Debugging” pop-up.
  • Edit your .csproj Project File and add the following TransformXml task to the AfterBuild target. Here you can see I will be transforming the web.base.config file using the web.[configuration].config and it will save it as web.config.
webconfig1

For aesthetics, I renamed my transformation files to just web.[configuration].config instead of web.base.[configuration].config and updated the project file like below:

webconfig2

So the transformation files are nested under the web.base.config and the web.config doesn’t have any transformation files because it is the output not the input. Below you can see the setup I have so far for the Ergo project where my web.config would look quite different depending on if I am using Ektron or NHibernate as my data repository.

webconfig3

Unit Testing with an InMemory Database and NBuilder

I am throwing a lot of cycles to my Ergo project lately. I will go into more detail of the Ergo project later when it starts to take more shape and get some legs but one thing it is allowing me to do is get back to a true TDD project. A couple of cool things I have introduced to my unit tests are NBuilder and leveraging Fluent NHibernate and SQLite InMemory to make testing the NHibernate layer a bit easier.

When using NHibernate you generally only need to test 3 things:

  • The Properties are being persisted
  • Cascading works as expected
  • Queries return the correct results

By using an in memory SQLite database we can do this testing while keeping our unit tests nice and speedy. Below is my InMemoryDatabaseTest class that my unit tests can inherit from to test our NHibernate layer.

unit testing1

Now that we have our InMemoryDatabaseTest class setup, we can structure our unit tests like below. One nifty class I found today that you will see in the screenshot is the Builder class. This is from http://nbuilder.org/ and http://code.google.com/p/nbuilder/. So instead of having to create a new Page instance and populate it with a bunch of dummy data I can just use 1 line of code to new up a Page which I can then persist to the InMemory database and then use it to Assert against when I query.

unit testing2

Dev Magic Fake Framework Released

I have been playing around with this framework this weekend and it is really cool. It allows you to work in a particular layer of your application without having to make sure all the plumbing and the other layers are in place. I will post a more detailed blog entry in a few days but I wanted to get this out there now to get the word out.

http://mohamedradwan.wordpress.com/2011/09/03/dev-magic-fake-video-tutorial/

Scripting out Monotony with AHK

I posted previously about reducing the use of your mouse to speed up your daily computer work (not just development). I wanted to elaborate a bit more on Auto Hot Key (AHK) that has been around since 2003 but I don’t run into a lot of people that use it.

Wikipedia
AutoHotkey is a free, open source macro-creation and automation software utility which allows users to automate repetitive tasks. Any application user interface can be modified by AutoHotkey (for example, with Emacs style).[2] It is driven by a custom scripting language that is aimed specifically at providing keyboard shortcuts or hotkeys.

Before Windows 7 came out I had an AHK script that would allow me to arrange a window to take up 1/2 the left or right side of my monitor with a quick keyboard command. Of course the ‘Snap Feature’ is now part of Windows 7 but AHK allowed me to easily build one of the main features Microsoft promoted during their Windows 7 campaign – I do have to point out in the commercial the guy is using the mouse to drag the 2 windows to the side instead of [Win Key]+[Left Arrow] then [Alt]+[Tab] then [Win Key]+[Right Arrow] which would be faster 🙂

Microsoft took care of the snap feature for verticle tile placement but sometimes I like to have a window snapped to the left but take up more than 50% of the screen area. This allows me to have more area for my document but still have the ability to see part of my desktop on the right in case I were using Sidebar Gadgets or in this case my Sticky Notes. If you look at the screenshot below, you can see that my Posterous editing window at 50% leaves very little room for my Rich Text Editor.

ahk1

So let’s create a script that will Snap my window to the Left and then make it a bit wider.

The first thing we will download and install AutoHotKey from here.

We then want an .ahk script in our Startup folder so our commands are available when Windows starts. It can be blank for now.

Next we want to download a AHK macro recorder here (written with AHK scripting) that will record keystrokes and mouse movements and generate AHK scripting for us so we don’t have to code as much from hand. As you get familiar with AHK you will need the Recorder less and less but it will be your friend when you are fist starting out.

I am a big fan of Continuous Improvement both in development and life. As time goes on we are going to want to add or maintain some of our short cuts. I am at the point now (after using it for 7 years) that my brain automatically says “Hey James, you have already done this combination of steps 3 times this week” and I open up my .ahk file and assign the steps to a shortcut key. There is no sense in making it difficult to edit, build or record our AHK scripts so the first thing you will see in my script are 3 shortcuts to do just that.

ahk2

Reviewing AHK documentation or using the Macro recorder you will notice that “<” is Left and “!” is the [Alt] key. So above you can see that when I do a [Left Alt]+Z, notepad will open up my AHK script. [Left Alt]+X will execute my .ahk script to take into account any changes I just made. [Left Alt]+C will open up the Macro Recorder. There are also text editor’s that have color coding and intellisense for AHK scripts that you could use instead of Notepad but I haven’t installed them since the last time I rebuilt my laptop.

So now that we have those 3 key hot keys assigned let us do a [Left Alt]+C so our Macro Recorder will open.

ahk3

To create our ‘Wider Left Window Snap’ functionality we will do something like the following narrative:

  1. Hit Start on the Recorder (this will minimize the recorder so it is not with focus)
  2. [Windows] + [Left] combo which snaps my current window to the Left.
  3. Click the right border of the window and drag it so the window is at the size you like.
  4. [Ctrl] + [Shift] + [End] to stop the recorder

Here is what our recorded script looks like.

ahk4

One thing to notice is that we aren’t quite done because our recorder doesn’t do a good job at recognizing drag and drop, so we are going to have to script that part by hand. What we can quickly do is record once more and click on the area of the screen that is where our right window border. This will give us the coordinates we need for our drag and drop action. I also updated the script to use the #{Left} instead of the LWin and LWin Up functionality because it is cleaner. So our finished script looks like below.

ahk5

For simpler scripts you can have everything all on 1 line, but here we have a 6 line block not including the comments. Here is the breakdown:

  • #.:: – # is the Windows key so if the user clicks {Windows}+{Period} then this script block will fire. I used the period key because it has a “>” key above it and I am adjusting the window to the right and the greater than sign is like a Right arrow. You could assign this script block to whatever hotkey combination you like.
  • Send, #{Left} – The script will send the {Windows}+{Left Arrow} to the system which will Snap the window to the Left
  • Click, 686, 305, Left, down – This is the first part of our drag and drop. We are telling the script to go to x686,y305 and hold down the Left mouse button
  • Click, 1078, 305, Left, 0 – Here we are dragging our mouse to the x1078,y305 position
  • Click up – release the Left mouse button
  • return – finish the script block

We can then {Ctrl}+S to save our .ahk script, then {Ctrl}+X to rebuild the script. Now when in any window and a {Win}+{Period} is struck the current window will quickly resize to a position like below.

ahk6

What else?

Start simple and then expand on your script. I would suggest putting in words or phrases that you type a lot throughout your week. Sure there are plug-ins for your browsers that can fill in your address information but they don’t work across other applications so I have quick hot keys for a lot of my contact information. Below you can see some of them.

ahk7

So now I can quickly type in phone numbers, passwords, usernames whatever else with 2 key strokes (Right Alt and then a letter or number). Yes storing passwords and credit card information in plain text isn’t the best idea but I figure if someone has access to my hard drive to read this file then I have a bigger concern.

There are also Hot Strings too which are cool. Instead of using a key combination to run a script, AHK will monitor your key combinations and when it finds a match it will replace the combination with what is specified. I use this for email addresses and words I often mistype.

ahk8

So any time I type “j@” it will be replaced with my work email and if I do “c@” it will be my gmail address. If I accidentally type “teh” it will correct to “the”. I also have the scripts below that will navigate up/down 5 lines at a time and left/right words at a time. This makes me quickly navigate with the keyboard.

ahk9

You know enough now to get creative. For example I have a script where with a quick key combination; I launch Google Chrome, go to sirius.com, open up their Listen Player and ensure the station is on Alt Nation. Now I just need a script that will post a new and insightful Blog Post with a quick key stroke.