I’m getting married in a few short weeks, and our gift list has now opened for any guests that would like to buy us something for the occasion. We debated over having a list in the first place, but in the end decided that it was probably for the best. One of our hesitations was that we didn’t want to know what people had bought for us before the day, and having an online gift list makes it possible to ‘spoil’ the surprise.

With the list only having been open a couple of days, the temptation was already pretty difficult to resist and we decided that it was okay to see what has been bought just so long as we don’t find out who’s bought what. Unfortunately this isn’t easy on the site as they’re listed together, so I was sneakily able to construct an XPath that extracted the necessary information. I’ve now combined into a Selenium 2 example using Java, which can be found below.

GiftList.java

package giftlist;
 
import java.util.List;
import java.util.concurrent.TimeUnit;
 
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
 
public class GiftList {
 
	private static WebDriver driver;
	private static final String GIFT_LIST_NUMBER = "123546";
	private static final String GIFT_LIST_PASSWORD = "password";
 
	public static void main(String [ ] args) {
		//open browser
		driver = new FirefoxDriver();
 
		//set implicit wait
		driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
 
		//login
		driver.get("https://www.johnlewisgiftlist.com/");
		driver.findElement(By.linkText("Manage your list")).click();
		driver.findElement(By.name("giftListNumber")).sendKeys(GIFT_LIST_NUMBER);
		driver.findElement(By.name("listPassword")).sendKeys(GIFT_LIST_PASSWORD);
		driver.findElement(By.linkText("Display List")).click();
 
		//get purchased items
		driver.findElement(By.linkText("Gifts purchased")).click();
		driver.findElement(By.xpath("//h1[text()='Gifts purchased by guests']"));
		List<WebElement> purchasedItems = driver.findElements(By.xpath("//tr[td[2] and @class='item']"));
 
		//output purchased items
		for (WebElement item : purchasedItems) {
			System.out.println(item.findElement(By.xpath("/td[1]")).getText());
		}
 
		//log out
		driver.findElement(By.linkText("Log out")).click();
 
		//close browser
		driver.close();
	}
 
}

So why does Selenium need a new site for Q&A?

Well, first let me give you some history of the official Selenium forums. When I first started to get involved in the Selenium community there was the Clearspace forums, which provided a good structure, a pretty good interface, and a basic reward system. The main problems I had with Clearspace was searching the content, identifying unanswered questions, and the alarming regularity of certain basic (but very suitable) questions. Another issue turned out to be spam, which I believe was the main reason the content was migrated – after much discussion – to Google Groups.

I was 100% for this move, however with hindsight I believe it wasn’t the best decision. Google Groups is great for discussions but not a suitable place for Q&A. It might be powerful in terms of search, but the format of text and structure of conversations makes it very difficult to identify questions, and there’s little or no incentive in answering them. Whenever I’ve taken time to read the posts in the group I’ve almost always lost interest after reading just one or two – there’s just so much text!

At this time the StackOverflow site was already becoming a popular place to ask Selenium questions – there are now over 600 questions tagged ‘selenium’. Once I’d asked and answered a handful of questions myself I was hooked. StackOverflow’s mission is to solve the common problems found in other forum solutions, and they do it very well. Their ‘ask a question’ system makes it very obvious if you’re asking a question that has already been answered, therefore filtering out repetition questions but at the same time providing those users with quality answers. Their rewards system works well to encourage good quality questions and answers. The only problem is that StackOverflow is for asking programming questions, and although Selenium does have programming aspects to it, it’s not the perfect fit.

Along comes StackExchange, which provides the same underlying solution from StackOverflow to fit an audience other than programmers. Unfortunately StackExchange was a commercial solution, and as Selenium is free and open source there wasn’t the cash to get something running. It’s also difficult to determine if the cost would be worthwhile, as without community interested the site would get nowhere.

When StackExchange announced that they would be redesigning their model so that community powered Q&A sites would be provided free of charge if they can prove they have enough committed users, I decided to put forward the Selenium proposal. After 29 days I’m impressed that the proposal has over 100 followers, and now has over 80 committed users!

If you’ve already committed then thank you – I’m really looking forward to participating with you on the new site!

Selenium 2 and .NET are up to alpha4 already but thorough examples of code on the internet are a bit thin on the ground so far compared to the Java equivalent. In my time using Selenium RC and now Selenium 2 I have built up a framework to support it.

I consider it to be an intermediate-level framework for using Selenium 2, NUnit and the Page Object model together so some advanced users might find it a bit basic. You may have even seen some of these concepts as snippets on testing blogs around the place. But overall it offers a framework from which to develop an easily maintainable suite of tests using the Page Object model (which is now considered to be the best practice for Selenium 2). If you already have a suite of Selenium tests in flat files that is spiralling in size and you are looking to make it more durable and more efficient then this could suit you.

With this blog post I intend to step through and get you started with this framework.

The solution explorer for this example

The Visual Studio solution

Exactly as we did with a Selenium RC project in Visual Studio, we need to create a new ‘Class Library’ solution to work with. To get the same naming layout I have, in the Name field type “Selenium2″ and in the Solution Name field type “Automated Test Suite”.

The solution now needs references to both Selenium 2 and NUnit before we get started so if you haven’t already downloaded them then scurry off and do that now.

Unzip the NUnit and Selenium 2 folders into your solution directory and add the references to the files from inside VS so it looks like the screenshot. Even though Selenium 2 is called Selenium 2, the reference files you need are confusingly prefixed with WebDriver (WebDriver.common, etc)! But they definitely are the ones you’re after.

SeleniumTestBase class

The class titled Selenium2TestBase.cs is used to setup and deliver the Selenium 2 driver to the test.

It’s a good chance to set up your driver with any profile extensions or configuration changes like bumping up the default timeout.

using System.Configuration;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.IE;
using OpenQA.Selenium.Chrome;
 
namespace Selenium2
{
    public class Selenium2TestBase
    {
        private FirefoxProfile _ffp;
        private IWebDriver _driver;
 
        public IWebDriver StartBrowser()
        {
            Common.WebBrowser = ConfigurationManager.AppSettings["Selenium2Browser"];
 
            switch (Common.WebBrowser)
            {
                case "firefox":
                    _ffp = new FirefoxProfile();
                    _ffp.AcceptUntrustedCertificates = true;
                    _driver = new FirefoxDriver(_ffp);
                    break;
                case "iexplore":
                    _driver = new InternetExplorerDriver();
                    break;
                case "chrome":
                    _driver = new ChromeDriver();
                    break;
            }
 
            return _driver;
        }
    }
}

Page Object GoogleHome.cs
The Page Object class contains all of the driver actions on that page as methods. The aim is to keep each method concise and true to their purpose and cut down on duplicated code. The Selenium2 driver is passed in from the test when the class is instantiated. I have used static page objects that do not return the driver. Alternatively you can use the technique covered here. Also, here’s a Selenium RC example.

To keep this example simple I have created only one Page Object but a typical application will have several. I have also stored the Object’s Xpath locators as private readonly strings inside the Page Object in order to keep it simple and concise but if you have a large amount of them to juggle you may want to use a separate static class.

using System;
using OpenQA.Selenium;
 
namespace Selenium2.Google
{
    class GoogleHome
    {
        private readonly string _inputFieldSearch = "//input[@name='q']";
        private readonly string _inputbuttonSearch = "//input[@name='btnG']";
        private readonly string _inputButtonLucky = "//input[@name='btnI']";
 
        private readonly IWebDriver googlehome;
 
        public GoogleHome(IWebDriver driver)
        {
            googlehome = driver;
            googlehome.Navigate().GoToUrl(Google_Common.GoogleTestSite);
        }
 
        public void TypeSearchString(string search){
 
            googlehome.FindElement(By.XPath(_inputFieldSearch)).SendKeys(search);
        }
 
        public void PressEnterOnSearchField()
        {
            googlehome.FindElement(By.XPath(_inputFieldSearch)).Submit();
         }
    }
}

NUnit SetupFixture
This SetupFixture class (denoted by the NUnit tag [SetUpFixture]) runs before the tests themselves. I mainly use this feature to configure Common variables that are specific to this project. There is more information about how these are managed further on in the post.

using System;
using NUnit.Framework;
 
namespace Selenium2.Google
{
    [SetUpFixture]
    public class Google_Setup_Fixture
    {
        // Runs before all tests
 
        [SetUp]
        public void SetUp()
        {
            string environment = System.Configuration.ConfigurationManager.AppSettings["GoogleTestEnvironment"];
            Google_Common.GoogleTestSite = environment;
 
            // For example sometimes an environment is really slow
            // so we can raise the driver timeout for that env
            //if(environment == "dev")
            //    Common.DriverTimeout = new TimeSpan(0, 0, 90);
        }
 
        [TearDown]
        public void TearDown()
        {
            Google_Common.GoogleTestSite = null;
            Common.DriverTimeout = new TimeSpan(0, 0, 30);
            Common.WebBrowser = null;
        }
    }
}

Finally, the test itself!
Now that we have the page actions (in Page Objects) and driver management abstracted (split up) into their own classes we can actually write the test!

The TestFixture which contains the test keeps the familiar NUnit TestFixtureSetUp and TestFixtureTearDown that you would have used in Selenium RC to setup and teardown the browser, meaning that a new browser will be built for each test. Note that my example inherits Selenium2TestBase, but you could easily instantiate the class if you prefer.

The test itself uses the GoogleHome Page Object to do a basic search. The details of the search are not important – I will presume that you know how to write a test already.

But don’t despair, we’ll post more advanced uses of Selenium 2 in tests on the SeleniumExamples blog as we use it more and more!

using OpenQA.Selenium;
using NUnit.Framework;
 
namespace Selenium2.Google.Tests
{
    [TestFixture]
    public class Search_Tests : Selenium2TestBase
    {
        public IWebDriver driver;
 
        [TestFixtureSetUp]
        public void TestFixtureSetUp()
        {
            driver = StartBrowser();
        }
 
        [TestFixtureTearDown]
        public void TestFixtureTearDown()
        {
            driver.Quit();
        }
 
        [Test]
        public void SearchForSeleniumExamples()
        {
            string _expectedresult = "Selenium Examples";
 
            GoogleHome googlehome = new GoogleHome(driver);
 
            googlehome.TypeSearchString(_expectedresult);
            googlehome.PressEnterOnSearchField();
 
            //Assert that the title contains the search string
            Assert.That(driver.Title, Is.StringMatching(_expectedresult));
 
            // Check that we're still on the correct domain using the Google_Common class!
            Assert.That(driver.Url, Is.StringMatching(Google_Common.GoogleTestSite));
        }
    }
}

Getting around an NUnit limitation
One thing that bothers me about NUnit is that I can’t change the browser or test environment from the NUnit GUI without having to rebuild the project. I guess this is not a requirement for a unit test. Perhaps we’re pushing the boundaries using NUnit for cross browser functional testing.

However we can use a simple config file to call in variables, commonly the browser, environment or whitelabel details of a site. In the XML config example below I have key value pairs for both the browser and the base URL for the test environment (ie dev, stage, live).

NUnit can be a bit sensitive to the config file’s directory location. You can see from the Solution Explorer screenshot that it is placed in the top folder and named “Automated Test Suite.config”. The settings in NUnit > Project > Edit… must reflect the config file’s location and name.

When you update the config file between tests you will need to reload the project in the GUI (Ctrl-P) to use the config changes.

<?xml version="1.0" encoding="utf-8" ?>
 
<configuration>
  <configSections>
  </configSections>
 
  <appSettings>
    <!--<add key="Selenium2Browser" value="chrome"/>-->
    <add key="Selenium2Browser" value="iexplore"/>
    <!--<add key="Selenium2Browser" value="firefox"/>-->
 
    <add key="GoogleTestEnvironment" value="http://www.google.com/"/>
    <!--<add key="GoogleTestEnvironment" value="http://www.google.co.uk/"/>-->
  </appSettings>
</configuration>

The Common classes
You may have noticed that the project references two ‘Common’ classes in various places.

In the (static) Common class I store variables that are shared across the whole Selenium2 namespace. For example here the TimeSpan value for timeouts is kept and I can reference it from elsewhere. This way the driver and any custom methods I have written will all use the same timeout value from the Common class.

In other cases I might include the Common variables as part of the expected criteria in assertions which cuts down on hard coded criteria.

using System;
 
namespace Selenium2
{
    public static class Common
    {
        private static TimeSpan _defaultTimeSpan = new TimeSpan(0, 0, 30);
 
        public static string WebBrowser { get; set; }
        public static TimeSpan DriverTimeout
        {
            get { return _defaultTimeSpan; }
            set { _defaultTimeSpan = value; }
        }
    }
}

namespace Selenium2.Google
{
    public static class Google_Common
    {
        public static string GoogleTestSite { get; set; }
    }
}

Extending IWebDriver
Often you will find yourself writing tedious bits of code over and over again. By adding an extension to IWebDriver you can call methods in the same manner, keeping the code clean and readable:
driver.WaitForElementNotPresent(By.Xpath(""));

using System;
using NUnit.Framework;
using Selenium2;
using System.Threading;
 
namespace OpenQA.Selenium
{
    public static class IWebDriverExtensions
    {
        // This method finds a select element and then selects
        // the option element using the visible text
        public static void FindSelectElement(this IWebDriver driver, By bylocatorForSelectElement, String text)
        {
            IWebElement selectElement = driver.FindElement(bylocatorForSelectElement);
            selectElement.FindElement(By.XPath("//option[contains(text(), '" + text + "')]")).Select();
        }
 
        // This is a basic wait for element not present a'la Selenium RC
        // but sharing the same timeout value as the driver
        public static void WaitForElementNotPresent(this IWebDriver driver, By bylocator)
        {
            int timeoutinteger = Common.DriverTimeout.Seconds;
 
            for (int second = 0; ; second++)
            {
                Thread.Sleep(1000);
 
                if (second >= timeoutinteger) Assert.Fail("Timeout: Element still visible at: " + bylocator);
                try
                {
                    IWebElement element = driver.FindElement(bylocator);
                }
                catch (NoSuchElementException)
                {
                    break;
                }
            }
        }
    }
}

Scaling Up!
With this solution it is quite easy to set up tests for numerous web apps within the solution.

Add a new folder at the same level as the Google folder in my example and add the Page Objects and tests inside it. Follow the same structure as the Google example and both applications can share the Selenium2TestBase, WebDriverExtensions, config and Common classes that you have already written.

Cutting down on duplicated code will save you tons of time in both writing and maintaining your tests!

I suspect most of Zac’s contributions will be .Net or C# examples, which is something I have little experience of myself. If you’re also interested in submitting content to the blog, get in touch with details of what you’d like to contribute and a bit about yourself.

Format header/footer caching
For some reason (still not clear to me) the Selenium IDE formatter headers & footers were cached in two places, the TestCase itself, and also within the Format. I was finding that when switching between my new format and the default HTML, whichever I used first was persisting as the header/footer for the other. This could be fixed by using the Formatter cached header/footer but as I couldn’t see any advantage of caching this content, it seems like an unnecessary and overcomplicated solution. So I removed the caching entirely.

Updating variables in format source
The other main issue I had was when updating the base URL in Selenium IDE the format source is not updated. By removing the caching I’d partially solved this, but it still required the user to switch to another format and back again. Also, changes to variables from the format options pane also need to update the format source. I was able to find the appropriate place to initiate a refresh of the format source.

Setting the initial base URL
Finally, I had an issue where the initial base URL in the format source was not correct. When I tracked down the right place to put this minor fix I found the line I needed was already there but commented out! After a quick check, it appears that the change may have been a mistake, so I brought it back in and ran a few successful tests.

Obviously these changes are fairly significant, so the next release of Selenium IDE (1.0.8) will need to be well tested. At this time there isn’t a build available with these changes, but if you are confident with running a potentially unstable version you can check out from SVN and build Selenium IDE yourself.

Please get in touch if you have any feedback. You can raise any issues you find in the official issue tracker. Please label them as ‘ide’.

Stay tuned for more details on my new formatter – I have a few more issues to work through before I’m ready to release it, and some of these may even involve further improvements to Selenium IDE.

So rather than check this manually, I decided to write a couple of small Selenium 2 scripts to check the stock levels at my ‘local’ stores, and to find out all stores that do have the devices. These examples use Java with TestNG (for dataproviders), and Selenium 2.

WebDriverTestBase.java

package o2stock;
 
import java.util.concurrent.TimeUnit;
 
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Wait;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
 
public class WebDriverTestBase {
 
    public static FirefoxDriver driver;
    public static Wait wait;
 
    @BeforeMethod(alwaysRun = true)
    protected void startWebDriver() {
    	driver = new FirefoxDriver();
    	wait = new WebDriverWait(driver, 60);
    	driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    }
 
    @AfterMethod(alwaysRun = true)
    protected void closeSession() {
        driver.close();
    }
 
}

O2Stock.java

package o2stock;
 
import java.util.List;
 
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.Select;
import org.testng.annotations.DataProvider;
import org.testng.annotations.Test;
 
public class O2Stock extends WebDriverTestBase {
 
    @SuppressWarnings("unused")
    @DataProvider
    private Object[][] stores() {
        return new Object[][] {
            { "London", "London" },
            { "South East", "Bluewater" },
            { "South East", "Dartford" },
        };
    }
 
    @Test(dataProvider = "stores")
    public void checkStock(String region, String city) {
        String modelTitle = "iPhone 4 32GB : Black";
        driver.get("http://stock.o2.co.uk/");
        driver.findElement(By.xpath("//input[following-sibling::label[@title='" + modelTitle + "']]")).click();
        driver.findElement(By.id("locRet")).click();
        new Select(driver.findElement(By.id("ukregions"))).selectByValue(region);
        new Select(driver.findElement(By.id("citySel"))).selectByValue(city);
        driver.findElement(By.xpath("//div[@class='sfSubmit']/input")).click();
 
        System.out.println(driver.findElement(By.className("timeStamp")).getText() + "\n");		
 
        int stores = driver.findElements(By.xpath("id('tblStyleRetail')/tbody/tr")).size();
        for (int i = 1; i <= stores; i++) {
            WebElement store = driver.findElement(By.xpath("id('tblStyleRetail')/tbody/tr[" + i + "]"));
            int withStock = store.findElements(By.xpath(".//img[@alt='In stock']")).size();
            System.out.println(withStock + " in stock at " + store.findElement(By.xpath("./td[1]")).getText());
        }
    }
 
    @SuppressWarnings("unused")
    @DataProvider
    private Object[][] models() {
        return new Object[][] {
            { "iPhone 4", "16GB", "Black" },
//          { "iPhone 4", "16GB", "White" },
            { "iPhone 4", "32GB", "Black" },
//          { "iPhone 4", "32GB", "White" },
            { "iPhone 3GS", "8GB", "Black" },
            { "iPhone 3GS", "16GB", "Black" },
            { "iPhone 3GS", "16GB", "White" },
            { "iPhone 3GS", "32GB", "Black" },
            { "iPhone 3GS", "32GB", "White" },
        };
    }
 
    @Test(dataProvider = "models")
    public void findStock(String model, String capacity, String colour) {
        String modelTitle = model + " " + capacity + " : " + colour;
        String modelName = model + " " + capacity + " (" + colour + ")";
        driver.get("http://stock.o2.co.uk/");
        driver.findElement(By.xpath("//input[following-sibling::label[@title='" + modelTitle + "']]")).click();
        driver.findElement(By.id("locRet")).click();
        new Select(driver.findElement(By.id("ukregions"))).selectByValue("All");
        new Select(driver.findElement(By.id("citySel"))).selectByValue("All");
        driver.findElement(By.xpath("//div[@class='sfSubmit']/input")).click();
 
        System.out.println(driver.findElement(By.className("timeStamp")).getText() + "\n");		
 
        List storesWithStock = driver.findElements(By.xpath("//img[@alt='In stock']/ancestor::tr"));
        if (storesWithStock.isEmpty()) {
            System.err.println(modelName + " is not in stock anywhere!\n");
            return;
        }
 
        System.out.println(modelName + " is in stock at the following " + storesWithStock.size() + " O2 stores:");
        for (WebElement store : storesWithStock) {
            System.out.println(store.findElement(By.xpath("./td[1]")).getText());
        }
        System.out.println();
    }
 
}

The current output of the findStock method for iPhone 4 is below:

Last update 01 Jul 2010 @ 13:00 - next update due around 17:00

iPhone 4 16GB (Black) is in stock at the following 5 O2 stores:
24 The Cascades, Cascade Centre, PORTSMOUTH, Hampshire, PO1 4RJ
98 Union Street, ABERDEEN, Scotland, AB11 6BD
Unit 3 Bon Accord Centre, George Street, ABERDEEN, Scotland, AB25 1HZ
219 Union Street, ABERDEEN, Scotland, AB11 6BA
26 South Walk, CWMBRAN, Wales, NP44 1PU

Last update 01 Jul 2010 @ 13:00 - next update due around 17:00

iPhone 4 32GB (Black) is in stock at the following 5 O2 stores:
24 The Cascades, Cascade Centre, PORTSMOUTH, Hampshire, PO1 4RJ
98 Union Street, ABERDEEN, Scotland, AB11 6BD
Unit 3 Bon Accord Centre, George Street, ABERDEEN, Scotland, AB25 1HZ
219 Union Street, ABERDEEN, Scotland, AB11 6BA
26 South Walk, CWMBRAN, Wales, NP44 1PU

Have fun!

Update 1:
Some changes to the output, also including the datestamp of the latest update. I have also made this available here from my public svn repository.

Update 2:
Also available on github.

Anyway, below is my quick proof of concept using Selenium 2 alpha 4 – the latest version of Selenium 2 is available for download here.

package tests;
 
import java.util.concurrent.TimeUnit;
 
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
 
public class WebDriverScratchPad {
 
	public static final long PAUSE = 2000;
 
	public static final Keys UP = Keys.ARROW_UP;
	public static final Keys DOWN = Keys.ARROW_DOWN;
	public static final Keys LEFT = Keys.ARROW_LEFT;
	public static final Keys RIGHT = Keys.ARROW_RIGHT;
 
	public static WebElement controls;
 
	public static void main(String [ ] args) throws InterruptedException {
		WebDriver driver = new FirefoxDriver();
		driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
		driver.get("http://www.google.com/pacman/");
		controls = driver.findElement(By.id("pcm-c"));
 
		move(LEFT, UP, LEFT, DOWN, LEFT, UP, LEFT, DOWN, RIGHT);
	}
 
	private static void move(Keys... directions) {
		for (Keys direction : directions) {
			controls.sendKeys(direction);
			try {
				Thread.sleep(PAUSE);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
	}
 
}

Try it out for yourselves, and I extend these challenges to you:

1. Specify a distance for Pacman to travel rather than using an arbitrary pause
2. Detect if Pacman dies in his quest to eat all the pills
3. Work out the score at the end of the game

All of the above should be achievable… let me know how you get on. Also let me know what high scores you achieve playing Pacman with Selenium 2!

1. What is your level of experience with Selenium?
2. What do you want to know about Selenium 2?
3. What language would you like to see Selenium 2 demos in?

Below are the slides that I didn’t get time to show at the event.

In case you can’t see the slides above, the results are repeated below:

What is your level of experience with Selenium?

1. Beginner: 44%
2. Intermediate: 46%
3. Advanced: 10%

What do you want to know about Selenium 2?

1. New Features: 50%
2. Migration: 20%
3. Everything: 20%
4. Grid: 10%

What language would you like to see Selenium 2 demos in?

1. Java: 55%
2. .NET: 26%
3. Python: 10%
4. Ruby: 3%
5. JavaScript: 3%
6. PHP: 3%