How To Get Started With Selenium Core And ASP.NET MVC

About a year and a half ago, my team and I tried to get some WaitiN UI tests up and running. We got some basic tests working on our local machines after a while, but we were never able to get them to run correctly in our CruiseControl.NET CI server. We spent near 2 months trying to get it to work with nothing but pain and heartache. Eventually we gave up on WatiN and left UI test automation out of our process.

Recently, my interested in UI test automation has resurfaced. I wanted to find an easier way to get up and running, though, and see if anyone else out in the world had some suggestions on what to use and why. The twitter-verse was kind enough to offer more opinions than available frameworks, as I expected. In the end, some opinions of Selenium combined with previous demo I had seen and some discussion with Scott Bellware helped convinced me to give Selenium a shot. After 30 minutes of Googling for “how to get started with selenium” and finding nothing useful, I pulled up their built in test suite and just started hacking away at it. It only took about 10 minutes to get my first test up and running, from there.

At this point, I’m still a complete n00b in terms of UI test automation with Selenium, but I at least understand how to get a test suite setup and running. With that in mind, I wanted to share my own quick-start tutorial to try and help others get up and running with Selenium Core as quickly as possible.

 

Step 1: Download Selenium Core

Ok, that’s probably a Step 0… but I’ll go head and include it anyways. Head on over to SeleniumHQ and download the latest Selenium Core. At this time, I’m using v1.0.1. Once you have that package downloaded, you can unzip the contents into a folder that is accessible to your web server. You’ll end up with a folder structure that contains everything you need to get started, and have all of the built in selenium tests available for you to run.

image

You can open the index.html file in a browser and see all of the tests run. This isn’t terribly interesting to me, though, since it only shows the tests running and not how to work with them or write them.

 

Step 2: Setup an ASP.NET MVC Application

For this example, we are just using the default project structure for a sample ASP.NET MVC web application. I called my project “MyFirstMVCSeleniumTest”.

I’m not going to touch any of the forms and database related stuff, though, so you don’t need to worry about putting an actual database behind the site, if you don’t want to. I’m also not going to both with a unit test suite at this point. After all, this is not a production-ready example test. I’m only intending this as a very quick “how to get started with selenium” tutorial.

Once you’ve got the MVC project setup, you should be able to hit the home page of the app and see this:

image

 

Step 3: Setup A Test Suite Web Application

For this step, we’re going to add another Web Application to our solution in Visual Studio. My test suite was called “MyFirstMVCSeleniumTest.UITestSuite”.

I like to set up a separate project so that I don’t have to ship my UI test suite with the application if I don’t want to. It also helps me to easily see where my test suite is vs. the actual application. It really doesn’t matter if you add an MVC or WebForms web app for this step – we’re not going to use either of those UI technologies. In fact, once you have the web application for your test suite created, you can delete all of the default files and folders that were created – we don’t need them.

The end result of having both projects in your visual studio solution should look something like this:

 image

Notice that the UITestSuite project is empty – no App_Data, no web.config, no nothing… we don’t need any of that because we’re dealing with plain HTML files, not an ASP.NET codebase. The reason I used an ASP.NET application here, was to make management of the files easier in Visual Studio.

 

Step 4: Add Selenium To Your UI Test Suite Project

Remember those 7 folders and 6 files that you unpacked at the root level of the selenium distribution, as shown above? The good news is you don’t need most of that. All you need for this basic test suite is the “core” folder. Copy the “core” folder from the location that you unzipped it, into your UITestSuite. For clarity on what this folder actually is, I renamed it to “Selenium”.

The result looks like this:

image

 

Step 5: Setup A Test Suite

This was probably the most difficult part of figuring out how to use selenium, for me. I think it took all of 5 minutes to realize that I need to have a “test suite” and a “test” as separate HTML files, so that selenium knows what to run.

To start with, create a plain old HTML file called “TestSuite.html” in the root of your UITestSuite project. This will contain the location of the actual tests, so that selenium knows what tests to run. The contents of this file are about as simple as you can get: an html table with a link to a test file.

Here’s the screenshot of the project:

 image

and here’s the contents of the TestSuite html file:

   1: <html>

   2: <head>

   3:     <title>Test Suite</title>

   4: </head>

   5: <body>

   6:     <table id="suiteTable" cellpadding="1" cellspacing="1" border="1" class="selenium">

   7:         <tbody>

   8:             <tr>

   9:                 <td><b>Test Suite</b></td>

  10:             </tr>

  11:             <tr>

  12:                 <td><a href="./SomeTest.html">My First MVC/Selenium Example Test!</a></td>

  13:             </tr>

  14:         </tbody>

  15:     </table>

  16: </body>

  17: </html>

 

Step 6: Add A Test

You can see in the html from the test suite that I have included a file called “SomeTest.html”. This is a test that selenium will execute for us. We can include multiple tests in a test suite – we just need to add new table rows pointing to the other test files. For now, though, let’s just start with the one test.

image

A test in selenium is not a simple, single command. Rather, it is a series of simple commands that are formatted in three columns of a table. These columns contain the commands and up to two optional parameters. You can read all about the ‘seleniumese’ over at the documentation site.

To start with, we’ll create a simple test that does a few things with our ASP.NET MVC website:

  1. Open the website
  2. verify that we’re on the ASP.NET MVC site by looking for the “Welcome to ASP.NET MVC!” text
  3. verify that we have an “About” link
  4. click on the “About” link and wait for the about page to load
  5. Verify that we are on the About page by looking for the “About” text
  6. Verify that we are on the About page by looking for the “About Us” title in the browser window

The HTML that we need to put into our SomeTest file, is this:

   1: <html>

   2: <head>

   3:     <title>My First MVC/Selenium Example Test!</title>

   4: </head>

   5: <body>

   6:     <table cellpadding="1" cellspacing="1" border="1">

   7:         <tbody>

   8:             <tr>

   9:                 <td rowspan="1" colspan="3">This Is My First MVC/Selenium Example Test!<br></td>

  10:             </tr>

  11:             <tr>

  12:                 <td>open</td>

  13:                 <td>http://localhost/MyFirstMVCSeleniumTest</td>

  14:                 <td></td>

  15:             </tr>

  16:             <tr>

  17:                 <td>verifyTextPresent</td>

  18:                 <td>Welcome to ASP.NET MVC!</td>

  19:                 <td></td>

  20:             </tr>

  21:             <tr>

  22:                 <td>verifyElementPresent</td>

  23:                 <td>link=About</td>

  24:                 <td></td>

  25:             </tr>

  26:             <tr>

  27:                 <td>clickAndWait</td>

  28:                 <td>link=About</td>

  29:                 <td></td>

  30:             </tr>

  31:             <tr>

  32:                 <td>verifyTextPresent</td>

  33:                 <td>About</td>

  34:                 <td></td>

  35:             </tr>

  36:             <tr>

  37:                 <td>assertTitle</td>

  38:                 <td>About Us</td>

  39:                 <td></td>

  40:             </tr>

  41:         </tbody>

  42:     </table>

  43: </body>

  44: </html>

You should be able to correlate the commands and parameters from this file – represented as table rows and columsn – to the list of steps that I outlined above.

Now I know that this isn’t the most exciting test in the world. I wasn’t going for exciting. In fact, I wasn’t even going for ‘valuable’ in this test. I only wanted to show how simple it is to get a test like this up and running.

 

Step 7: Run The Test

Running a selenium test suite is as easy as hitting a web page.

First, Make sure you have built the ASP.NET MVC app and that you can open it in your browser. Then we’ll point your browser to the location of the test suite. To tell selenium to run, we want to hit the “Selenium/TestRunner.html” file that is included in the “core” folder that we renamed to “Selenium”. The TestRunner file expects to find a “test” parameter attatched to the end of it, to tell it what test suite to run (if you don’t provide this, it will default to something like Test.html).

Assuming that we are using localhost IIS for our test suite, the URL would look like this:

image

Notice the “../” in the test parameter – this is because the “TestSuite.html” file lives one folder above the TestRunner.html file.

By pulling up this URL, you should see the following screen:

image

To run the test, click the “Play all” ( image )button in the Selenium TestRunner section of the windows. You’ll see the bottom half of this page switch over to your MVC app, the page will change from the home page to the About us page, and the tests in the middle top of the screen should all turn green!

image

If you would like to “see” all of this happen, you can move the slider in the Selenium TestRunner from Fast over to Slow. You can also check the “Highlight elements” box, which will turn the element yellow when it is being worked on. This will let you see what’s really going on, in much more detail.

 

Step 8: Verify The Results

After running the test suite, we can see some results and metrics shown in the Selenium TestRunner section of the screen.

image

It took a total of 5 seconds to run this test suite, i had 1 test run and there were 4 commands that executed and passed.

Did you notice that the number of “commands” is not the same as the number of steps in our test? This is because some of the steps in the test are actions that do things, not commands that check for things. In our list of 6 steps, step #1 and #4 are actions – open the website, click the about link – and the other 4 steps are the commands that assert or verify state. You can see this distinction in the center column of the test suite, as light green items for the actions and green items for the commands:

image

Download The Sample Code

If you’re interested in downloading the complete solution that I created, here, you can grab it from my GitHub account:

Download My First MVC Selenium Test

I did this in Visual Studio 2008 with Service Pack 1 and the ASP.NET MVC Framework v1.0.

Conclusion

Congratulations, you now have a working Selenium Core test suite for your ASP.NET MVC application! There are lot of lessons to learn beyond just these basics, though. We have to consider filling out forms, submitting them, working with ajax callbacks, integrating the test suite into a continuous integration server, and many many other aspects of our testing strategy.

As a final note – I have no misunderstandings about the limitations of HTML based testing, like this. The more we tie ourselves to the specific HTML of a page, the more brittle our tests become. I don’t want anyone to think that the examples I have shown here are in any way production-ready. This was only a “get started fast” tutorial, created by a guy who is just now learning how to use Selenium. Please remember that good tests take a lot of effort to plan and maintain over time. There is no shortcut for the planning and maintenance of the tests. It seems, though, that selenium is a great way to simplify the writing of the tests.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in .NET, Model-View-Controller, Productivity, Quality, Selenium, Test Automation. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Allen P

    I’ve been using Selenium for a while, and really like testing UI with it.
    One feature I wanted to point out, is the capability to write the tests in c#. I’ve found this a lot easier than writing the tests I html format, and it allows you to more easily test intricate details.

  • http://www.lostechies.com/members/derick.bailey/default.aspx derick.bailey

    @Allen P,

    Yeah, I saw the Selenium IDE stuff but haven’t taken the time to play with it, yet.

    Are you integrating the IDE version with a CI server to do automated test execution? I’d love to see some info on that.

  • http://blog.dynamicprogrammer.com Hernan Garcia

    To integrate selenium with your CI process (or at least run it via CI server) we write our test in c# (using nunit). Some info here:
    http://seleniumhq.org/docs/appendix_installing_dotnet_driver_client.html

  • Allen P

    Derek,

    I have some Java tests (jUnit) using Selenium RC that is being run on the Hudson Continious Integration tool. I haven’t tried it with .NET technology, but imagine that you could get it set up on Cruise Control.Net.

    Here is a brief snippet using c#, http://seleniumhq.org/docs/05_selenium_rc.html#c. You’ll want to organize these tests carefully, as it is unlikely that you would want them to run with all of your other unit tests.

    I’ve also used Selenium as a way of scripting repetitive clicking tasks, but that’s really not it’s intended use.

    Thanks for your article, it was a great read. Hope this helps.

    Allen

  • http://www.davetheninja.net Dave the Ninja

    I had started working on a library for integrating selenium remote and FluentHTML (MvcContrib) for the use of fluent coded selenium tests for my applications.

    I have just moved to Hong Kong and am awaiting my dev boxes arrival so I look to get cracking on the library again.

    Have a look here to see what I have done so far (filed under FluentSelenium)

    http://code.google.com/p/davetheninja/source/browse/#svn

    As I said its still in its basic state, but I believe it will save me a lot of time in the future + its type safe and refactorable.

    Let me know what you think

    david at davetheninja dot net

    Dave the Ninja

  • http://blog.troytuttle.com Troy Tuttle

    Very nice. Thanks for the kick start on UI testing.

  • http://dgoyani.blogspot.com/ Dhananjay Goyani

    Well, I never used the way you mentioned – writing test actions in HTML file.

    Rather I tie Selenium as a library in nUnit test suite. As a developer it is lot more easier to describe tests in C# than managing the HTML file. The great advantage of creating scripts in C# is that you can leverage all your BL and DL while assertion. It’s really fun.

  • http://igorbrejc.net Igor Brejc

    I agree with Dhananjay, I think very soon you will find that the HTML test code approach is very problematic – the tests are fragile and difficult to maintain.

    I strongly recommend looking at the Google’s PageObject pattern: http://code.google.com/p/webdriver/wiki/PageObjects

  • jspringer

    Awesome example…great idea for using ASP.NET website as well…I took a few minutes to create a repeater and a code behind on a page to see if ASPX pages would work, and of course they do, so you could create some reusability snippets…

    Markup..
    < %@ Page Language="C#" AutoEventWireup="true" CodeBehind="ASPXTest.aspx.cs" Inherits="Rock.Ihr.BusinessSolutions.Crib.UI.Web.Mvc.Tests.ASPXTest" %>





    This Is My First MVC/Selenium Example Test!
    < %#Eval("Action") %> < %#Eval("WhatToDo") %> < %#Eval("ThirdColumn") %>


    CodeBehind for ASPX page…
    public partial class ASPXTest : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    SetupRepeater();
    }
    public class DummyClass { public string Action { get; set; } public string WhatToDo { get; set; } public string ThirdColumn { get; set; } }
    private void SetupRepeater()
    {
    var listOfObjects = new DummyClass[] {
    new DummyClass {
    Action = “open”,
    WhatToDo = “http://localhost:55244/crib/admin/”,
    ThirdColumn = “”
    },
    new DummyClass {
    Action = “verifyTextPresent”,
    WhatToDo = “You are logged into Crib as an Administrator. The \”Admin Only Tools\” in the NavBar are available to you.”,
    ThirdColumn = “”
    },
    new DummyClass {
    Action = “verifyElementPresent”,
    WhatToDo = “link=Impersonations”,
    ThirdColumn = “”
    },
    new DummyClass {
    Action = “clickAndWait”,
    WhatToDo = “link=Impersonations”,
    ThirdColumn = “”
    },
    new DummyClass {
    Action = “verifyTextPresent”,
    WhatToDo = “Change Impersonation”,
    ThirdColumn = “”
    }
    };

    rptInstructions.DataSource = listOfObjects;
    rptInstructions.DataBind();
    }
    }

  • rohith

    good for beginners..

  • Uchiha Itachi

    I can’t help to think about UI test control.