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

These days if we cover most of our code with tests we can guarantee our code works. If our 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 with 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 is 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 an 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 check the result of the test is passed. \o/
 
 
Let's put some difficulty in our tests. Create a new Test Method named “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 at the beginning 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.