WatiN Tips and Tricks

I've realised that in my last WatiN post I didn't actually explain what it is for those who haven't used it before.

So just briefly, WatiN was inspired by WatiR and is used to perform front end web application testing. WatiN is coded in .net languages and it provides a mechanism to automatically load Internet Explorer, find controls and perform actions and then assert conditions. You can find out more info here: http://watin.sourceforge.net/

Ok now thats done, here is my tips for the week:

Problem:

Each time I load a test I want to run it in a new process so my session information is cleared

Solution:

With version 1.2 of WatiN there is a new argument to allow you to start IE in a new process:

IE ie = new IE(someUrlToGoTo, true))

Problem:

I want to obtain a collection of fields. For example, I have a repeater which contains a text field and I don't know how many repeater items may be returned but I want to grab all text fields.

Solution:

Use a filter to get a collection

TextFieldCollection valueTextFields = browser.TextFields.Filter(Find.ById(new Regex("ValueTextBox")));

Problem:

I want to find a field but its type isn't available in WatiN

Solution:

Use the Element object

Element item1 = ie.Element("li", Find.ById("item1"));

Problem:

I don't want the Internet Explorer windows used during testing to be visible to the user

Solution:

Change the IE setting

IE.Settings.MakeNewIeInstanceVisible = false; // default is true

Help EPiServer prioritse their development

EPiServer has kindly provided us with a way to voice our opinion on what future features we see are most important.

Fill out the survey http://www.episerver.com/en/Surveys/Help-us-prioritize-functionality/
and select the top 5 out of 20 features.

Here's my pics:
2. Change page type for a page
(allow you to switch a page to a different page type and match up properties)
4. Drag and drop sorting in tree structure
(so you don't have to go through every edit tab to change the sort index!)
7. Shortcut indication in tree
A simple request but beneficial for editors and during training
14. Search behavior report
(list of the most frequently used search words, and words with no results)
I have had this asked from almost every client
18. Check broken links
(list of broken links - both internal and external)
I get this one requested on every RFP we get through the door

WatiN Testing Pattern

In my latest project I am utilising WatiN to perform my website testing. This is not the first time I have used it in a project but it is the largest test project I've had to create and I've come across a couple of challenges.

Early on I realised my code was becoming increasingly difficult to manage and well rather messy due to all the control find declarations that existed within my tests. So I decided to see if anyone had implemented a nice pattern for WatiN tests that they could recommend. And low and behold I came across a couple and I have included them as references as the bottom of this blog. There are slight variations for both and undoubtedly you will vary your own to suit the situation you are working with but the underlying principals are the same.

First of all we create a page class for every page of our website. This page class is going to contain all the controls that we need to access on our page. The page class is going to inherit from the IE object and instantiates itself using the correct url. Let's look at an example

public class BaseModelPage : IE { public const string PreConfiguredModelURL = "/BaseModel.aspx"; public BaseModelPage() : base (SharePointSiteFixture.Site.Url + PreConfiguredModelURL){} public Button AddToQuoteButton { get{ return Button(Find.ById(new Regex("AddToRequestButton"))); } } public Button EditSpecButton { get{ return Button(Find.ById(new Regex("EditSpecButton"))); } } }

From here its a matter of removing all the control find code you had in your tests, reference the new page class and now our tests are clean, easy to read and is a true representation of what we're testing.

So here is what it looks like after the cleanup

[SetUp]] public void SetUp() { page = new BaseModelPage(); } [Test] public void AddQuoteAndEditSpecButtonsAreHidden() { Assert.That(!page.AddToQuoteButton.Exists); Assert.That(!page.EditSpecButton.Exists); }

We can also abstract out common scenarios or workflows out to the classes also. For example if there are some textfields we need to fill out multiple times to cover off a couple of test scenarios then we'll pull this code into a method in our page class and simply reference it from our test. Again, our tests are becoming more clean and simple. Lets look at another test that calls one of these methods.

[Test] public void SubmittingValuesHidesConfigureFormShowsButtons() { page.SubmitValues(); Assert.That(!page.ConfigureForm.Exists); Assert.That(page.AddToQuoteButton.Exists); Assert.That(page.EditSpecButton.Exists); }

Another thing we can do is extend our page classes further to handle moving between pages. This is useful when you have a transactional website and you need to test page sequence. In this scenario we add another constructor which accepts an IE instance. Then we can call this constructor from another page class in order to return the new page.

public QuoteRequestPage(IE instance): base(instance.Uri){} internal QuoteRequestPage GoToQuoteRequestPage() { RequestQuoteButton.Click(); return new QuoteRequestPage(this); }

So that pretty much sums it up. I certainly recommend following a pattern like this as the maintainability of your code is greatly increased and your tests become clean and readable.

Ref1 - James Avery
Ref2 - Richard Griffin

EPiServer announces new EMVP program

Mikael Runhem has announced on his research blog the introduction of the new EMVP - The EPiServer Most Valued Professional Program.

The requirements to become an EMVP are:

• Very high skills in EPiServer solution development.
• To be able to leverage their personal expertise to other developers in blogs and sample code.
• To have witten at least one high-class technical blog article about EPiServer with top ratings.
• You also need to be invited by at least three EPiServer staff members

And to maintain EMVP status you need to publish at least one high-class technical blog article about EPiServer at the official EMVP blog with top ratings every 60 days.

This is a very exciting opportunity and I am happy to see EPiServer bringing in a program like this. For more information about the benefits check out the blog here - Mikes Blog

Lorem Ipsum Generator

I use this little tool all the time and thought I should share it with the rest of you.

It's a generator for Lorem Ipsum dummy text http://www.lipsum.com/

CSSVista Tool

A friend at work put me on to this very cool free tool called CSSVista. It allows you to edit css against a live site and see the results in IE and Firefox simultaneously.

http://litmusapp.com/cssvista

It's a pretty basic tool, you make some changes to your css on the left and it displays on the right (no html changes available) however if you're like me, you no doubt have many occasion where you just can't seem to get your css to do what you want and this tool will allow you to play around till you get it right.

You can also disable css & images in one go to see the affect in both browsers, do some resolution resizing and outline elements.

EPiServer CMS 5 Released

The much anticipated EPiServer CMS 5 was released in september and I for one am very excited about working with this new version. We have two new projects coming up at Intergen so look out for some interesting posts as I learn the ins and outs of this new version.

For download details: Download EPiServer CMS

TFS and Fiddler

If you are having problems with TFS and you use Fiddler then check out this post detailing the errors TFS encounters when Fiddler is running.

*Thanks to Duncan for the info

EPiServer CMS 5 RC3 Released

The next release candidate for EPiServer CMS has just been released.

You can download RC3 from here:

http://www.episerver.com/en/EPiServer_Knowledge_Center/Download2/EPiServer-CMS-5---RC3/

Alternatively, EPiServer have provided two Virtual Image downloads;

Windows Vista with EPiServer CMS 5 RC3 (SDK installation) and Visual Studio 2005 and
Windows 2003 Server with EPiServer CMS 5 RC3 (manager installation)

You can register for both of these downloads here:

http://www.episerver.com/en/EPiServer_Knowledge_Center/Download2/EPiServer-CMS-5---RC3/EPiServer-CMS-5-RC3---Virtual-PC-Image/

Sharepoint Integration Module

EPiServer are currently developing an integration module with SharePoint 2007/WSS 3.0.

Phase 1 will see the ability to publish content from SharePoint to EPiServer with Phase 2 the ability to present content within SharePoint from EPiServer.

This module is being built to run with EPiServer CMS.

More information can be found here including how to sign up for the beta testing:
http://www.episerver.com/en/EPiServer_Knowledge_Center/Developer-Forum2/EPiServer-Developer-Forums-/SharePoint-EPiServer-Integration-Module/Info-SharePoint-EPiServer-Integration-module/

Fiddler

Yesterday I was having some performance problems with one of my MCMS websites and a workmate pointed me towards a tool he found. It's called Fiddler.

Fiddler is a http debugger which logs all http requests between your computer and the Internet. You can then check out the http traffic and inspect ingoing/outgoing data.

Quite an interesting tool, check it out here: http://www.fiddlertool.com/fiddler/

It's ALIVE

After only 3 failed installations I finally have an EPiServer CMS 5 demo site up and running - hurray!

I learnt quite a few things while completing this installation.

First of all you can install the site using either the EPiServer manager install (like we're used to with EPiServer 4.*) or by using the extensions within studio to create a new project. I found the EPiServer manager install more useful this time around as it installs some sample templates. For future projects a clean install through studio will be beneficial.

The EPiServer manager install can fail a few times and the forums are a good place to find resolutions to problems during this step. My issues were due to dll access (not rolling back completely after a failed install) and sql server 2005 problems. A very common error is remote connections not enabled:

An error has occurred while establishing a connection to the server. When connecting to SQL Server 2005, this failure may be caused by the fact that under the default settings SQL Server does not allow remote connections.

For this issue you need to configure remote connections within the Surface Area Configuration Tool. The following is a good resource: http://support.microsoft.com/kb/914277

This documentation (http://www.episerver.com/en/EPiServer_Knowledge_Center/Documentation/Release-Notes-CMS-Beta/EPiServer-CMS-5-RC1-Revised-Documentation/Setting-Up-a-New-EPiServer-Site-with-Visual-Studio/) details how to set an episerver site with visual studio. If you install the site through the manager you can skip the first few steps although you will want to make sure your project and solution are all created and compiling correctly at this point.
The documentation is also available within the SDK. The EPiServer CMS 5 SDK can be found within your Start/All Programs if you have used the sdk installation package.

From here you can follow the documentation on Creating Roles and Users in the above link.

Note: there is one important thing missing from the documentation. Before you create the roles and users you need to run the ASP .NET SQL Server Registration Tool - Aspnet_regsql.exe (see http://msdn2.microsoft.com/en-us/library/ms229862(vs.80).aspx). This will allow you to install the database elements for the membership and role management. There has been mention that you can install your users and roles anywhere but for ease in your demo site I suggest installing on your demo database.

Once the reg tool has been run you can follow the steps to create the roles and users.

With all the hard setup parts done you can now login using sitename/util/login.aspx and the user you just created. I had a few configuration issues at this point. One of them was I had to have the entry applicationId="/LM/W3SVC/10/Root" as an attribute of my site tag:

site applicationId="/LM/W3SVC/10/Root" description="Example Site"

Afterwards, the site compiled correctly, I could login to admin and edit modes and I finally had a working demo site to play with.

- Workflow foundation, themes and role management here I come :)

Download EPiServer CMS 5 RC2 now

As anyone in the EPiServer community will know, EPiServer CMS 5 is the next generation of the EPiServer project and the release candidates are here. A couple of weeks ago RC2 was made available for download.

You can find the release notes and other interesting information here: http://www.episerver.com/en/EPiServer_Knowledge_Center/Documentation/Release-Notes-CMS-Beta/

There are a lot of changes in EPi5 and it'll take too long for me to list them all here, but in the next couple of months I plan on researching all of them and listing any interesting points and things I've learnt. I'm especially interested in the new integration with .net framework 3.0 and the windows workflow foundation. I consistently have questions about workflows from existing and potentional clients and I'm excited to see what the new workflow components can do.

I'm interested to hear from anyone else who is researching EPi5 and how you are going with installs and getting it all setup.

Hello World

My first blog entry... incredibly exciting. I have been thinking of starting a blog for awhile now and I've realised thinking is not doing so here I am.

I have been developing with EPiServer, a content management system (www.episerver.com) for probably over a year now and I have found a true passion for the web industry. This blog is going to feature all things EPiServer -

News
Code Samples
Interesting tid-bits
Tips and Tricks

Just to make things interesting expect to see me throw in the odd post around other web technologies or random thoughts I have about development work in general.

Enjoy, please feel free to post a comment or thought. See you again soon :)