Click here to Skip to main content
15,935,520 members
Articles / DevOps / Testing
Tip/Trick

A Basic MVC Application and UI Testing through Selenium Web Driver

Rate me:
Please Sign up or sign in to vote.
4.63/5 (9 votes)
30 Nov 2014CPOL3 min read 43.4K   1.5K   12   4
This is a simple application developed using C# MVC and jquery for basic CRUD operations. The application can be unit tested using selenium web drivers.

Introduction

This tip describes basic CRUD operations applied to a List of employees. The same operations are then unit tested through Selenium Webdriver.

Background

The application uses simple MVC concepts like Model binding to Views, Posting data to controllers and basic element discovery using selenium and performing operations through the driver. The selenium driver also takes screenshots of the operation and stores @ designated location.

Using the Code

The attachment contains a solution which should be opened in Visual Studio supported with C#4.0.

Steps

  1. Open the solution in VS2012 or preferably IDE supporting MVC4.0.
  2. Use Nuget manager to download Selenium drivers and support classes. After download completes, attach them to the TestApplication.Test project.

    Image 1

  3. Download web drivers (Internet Explorer, Firefox, Chrome)
  4. Whichever browser you should be already installed in your system. I have used Internet Explorer in my application here because it's pre installed. :)
  5. There are two projects in the solution - one is the MVC project and other one is the Test project.
  6. For the test projects to be run, the web project should be running the IISExpress. You can also configure to run it in the IIS or dev server that comes with VS. But one thing to look here is Selenium web driver receives a URL of the website as input. So be sure to edit the test project code to match with the running URL of the web project.

    I have used IISExpress here. Go to web project (MVCApplication) properties and set the IISExpress as the server and port. We are almost done here.

    Image 2

  7. Compile the project. Right click on the MVC project and click view (preferred browser). Viola! the web site is up.
  8. We can perform add /edit /delete operations here. Please test all the functionality manually once to confirm that everything all set.
  9. Create two folders in your C drive as shown below. The selenium driver should contain the path of the webdriver (Internet Explorer or Chrome). So please copy the webdriver that you have downloaded in step 3 to the this location. The other folder will be used as storing screenshots while selenium tests the application.
    C#
    private const string IE_DRIVER_PATH = @"C:\SeleniumDriver";
    private const string ScreenShotLocation = @"C:\ScreenShot";
  10. Once you make sure that the project is working fine, now is the time to test through selenium.
  11. The selenium is basically a test project. So we can use the "Run tests" feature to run the testcases.
  12. Go to EmployeeControllerTest file and right click -> Run tests. That should fire up the selected web driver and run the test scenarios.
  13. If everything goes fine, the browser will fire up and the operations will be performed automatically.
  14. Finally, we can see the screenshots @ the screenshots folder.
  15. Currently, this is written for Internet Explorer, but can be run for Firefox or Chrome using corresponding web drivers.

ScreenShots

Image 3

Image 4

Image 5

Points of Interest

The MVC project uses Model binding technique and communicates using JSON object. The full power of Jquery Ajax is used here. The views contain the JavaScript code for communication and data binding.

The test project uses various ways to find out elements in the web site such as Id, Name, TagName, script, etc. It also uses the explicit delay concepts with boundary conditions. Handling Ajax calls and Alert popups are also shown here. Finally, the way to take screenshots at certain checkpoints are also described.

Conclusion

In this example, only the basic implementation of using selenium is demonstrated, however the actual usage is limitless.

History

  • 1st December, 2014: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
I am a software engineer working in an MNC. I have 4 years of experience in various web technologies.

Comments and Discussions

 
QuestionRun tests Pin
NortonC4-Nov-15 22:41
NortonC4-Nov-15 22:41 
AnswerRe: Run tests Pin
SrikantSahu9-Nov-15 19:48
SrikantSahu9-Nov-15 19:48 
Hi,

Please open the EmployeeControllerTest file in the visual studio. Once it opens, right click inside the viewing area of the code and 'run tests' should show up.

You can also do it from VS2012 menu. TEST -> Run -> All Tests. It will open the "Test Explorer". From the test explorer also tests can be run.

Thanks
Srikant Sahu
GeneralMy vote of 5 Pin
Member 112769101-Dec-14 0:35
Member 112769101-Dec-14 0:35 
QuestionThanks Srikant. Pin
Member 112769101-Dec-14 0:30
Member 112769101-Dec-14 0:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.