Setup Selenium, NUnit, and Visual Studio

Update

This article is still relevant but a more comprehensive guide exists at http://timothycope.com/c-selenium-automation. This new guide also covers Page Object Design Pattern (POM) and Selenium Server (Grid).

Background

Selenium automates browsers. That’s it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) also be automated as well.
http://docs.seleniumhq.org/

NUnit is a unit-testing framework for all .Net languages. Initially ported from JUnit, the current production release, version 2.6, is the seventh major release of this xUnit based unit testing tool for Microsoft .NET. It is written entirely in C# and has been completely redesigned to take advantage of many .NET language features, for example custom attributes and other reflection related capabilities. NUnit brings xUnit to all .NET languages.
http://www.nunit.org/

Install NUnit

You will need NUnit to execute your automated tests. Download the win MSI file and run it. Select a complete installation when prompted.

Setup Visual Studio

  1. Open Visual Studio
  2. Click File, click New, and select Project…
  3. In the left navigation pane, expand Templates, then Visual C#, and then select Class Library in the center window pane.
  4. In Package Manager Console, type Install-Package Selenium.WebDriverBackedSelenium
  5. In Package Manager Console, type Install-Package Selenium.Support
  6. In Package Manager Console, type Install-Package NUnit

Creating Your First Test

I renamed Class1.cs to AutomatedTest01.cs and that is reflected in the code below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using OpenQA.Selenium;
using OpenQA.Selenium.IE;
using NUnit.Framework;
using OpenQA.Selenium.Firefox;

namespace SeleniumClassLibrary
{
    [TestFixture]
    public class AutomatedTest01
    {

        IWebDriver driver;

        [TestFixtureSetUp] // http://www.nunit.org/index.php?p=testFixture&r=2.5
        public void TestSetUp()
        {
            // Set the IWebDriver to use FireFox
            driver = new FirefoxDriver();

            // Set the timeout to 30 seconds
            driver.Manage().Timeouts().ImplicitlyWait(new TimeSpan(0, 0, 30));

        }

        [Test] // http://www.nunit.org/index.php?p=test&r=2.5
        public void NavigateToGoogle()
        {
            // Navigate to URL
            driver.Navigate().GoToUrl("http://www.google.com");

            // Assert that the IWebDriver window's title is "Google"
            Assert.AreEqual("Google", driver.Title);
        }

        [TestFixtureTearDown] // http://www.nunit.org/index.php?p=fixtureTeardown&r=2.5
        public void FixtureTearDown()
        {
            // Closes all windows associated with the IWebDriver
            driver.Quit();
        }
    }
}

Save and build the project.

Run the Automated Test

  1. Open NUnit
  2. Click File and select Open Project…
  3. Find the .dll from your Visual Studio Project
  4. Click Run in the center window pane

Importing Code from Selenium IDE for Firefox

You can download the Firefox add-on that allows you to record-and-click basic webpage tasks.

  1. In Selenium IDE:
    1. Click File, select Export Test Case As…, and select C# / NUnit / WebDriver
  2. You can copy+paste the code into a new .cs file in your project or import the cs file
  3. Save and Build your project

Note: You may have to make some manual changes to the code to have it playback correctly in NUnit.

using System;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading;
using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.Support.UI;

namespace SeleniumClassLibrary
{
    // Genereated by Selenuim IDE for Firefox
    [TestFixture]
    public class AutomatedTest02
    {

        private IWebDriver driver;
        private StringBuilder verificationErrors;
        private string baseURL;
        private bool acceptNextAlert = true;

        [SetUp]
        public void SetupTest()
        {
            driver = new FirefoxDriver();
            baseURL = "http://timothycope.com/";
            verificationErrors = new StringBuilder();
        }

        [TearDown]
        public void TeardownTest()
        {
            try
            {
                driver.Quit();
            }
            catch (Exception)
            {
                // Ignore errors if unable to close the browser
            }
            Assert.AreEqual("", verificationErrors.ToString());
        }

        [Test]
        public void The01Test()
        {
            driver.Navigate().GoToUrl(baseURL + "/");
            Thread.Sleep(2500);
            driver.FindElement(By.LinkText("ABOUT TIMOTHY COPE")).Click();
            Thread.Sleep(2500);
            for (int second = 0; ; second++)
            {
                if (second >= 60) Assert.Fail("timeout");
                try
                {
                    if (IsElementPresent(By.XPath("//img[@alt='logo']"))) break;
                }
                catch (Exception)
                { }
                Thread.Sleep(1000);
            }
        }
        private bool IsElementPresent(By by)
        {
            try
            {
                driver.FindElement(by);
                return true;
            }
            catch (NoSuchElementException)
            {
                return false;
            }
        }

        private bool IsAlertPresent()
        {
            try
            {
                driver.SwitchTo().Alert();
                return true;
            }
            catch (NoAlertPresentException)
            {
                return false;
            }
        }

        private string CloseAlertAndGetItsText()
        {
            try
            {
                IAlert alert = driver.SwitchTo().Alert();
                string alertText = alert.Text;
                if (acceptNextAlert)
                {
                    alert.Accept();
                }
                else
                {
                    alert.Dismiss();
                }
                return alertText;
            }
            finally
            {
                acceptNextAlert = true;
            }
        }
    }
}

Solution on GitHub

You can download the project I made from GitHub:
https://github.com/kirbycope/SeleniumClassLibrary

Create a BootStrap Enabled MVC5 Web Application

About MVC

The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating MVC-based Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication. The MVC framework is defined in the System.Web.Mvc namespace and is a fundamental, supported part of the System.Web namespace.
http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview

About Bootstrap

Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
http://getbootstrap.com/about/

What you need to get started

Creating your new project

With MVC4 templates you had to remove/replace the css and html, which was a time consuming practice. The MVC4 template require a lot more work so MVC5 is a boon for developers needing to crank out multiple sites.

  1. Open Visual Studio
  2. Click File, hover over New, and select Project
  3. In the left navigation tree go to click Installed, select Visual C#, then select Web
  4. Name your project and click the OK button
  5. Select MVC as the template and click the OK button
    • You can also select Web API and Unit Test in the add folders and core references section
      • Unit tests are a must for professional/production projects
      • The Web API is a RESTful http service that can be called from other projects like a mobile app
  6. Press [F5] to preview the web application in debug mode
  7. (Optional) Change the web.config file’s database settings
    • By default, the template will create and mount databases as needed.
    • Change the connection string if;
      • You cannot create and mount databases programmatically (an issue I ran into with Arvixe web hosting)
      • You are using database first rather than model first or code first

Further Reading

Getting started with MVC5

  • An in-depth guide from Microsoft

Bootstrap Components

  • An overview of everything included in Bootstrap