In Focus

Automated UI Test With WatiN and Specflow in .Net: Part 1

In this article we will learn how to automate a UI test with WatiN and Specflow in MVC .Net.

In these days if we cover most of our code with tests we can guarantee our code works. If ours tests are working well it says a very important thing, we are delivering a good build and the future changes will be costless! To accomplish this scenario I study some tools to improve my test cover and I will share them with you.

WatiN

Let's start by WatiN (pronounced as What-in), it provides a way to automate tests using IE or Firefox using .NET.

Creating a Simple Project

Now we will use WatiN in a simple example. Use the following next procedure and fun!
  • Create an empty Web MVC project
  • Create a new controller (I named it WatinController)
Add the 2 actions “Page1” and “Page2” (right-click action and select “Add View”).




  • Create index view.

  • Create Page1 view.

  • Create a Page2 view (like a page1), but with the title page2.
  • Run your project and see if everything is right!


Creating a test project

Here we will use WatiN to test our application.

Create a UnitTestProject



Installing WatiN

First we need to install WatiN in our project test.
  • In Nugget type “watin”, and install it as in the following:

  • Go to references and find Interop.SHDocVw and change the property “Embed Interop Types” to false:


Testing

Now we use watin to load our index page and check if the “title” is correct. We can do this like this:
  1. [TestMethod]  
  2. public void TestIndex()  
  3. {  
  4.     //opening IE browser at url http://localhost/WatinSpecflowSample/Watin (our index page link)  
  5.     IE browser = new IE("http://localhost/WatinSpecflowSample/Watin");  
  6.   
  7.     // getting title of page using the element ID  
  8.     string title = browser.ElementWithTag("h2", Find.ById("title"), null).Text;   
  9.   
  10.     //Checking if page have de title Index  
  11.     Assert.AreEqual(title, "Index");  
  12.   
  13.     //Closing the browser  
  14.     browser.Close();  
  15. }  
If we run this test you will see the browser opening and closing. And checking the result of test is passed. \o/



Let's put some difficulty in our tests. Create a new Test Method named by “TestClickPage1”, and try this:
  1. [TestMethod]  
  2. public void TestClickPage1()  
  3. {  
  4.     //opening IE browser at url http://localhost/WatinSpecflowSample/Watin (our index page link)  
  5.     IE browser = new IE("http://localhost/WatinSpecflowSample/Watin");  
  6.   
  7.     //get link page1 and click  
  8.     browser.Link("page1").Click();  
  9.   
  10.     //wait for page open  
  11.     browser.WaitForComplete();  
  12.   
  13.     // getting title of page using the element ID  
  14.     string title = browser.ElementWithTag("h2", Find.ById("title"), null).Text;  
  15.   
  16.     //Checking if page have de title Index  
  17.     Assert.AreEqual(title, "Page1");  
  18.   
  19.     //Closing the browser  
  20.     browser.Close();  
  21. }  
Running it you will see the result.

Doing the same for the Page3 link, the test will fail and this shows how important it is to cover our application with tests. We can anticipate this error and fix it before generating a build. I know, writing tests seems boring, but if we do this in the begining of the project then this eventually becomes normal. The purpose of this article is just to show how to use WatiN to test our UI web application.

In the next article I will integrate Specflow and WatiN to create a more understandable test.