How Easy Automation testing of web application with Visual Studio – Part II

In the previous post, we saw how can we test a windows application using Coded UI. In this post, I am trying to describe how we can do automation testing of a web application .

So, let’s start step by step for

Automation testing of a web application.

 

Although, I am showing Automation testing in this post  but the project template  is more than that. I will describe in future posts for load testing & web performance related concept as well using this great tool but In this post, we are just concentrating automation testing of  a website.

 

Step1:- Open visual studio and add a new Project. This time, we are using “Web Performance and load test project”  as shown in below screen. Although, this template is self-descriptive.

 

1

 

Step 2: – When you click on this you will get the following screen.

2

 

Step 3:- Here, if you saw above image you will notice we have to click on recorder button. When you click this button, you will find internet explorer screen with record, pause & stop options as shown in below figure.

 

3

 

Step 4:- Here we have to provide the URL which we want to test. In this example, we are using http://nerdTechies.com and for a demo purpose, we are clicking on different menus and searching with a specific value. All our activities which we will perform will be recorded by the recorder and we can easily see those steps as well. As you can see in below figure.

 

4

 

Once we done with our basic test cases we have to press STOP button as shown in the above image. when we click STOP button our Internet explorer browser will be close and we will get all the recorded action in our Visual Studio IDE as shown in below image.

5

 

Step 5:- Now, in the next step we defiantly want to cross check all the action which we performed and recorded by the recorder in Internet Explorer. for this, we  just need to click on Run Test button  as shown in below figure.

6

 

Step 6:- When we Click run test option the IDE run all the recorded steps in the same sequence and if everything as per the expected result it will display “Passed” status for that particular recorded test case as shown in below figure.

7

 

I hope you like this simple way of recording your test steps and cross check it again and again by just pressing Run test button.

 

Although, Just wanted to share as mentioned in the introduction of this post as well. This project can do much more this but for now , I am showing a small part of it.

 

I hope you will use it soon. I appreciate your inputs for this post.

 

Enjoy !!

RJ !!!

How to make UI Testing Easy with CODED UI ( A Glimpse)

In the last post, we discussed how to be a smart developer in testing. To continue that smartness Smile I am sharing one of the best tools which are CODED UI. Smile

 

A CODED UI is again a record and play concept what I mean here that you can record steps of your test case and play again and again whenever you want.

 

I know I made a simple statement for CODED UI but it is much more than that and you have full control on it. You can write your own custom code in CODED UI.

 

Although, this post is just starting or a basic information of CODED UI but it has many more things which we will cover later in our posts.

 

To understand, It better let’s start a step by step process. In this step by step process, I am using Visual Studio 2015. 

 

The best part of CODED UI is that you can record test cases of windows & the web both the application.

 

Here we are taking the simple example of UI recording which is open a Calculator and perform the operation and another one is the open website in the browser and record the steps (in Next post).

 

Step 1:- Open Visual Studio 2015. Create New Project and select CODED UI project as shown in below image. Here if you there are other options as well like Unit Test Project, Web Performance, and Load Testing Project.

So, those have their own unique properties which we will discuss soon.

Indiandotnet_CodedUI_Step_1

 

Step 2:- When you click the OK button in above window you will get project is opened in Visual studio with certain predefine features and a new pop option appeared as shown in below figure.

It has 2 options which are self-explanatory. We are going with default option which is “Record action, edit UI map or add assertions.

Indiandotnet_CodedUI_Step_2

 

Step 3:-  When you click this option then on your machine near task bar you will find UIMAP Windows. Which is responsible for recording your action.

Indiandotnet_CodedUI_Step_3

 

Step 4:- You can add Coded UI Test file by right clicking the project or add new Item option. This file contains all the recording steps. If the UImap is already open then you have to close it first and then add Coded UI test file.

Indiandotnet_Coded_UI_Step4

 

Step 5: Once you added the file and UImap will appear then next step is start recording your steps of test cases. Here we are going to open the calculator and adding 2 numbers. so firstly click on the Record button of UIMap so ,it will start recording the screen. If you see below screen you will find the recording button change to the pause button.

Indiandotet_UI_Step5

 

Step 6:- Now we clicked on calculator button. It appears in front of us. We added first value 10 and then second value 20 and clicked on an equal button. then press pause button (as our first test case is completed). As the best practices we have to go step by step and record it but for this example, I am not following that. If you click the button nearby pause button as shown in below figure you will get all the recorded actions so far

 

Indiandotnet_Coded_UI_Step_6

 

Step 7:- Once you confirm with your Recording then you can click on Generate Code button and if you have any doubt then you can re-record or delete that particular recording. If you observe above steps I deleted Click  ‘1’ button explicitly. I have recreated recording then clicked on Generated Code button. When I clicked I got the following option. Here you need to Provide method name and then save it.

Indiandotnet_Coded_UI_Step_7

 

Step 8:- Now to check whether the added value result is correct or not whether we have to fail this test case or pass we have to click on the guy as shown in below figure

Indiandotnet_CodedUI_8

 

Now, this is bit tricky part you have drag cross arrow from this control to Calculator’s result window and highlight as show in the below figure.

Indiandotnet_Coded_UI_10

 

Once this done then add Add Assertion by clicking the Add Assertion option as shown above image. When you click you will get the following screen

Indiandotnet_Coded_UI_9

 

Once the above step is created Just click on Generate code once again. So that it will add Assertion logic as well.

So , far we have created a Coded UI test cases. Now , the challenge is how to cross check it. So here are  steps.

Click on Test Option from Visual Studio menu  click on Run option then click on  All Test case options.
You will find all the steps that you perform (recorded) earlier will re-run and after execution, you can cross check. The test explorer.

If all the steps of test cases pass then according to assertion logic our test case will pass. as shown in below figure.

Indiandotnet_Coded_UI_12

 

In this way, We have captured a windows application test cases and record and played accordingly. In the next step, I will show you how easy to cross check web application as well.

Please, provide your input what you think of this article.

 

Happy weekend!

Enjoy.

How easy to reduce efforts in retesting a asp.net web application?

 

Most of the time when you write code for a web application you need to test it again and again. You have to run a whole flow of positive or negative test cases to check whether your application is working or not.

Now suppose your application have 20 pages and you need to traverse each individual page and may be perform some operation and on each change of your development you need to perform same thing.

sometimes, this thing will irritate you and you will skip testing which may be harmful because most of the time it happens when you skipped something Smile you took a deep breath  and at that moment your application crashed Sad smile.

So , as a responsible developer we do not have to skip any test scenario but next question is how to reduce this effort which you feel boring sometime.

I can say we can reduce this effort by a installing a simple  Firefox add-in which is absolutely free. The add in “Selenium add in”

you can download it from https://addons.mozilla.org/en-US/firefox/addon/selenium-expert-selenium-ide/

once you have installed this you will find the selenium icon near by search bar as shown below

selenium_icon

when you click this icon you will get a selenium interface as shown below

selenium_interface

The basic concept of this tool is what ever you will run in browser it has capability of recording those steps so it is just play button and pause button game, no rocket science. You can easily run and use this.

I am sure it will reduce your testing effort and when when selenium ide will play your test cases you can take a deep breath and enjoy your coffee and snacks.

I hope this tip may be helpful to you somewhere.

Happy Holidays.

Regards,

RJ