UI-testing (EPiServer): up and running

I’ve blogged previously about UI-testing. The purpose of that series of posts was to share information I’d gathered in the process of testing but I never really got around to writing about how to get started. Inspired by the Selenium testing tools cookbook I want to write some very hands-on posts so let’s get started.

Example to test

We’ll be using the episerver demo site and the test we’re going to run is that we want to make sure the header menu correctly marks the active page. By that I mean that when browsing the Alloy Meet page that corresponding menu choice is selected

Skärmavbild 2013-01-15 kl. 21.35.38

We’ll start with the simplest thing that could possibly work and then as this series goes along we’ll tweak various things and look at alternatives.

First test

Start by creating a new class library in VS (I’ll be using 2012). To drive the browser we need a driver (Selenium WebDriver) and to create the tests we need a testing framework (NUnit). Both of these are on NuGet so let’s add them

Install-Package Selenium.WebDriver
Install-Package NUnit

When everything is downloaded we add the class HeaderTest.

public class HeaderTest
{
    [Test]
    public void Alloy_Meet_should_be_marked_in_header_when_browsing_Alloy_Meet_page()
    {
        using (IWebDriver driver = new FirefoxDriver())
        {
            driver.Manage().Window.Maximize();
            driver.Navigate().GoToUrl("http://alloy.demo.episerver.com/Alloy-Meet/");
            var activeLinkText = driver.FindElement(By.CssSelector("ul.nav li.active")).Text;
            Assert.That(activeLinkText, Is.EqualTo("Alloy Meet"));
        }
    }
}

The code is pretty self explanatory (at least if you know a bit about css). There are many ways to locating elements and interacting with them, many of which I’m not going to touch in this series since it’s not about how Selenium WebDriver works. Reading Selenium testing tools cookbook, exploring the FindElement(s) method or googling will be very helpful however.