How to list all Github Repository in Icenium to clone

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

I wrote first part of Github and Icenium series here .After this post I got a question from a reader that

“I do not remember Github repository URL. Is there any way I can see all my repository listed and can further select one of them to clone in Icenium “

I replied yes you can do that. Let us see below how could we do that?

Launch Graphite and click on Clone.
In Clone option select Github tab
You will be prompted for Github Authorization.

After successful authorization, you will find all repository under that account listed. You can choose any repository to clone in Icenium

In this way you can clone Github repository in Icenium. I hope you find this post useful. Thanks for reading.

How to automate “once login and perform many operation Test ” in Test Studio

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

I was talking to a customer and they wanted to test a CRM application. There test scenario more or less like below image. They wanted to execute Entry Test and Exit Test only once and Main Test any number of times. When we do manual testing of this scenario this is usual kind of test cases. However automating this test is not that simple. In this post we will take a look that how Test Studio simplify automating this type of test scenario.

Let us assume you need to automate a test for following scenario,

Test Step 1: Login to application

Test Step 2: Perform various operations

Test Step 3: Logout from application

Requirement is that user will Login only once, perform operations any number of times and then logout from application. Essentially step 1 and step 3 will be executed by user only once and step 2 will be executed any number of times. Iteration of step 2 depends on external data source. This may be usual automated testing scenario you always come across.

Now let us assume that you have recorded test as following,

In above test we are data driving step 6. We are performing usual data driven testing. Problem with this approach is that each steps will get executed number of times depending on rows in data source. So if there are 10 rows in test data then this each test steps will be executed 10 times.

Our requirement is different in above test steps we want to execute only test step 6 ten times and other test steps only once. Let us see how we can do this.

Step 1: Move test steps you want to execute many times in different test. Let us call this test as INNERTEST

Step 2: Make sure to data bind the INNERTEST

Step 3: Record OUTERTEST. In OUTERTEST record all the steps you want to execute only once.

So in above recorded test we can record step 6 as separate test. We are calling that test as INNERTEST. This test is data bind.

This INNERTEST will contain all the test steps we want to execute repeatedly. In this case we have test step in INNERTEST.

After recording INNERTEST, let us go ahead and record OUTERTEST. We need to put all test need to executed only once part of this test. So all test steps for Login and Logout will be part of OUTESTEST. You notice that we want these test steps to be executed only once.

Now from ribbon add a Test as step in OUTERTEST.

You need to choose INNERTEST as test as step to be part of OUTERTEST

We have added INNERTEST as test as step in OUTERTEST at step 6.

Now on execution of test you will find that all test steps are getting executed only once however test steps of INNERTEST will executed many times depending on number of rows of data source. So we can conclude that

In this way you can work with multilevel test using Test Studio. I hope you find this test useful. Thanks for reading.

How to set up Icenium project from Github repository

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

In this post we will take a look on setting up project in Icenium from Github repository. Let us assume you have a github repository as given in below image. You need to set up project in Icenium based on this repository.

First step is, launch Icenium and click on Clone

After clicking on Clone, select Repository option and give Git repository URL here. By default Icenium will give you project name and you can change project name if required.

You will get message Cloning remote repository.

After successful cloning you will find project in project navigator of Icenium.

In this way you can clone a GIT repository as Icenium project. I hope you find this post useful. Thanks for reading.

How to work with Loops in Test Studio

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

You may come across many scenario in which you need to execute a particular test several number of times or in other words you need to execute certain number of test steps in a loop.

Let us consider following test. These are automated test steps for login functionality. Assume, you need to run step 2 to step 7 5 times with same data. In this scenario you need to execute from step 2 to step 7 in loop.

To automate above scenario Test Studio provides you out of box solution. You can automate above scenario with Logical Steps. In Test view you will find Logical Steps in Add section.

To put test steps in loop select loop Logical step from Add section and add a Logical Test Step in test. After adding logical step you can change Count. We are setting count as 5 here.

After setting Count drag and drop test steps you want to execute under test. Here we need to drag and drop step 2 to 7 in the loop. After dragging and dropping test steps test will look like below image. Now test step 2 to 7 will be executed 5 times.

In this you can execute a test in loop. Loop Logical steps should be used when you need to execute same test with same data many number of times. I hope you find this post useful. Thanks for reading.

Kendo Editor Wrapper for ASP.NET MVC

Posted by Lohith

Overview:

This is the seventh post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely Editor. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is Editor Wrapper?

First lets understand what is a Editor control all about. The Editor allows users to create rich text content by means of a WYSIWYG interface. The generated widget value is comprise of XHTML markup.

Fig 1: Kendo Editor

The Editor Wrapper for ASP.NET MVC is a server side wrapper for Kendo UI Editor which is a JavaScript based widget.

Basic Usage:

In order to use the kendo editor on any web page, we will use the Editor wrapper available as part part of the Kendo Wrappers for ASP.NET MVC. Following is the code for the basic usage where in we just instantiate the kendo editor and give it a name while setting the width & height.

	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.HtmlAttributes(new {style="width:740px;height:440px"})

	)

view raw KendoEditor-BasicUsage.cshml hosted with ❤ by GitHub

Note that you need to set the Name for the editor. Other wise we will be issued a InvalidOperation exception at runtime which will say “Name cannot be blank”. Following is the screen shot of the output:

Fig 2: Kendo Editor Basic Usage

Tools Bar:

The top bar on the editor is known as Tools bar. By default the editor will display the basic necessary tools without we explicitly specifying them. The editor supports the following tool options:

1. Bold	13. InsertUnorderedList
2. Italic	14. InsertOrderedList
3. Underline	15. Indent
4. Strikethrough	16. Outdent
5. FontName	17. FormatBlock
6. FontSize	18. CreateLink
7. FontColor	19. Unlink
8. BackColor	20. InsertImage
9. JustifyLeft	21. SubScript
10. JustifyCenter	22. SuperScript
11. JustifyRight
12. JustifyFull

Table 1: Tool Bar Configuration Option

So here is the code to get all the tools on the tool bar:

	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.Tools(tools => tools
	.SubScript()
	.SuperScript()
	)
	.HtmlAttributes(new {style="width:740px;height:240px"})

	)

view raw KendoEditor-AllToos.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

Fig 3: All Tools on the Tool Bar

Note: In order to get all the tools we just added Subscript() and Superscript() options. That is because, editor control will default add tools from 1 to 20 in the above table. So we just added missing tools. If you want to keep only some tools on the tool bar, you will need to first clear the tools and then add the tool option you want. Following code will add only FontName, FontSize, ForeColor and BackColor to the tool bar:

	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.Tools(tools => tools
	.Clear()
	.FontName()
	.FontSize()
	.FontColor()
	.BackColor()
	)
	.HtmlAttributes(new {style="width:740px;height:240px"})

	)

view raw KendoEditor-ToolsOptions.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

Fig 4: Custom Options in Tool Bar

Custom Tool Bar Options:

So far we saw the default tool bar options available in Kendo. What if we want to have a custom tool bar option. Lets say we want to provide a button to draw a horizontal rule in the editor – it can be done by making use of the CustomButton() support in the editor. Here is the code to do that:

	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.Tools(tools => tools
	.Clear()
	.FontName()
	.FontSize()
	.FontColor()
	.BackColor()
	.CustomButton(cb => cb
	.Name("HorizontalRule")
	.ToolTip("Insert a horizontal rule")
	.Exec(@<text>
	function(e)
	{
	var editor = $(this).data("kendoEditor");
	editor.exec("inserthtml",{value:"<hr />"});
	}
	</text>)
	)
	)
	.HtmlAttributes(new {style="width:740px;height:240px"})
	)

view raw KendoEditor-CustomButton.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

Fig 5: Custom Button in Tool Bar

Adding Snippets:

Snippets are short piece of text and can be anything. For e.g. an email signature is a text snippet we normally create and store in our mail programs. The mail programs inserts the signature whenever we compose new mail. Similarly Kendo Editor provides ability to create snippets and enable end users to pick the snippet to insert as text. Following is the code:

	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.Tools(tools => tools
	.Clear()
	.Snippets(snippets => snippets
	.Add("Signature","<p>Regards,<br /> Lohith G N,<br /><a href='mailto:lohith.nagaraj@telerik.com'>lohith.nagaraj@telerik.com </a></p>")
	.Add("Kendo Online Demos"," <a href='http://demos.kendoui.com'>Kendo online demos</a> ")
	)
	)
	.Value(@<text>
	Put the cursor after this text and use the "Insert HTML" tool.
	</text>)
	.HtmlAttributes(new {style="width:740px;height:240px"})
	)

view raw KendoEditor-Snippet.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

Fig 6: Snippets Feature

Custom Styling of content:

So far we have seen some of the core functionality of the editor. Another awesome feature of editor is the support for custom styling to the content. You can pretty much define your own style classes and within the editor provide it like a drop down option. Editor supports Styles() option to provide the custom style. Here is the code to achieve this:

	<!--Editor Styles-->
	.hlError
	{
	background-color:#fea;
	color:#f33;
	}

	.hlOK
	{
	background-color:#aef;
	color:#060;
	}

	.inlineCode
	{
	font:bold 12px monospace;
	}

	@* Code *@
	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.Tools(tools => tools
	.Clear()
	.Styles(styles => styles
	.Add("Highlight Error", "hlError")
	.Add("Highlight OK", "hlOK")
	.Add("Inline Code", "inlineCode")
	)
	)
	.StyleSheets(styles => styles.Add(Url.Content("~/Content/EditorStyles.css")))
	.Value(@<text>
	Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
	In this version, the Editor provides the core HTML editing engine, which includes basic
	text formatting, hyperlinks, lists,
	and image handling. The widget <strong>outputs identical HTML</strong> across all major
	browsers, follows
	accessibility standards and provides API for content manipulation.
	</text>)
	.HtmlAttributes(new {style="width:740px;height:240px"})
	)

view raw KendoEditor-CustomStyles.cshtml hosted with ❤ by GitHub

If you look at the code what we have done is, created 3 styles for the demo sake and created a new stylesheet named editorStyles.css. We use the Styles() options to add the custom styles and use the Stylesheets() option to add reference to EditorStyles.css. Note the styling Kendo has added to Styles drop down. while setting it up – we just had given a text value pair for a style. Kendo applies the style for the drop down item – neat I say. Here is the output of the above code changes:

Fig 7: Custom Styling of content

Handling client side events:

Kendo widgets being client side controls, we have very rich API support on the client side. One of the API feature is that of client side event handling. Editor supports the following events:

change – Fires when Editor is blurred and its content has changed
execute – Fires when an Editor command is executed
paste – Fires before when content is pasted in the Editor
select – Fires when the Editor selection has changed

Here is the code to hook on to the client events for the editor:

	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.Events(events => events
	.Change("change")
	.Execute("execute")
	.Select("select")
	.Paste("paste")
	)
	.Value(@<text>
	Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
	In this version, the Editor provides the core HTML editing engine, which includes basic text
	formatting, hyperlinks, lists,
	and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers,
	follows
	accessibility standards and provides API for content manipulation.
	</text>)
	.HtmlAttributes(new {style="width:740px;height:240px"})
	)

	</p>
	<div class="console"></div>
	<script>
	function change(e) {
	$(".console").append("change <br />");
	}

	function execute(e) {
	$(".console").append("execute command :: " + e.name + "<br />");
	}

	function select(e) {
	$(".console").append("selection change <br />");
	}

	function paste(e) {
	$(".console").append("paste <br />");
	}

	function contentLoad(e) {
	$(".console").append("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
	"</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b> <br />");
	}

	function error(e) {
	$(".console").append("Loading failed with " + e.xhr.statusText + " " + e.xhr.status + "<br />");
	}
	</script>

view raw KendoEditor-Events.cshtml hosted with ❤ by GitHub

Here is the output of the above code changes:

Fig 8: JavaScript Event Handling

Accessing Editor from client side:

As mentioned in the previous section all Kendo widgets support a rich API and once instantiated we can grab the control at runtime. Here is the JavaScript code do that:

	<p>
	@(
	Html.Kendo().Editor()
	.Name("kEditor")
	.HtmlAttributes(new {style="width:740px;height:240px"})
	)
	</p>
	<script>
	$(document).ready(function () {
	var editor = $("#kEditor").data("kendoEditor")
	editor.value("Text added at runtime")
	});
	</script>

view raw KendoEditor-API.cshtml hosted with ❤ by GitHub

As you can see, on document ready we grab the element which has the id kEditor and then use jquery’s data() method to get the Kendo Editor component. After that we set the content of the editor using the value() method. The client side API support a rich set of methods, properties and events. For a complete API listing, check out our docs page: Kendo Editor API.

Summary:

In this post we looked at one more wrapper namely Editor. It is very easy to work with Editor ASP.NET MVC wrapper and with just couple of lines we have a fully working editor set up. Also we saw how the control supports a rich set of client side API to work with. Hope this post helps you with your endeavor on Kendo Editor.

Webinar Recap: Automated Functional Testing can be affordable with Test Studio

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Ninja Enough? – Telerik India Webcasts (April – May 2013)

On 21^st March 2013 we at Telerik India hosted webinar on Automated Functional Testing Can be affordable with Test Studio . We thank you for attending the webinar. In this webinar we tried a story way of presenting and on poll 75% audience liked that. This data was very motivating.

Find Test Studio resources at below links,

Download free trial from here

Learn more about Test Studio here

Read documentation here

In webinar, we started from scratch and did demo on

Recording a Test
Working with verification steps
Integrating bugs with TFS and Team Pulse
Data Driven Testing
AJAX Testing

Find below presentation from webinar,

If you have any technical query feel free to reach me at

Dhananjay.kumar@telerik.com

And for any sales related query feel free to send a mail to

Abhishek.kant@telerik.com and sales@telerik.com

Thanks once again for attending webinar. See you in next webinar.

How to perform localization on RadGrid for ASP.NET AJAX

Posted by Lohith

Overview:

I attended TechEd India 2013 which was held at Bangalore on Mar 18 & 19. I was talking to couple of developers on their experience with our Rad Controls. One of the developer with whom I was talking to wanted to know if localizing string is easy or difficult with our Grid. He was talking about the static texts which we have in our Grids like – message shown on the group bar, message shown in mouse over of columns for sorting, message shown in our filter menu items etc. His project was looking at using a 3rd party control and localizing the controls with minimal effort was one of the main criteria for them. I told him that it was as easy as creating one file and adding it to the project. In this post we will explore our option on localizing Telerik controls in general the RadGrid.

Global Resource Files:

When you download and install the RadControls for ASP.NET AJAX, we also ship resource files for all our controls and is installed in “App_GlobalResources” folder. Below is a screen shot of the resource files installed on your hard disk:

Fig1: Global Resources for RadControls

Notice the resource file for Grid high lighted. The file name is RadGrid.Main.resx. This contains all the resource string for neutral culture and will be used by our RadGrid control.

When you create a ASP.NET project, you can add certain specific named folders which the ASP.NET recognizes and specific types of content can be kept in this folder. One such folder is App_GlobalResources and can contain resources namely .resx files and .resources files. These are compiled into assemblies with global scope. These resources are strongly typed and can be accessed programmatically also.

Steps involved in Localizing the RadGrid

Following steps are involved in localizing the RadGrid:

Add RadGrid.Main.resx file to your application’s App_GlobalResources folder
Create a language pack i.e. RadGrid.Main.<locale id>.resx and add it to App_GlobalResources folder
Set the culture to use on the RadGrid

We will go through the above steps one by one in following sections.

1. Adding RadGrid resource files:

Open Visual Studio and create a new project. Select Telerik > Web template and “C# RadControls Web Application”.

Fig2: New Project Dialog

Once Visual Studio finishes creating the project, solution will look like below:

Fig3: Solution Explorer

Open Default.aspx and add a RadGrid from the toolbox. We will bind the grid to Products table from Northwind database. We will make use of OpenAccess to create a Data Model or Domain Model and OpenAccess Data Source for data binding. If you are not familiar with OpenAccess, it is a free ORM tool from Telerik. I encourage you to download and play with it. Add a new item to the project of type “Telerik OpenAccess Domain Model”.

Fig4: Add New Item Context Menu

For this demo, I have selected only Products table and created my OpenAccess Domain Model. Here is how the domain model should look like now:

Fig5: OpenAccess Domain Model Diagram

After adding the domain model, do a build to make sure everything is ok. Next, open the Default.aspx in designer mode, click on the smart tag of RadGrid, the smart tag property window will be shown. From the choose data source dropdown select <New data source> option. You will be presented with “Choose a Data Source Type” window. Select OpenAccessLinqDataSource. Specify name for the data source and proceed. Next in “Select OpenAccess Context Type” window, it will automatically select the domain model we have added and select the products table as the entity and click Next. In “Configure Data Selection” window select the columns that needs to be shown on the grid and click Finish. Now we have a data source and our RadGrid is bound to that data source. Enable Paging, Sorting, Grouping and Filtering on the grid by using the smart tag.

Fig6: RadGrid Smart Tag

Add a new folder called “App_GlobalResources”. Add RadGrid.Main.resx file from App_GlobalResources folder found in your RadControls for ASP.NET AJAX installation folder and paste it in your applications App_GlobalResources folder. At this point run the application and you will see the below output of the grid:

Fig7: RadGrid output

Notice the static text on – grouping bar, Sort tool tip (when you mouse over on the columns), filter conditions and the page size. So we will see how to localize these.

2. Add language pack:

For the purpose of this blog post I will try to create a French language pack or resource file and the RadGrid will use the strings from it to display the static text. In order to add a language pack for RadGrid, copy the RadGrid.Main.resx and paste it in App-GlobalResources folder. Rename the pasted file to RadGrid.Main.fr-FR.resx. Here fr-FR is the locale that we would like to localize the grid. This can be any other locale that you need to support in your applications. If you double click RadGrid.Main.fr-FR.resx in Visual Studio, you will see the resource editor open and show the strings as a grid. Here is the screenshot of that:

Fig8: RESX Editor

As you can see we see the string name and value for that. Since we copied from language neutral resource file, the values are all in English locale. Now all we are required to do is to change the value of the keys to French locale. I will use Bing translator to translate the values and replace them in the RadGrid.Main.fr-FR.resx. After translating some of the values to French, here is how the RESX file looks like:

Fig9: French Resource File

3. Set locale on RadGrid

In order for the RadGrid to pick up the right locale you can either set the Culture property of the RadGrid explicitly or set the Culture property to CurrentUICulture. For the purpose of this demo, I am explicitly setting the culture of RadGrid to fr-FR i.e. French.

Fig10: RadGrid Culture property

Here is the RadGrid with culture set to fr-FR:

Fig11: RadGrid localized to fr-FR locale

Note: The column headers are not localized because I haven’t provided any strings for them. You can pretty much use the same global resource file and use the resource strings instead of the static text. This blog post was to show how parts of RadGrid can be easily localized.

Summary:

With simple 3 steps we were able to localize different texts of RadGrid without much hassle. All we needed to do was to create a language pack and keep it in App_GlobalResources folder. All Telerik controls respect the ASP.NET folder and know how to use the resources from this folder. Hope this helps you all those folks who are looking at localizing our controls. Do leave any feedback if you may have.

Ninja Enough? – Telerik India Webcasts (April – May 2013)

Posted by Abhishek Kant

The last series of webcasts from Telerik India in the months of Feb – March saw great response from the the community. One webcast had over 250 people registered for the webcast. Encouraged by the response to the series, we are pleased to announce the series for April – May 2013.

We hope that we will be able to deliver some Ninja techniques to you via the webinars. One technique we intend to cover is how to win more girlfriends/ boyfriends or if you are married – how to be an awesome spouse! I am not going to spill the beans now but if are interested, you may want to attend the webinars.

Some of you had a query on the cost of attending the webinars. The webinars are free to attend!

The webinar timings are all in Indian Standard Time (i.e. GMT + 5:30 hrs). So, pick your poison from below:

Date	Time (IST i.e. GMT + 5:30 hrs)	Topic	Audience
April 11th	3:00 – 4:00 PM	Easy HTML5 Data Visualization with Kendo UI DataViz	HTML 5 & Mobile Developers
April 18th	3:00 – 4:00 PM	Solving Agile Project Management Challenges with TeamPulse	Developers & Project Managers
April 25th	3:00 – 4:00 PM	Building Windows 8 Apps faster with RadControls	Windows 8 Developers
May 16th	3:00 – 4:00 PM	Easing Web Content Management with Sitefinity
May 23rd	3:00 – 4:00 PM	Building Windows Phone 8 App using KendoUI Mobile	Windows Phone Developers
May 30th	3:00 – 4:00 PM	MVVM & Validation in HTML 5 apps with Kendo UI Web	HTML 5 Developers

Join our friendly evangelists @debug_mode and @kashyapa as they guide you to being awesome in your team! The evangelists like to make everyone happy. They will be selecting two active participants from the webinar and sending them the much in demand Telerik Ninja T-Shirt. you will be coming, right?

Join me for the webinar Automated Functional Testing Can be affordable with Test Studio

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

When: Thursday, March 21, 2013 3:00PM to 4:00PM India Time

Should your functional testing only be manual? Are you shying away from testing only because of the cost considerations? Are you paying through your nose to maintain your testing tool? In this webinar, we will talk about an affordable solution that covers the testing capabilities you need. If you are enthusiastic about finding bugs in software and find solace in testing, we have a Ninja tool for you. Explore this chart buster software – Telerik Test Studio from the comfort of your seat. We are excited to invite you for a webinar on Telerik Test Studio.

In this webinar we will cover and see how easy it is to do

Automated Web Testing
Data Driven Testing
Working with Test Lists
Test Result Analysis and Reporting
Ajax Testing
Performance Testing

To attend webinar register here

I am excited to see you in webinar on 21^st March 2013 at 3 PM India time.

How to ask questions in Telerik Forums?

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Recently one of our customer sent me mail that how could I ask questions in Forums. She was a fresher with assigned job to work on Rad Controls for AJAX. I helped her over the call and found a step by step guide could be useful for many Telerik products users. To ask question in forums follow following steps,

Step 1

Navigate to http://www.telerik.com/ and login with your Telerik Credentials. You should able to see your name at the right top.

Step 2

Next select the specific product for which you want to ask question. Let us say you want to ask question for any of the DevTools. From top click on Product Families and select DevTools.

Step 3

Now from menu select Community & Support and then choose Forums.

Step 4

Next you need to choose specific product. Let us assume you want to ask question for Rad Controls for AJAX. For that choose ASP.NET AJAX

Alternatively you can search in entire forum also. For that put your search term and click green Search button.

Step 5

Now you need to select category of your question. For instance if you want to ask question for Calendar control then choose Calendar from listed option. After choosing category click on green New Thread button to ask question.

While asking question following points are important,

· Give descriptive title of the question.
· Embed code using code button from menu
· Be specific in asking question.

At end make sure to check subscribe me to this thread such that on every reply you get a mail.

In this way you can ask questions in forum. I hope you find this post useful. Thanks for reading.

How to use a smaller test as Step of bigger test in Test Studio

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Let us assume a scenario that we need to automate test of a complex functionality. This complex function may be constituted of other small functions. Now all small functions are tested separately. To automate test of this bigger function we have two choices

Record all steps in bigger function testing
Use various smaller functional tests as a step in bigger function testing.

Test Studio provides us a feature in which we can use a functional test as step of another functional test. You can get that option in Add section of ribbon.

Assume we need to test CRM application. We have separately created automated test for Login functionality of application as given below,

And steps of this test is recorded as following

Next we want to record test for bigger function Add Contact in CRM. To do that let us create a test as following,

Now we want to use Login Test as a step in Add Contact test. To do this double click on Add Contact test to open the test. After that from Add section in ribbon select Test as Step option.

You will get option to choose from all the tests added in the test project. In this case there is only one test other than Add Contact Test. So select Login Test to add as step in Add Contact test.

After adding Login Test as step right click on the test and from context menu select Run then To here option.

On selecting this option Test Studio will first execute all the steps of Login Test and allow you to record further steps for Add Contact test.

In this way we can add a test as step in Test Studio to use a functional test as part of another bigger functional test. I hope you find this post useful. Thanks for reading.

Working with Manual Steps in Test Studio

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Recently I was talking to a customer. Customer was automating there CRM functionally test and they had to perform test steps as following,

Step 1: Navigate to portal

Step 2: Login to portal

Step 3: Browse through portal

Step 4: Logout from portal

They recorded test to automate as given in below image

Now they had requirement that they want to perform login steps manually. In other words they wanted to manually perform steps 2, step 3 and steps 4. They had a question that

“Can we add manual steps to an automated test in Test Studio? “. Answer is “YES”.

To add manual step Add section in ribbon and select more option. In drop down you will find Manual Step option to add.

Select Manual Step to add a manual step in Test Steps. Give desired name of manual step and click on OK to add it.

After adding manual step deleted automated test steps for login. After adding manual step and removing automated test steps for login test will look like following

Now while running test after step 1 Test Studio will wait to perform manual step. In manual step login to CRM can be done manually.

After manually login further test steps will be executed automatically.

In this way I answered customer to work with manual steps in automated test. I hope you find this post useful. Thanks for reading.

Download Source codes, Slides and Recording from 7th march Webinar: Developing Applications for Nokia Lumia using Telerik Controls

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

On 7^th March 2013 we at Telerik India hosted webinar on Developing Applications for Nokia Lumia using Telerik Controls. We appreciate that you joined in. We hope that webinar was useful to you. If you have any further queries, please feel free to reach us.

Learn more about Rad Controls for Windows Phone here

Download trial from here

Download webinar resources from here

In webinar we explored various controls with focus on following three controls.

Conversation View
QR and Barcodes
Different kind of charts

Please find recorded webinar below.

Learn more about Rad Controls for Windows Phone here

Download trial from here

Download webinar resources from here

If you have any query feel free to reach us. You can reach me any time at dhananjay.kumar@telerik.com .
Follow @debug_mode

Revamping Web Applications: Proposed Enhancements

Posted by ShantanuChandra

Read – Revamping Web Applications Part-4 Performance testing

Read – Revamping Web Applications Part-3 Software Architecture

Read – Revamping Web Applications Part-2 Features

Read – Revamping Web Applications Part-1 Overview

This post talks about enriching the Event-Networking web application. The enhancements have been categorised into following:

1. Improving UX (User Experience)

2. Improving Functions

3. Improving Performance

4. Multi-Platform

UX Improvements

From my point of view the current user experience is too voluminous. The css needs to be restructured to use latest standards. All the margins have to be changed from fixed to dynamic so that no space is left unused on the user screen, when the web application is shared amongst different devices. The webpage will be enhanced to Responsive Design.

The input controls like buttons, drop-down list and others need to be smartened and made noticeable. To be specific let’s begin page wise:

Directory
1. The photos need to be of the same size for all the delegates. For people who do not set their pic will have different default image for men and women.
Session
1. The data is currently being filtered in the ListView. We will replace this control with the RadListView which is a part of a bundled form of “RadControls for ASP.Net AJAX” toolkit.
2. We will provide paging option in the list view.
Inbox
1. Inbox will carry any updates and notifications for the events delegate has subscribed to.
2. Add a link to Tasks so that contents of a message can be directly filled in the tasks and create an instant task for that.
Tasks
1. Empower user to add priority to tasks with different symbols to give a better visual appeal.
2. Modify the calendar controls for better presentable view.
My Profile
1. Currently this page is too long with the options to “Add Your Blogs”, Personal details, etc. all in extended view. This page needs better layout.
Login and Signup
1. The basic functionality of Forgot My Password needs to be added.
2. While Signup, option of filling in your complete profile should be provided and whether the delegate wants to be displayed as public.

Functionality Improvements

This Event-Networking is presently made for just one event. We have to extend it for non-singular event. One of the major changes will be ajax-ifying the data controls. This would help us improve drastically on performance as now only partial-page rendering will happen.

Directory
1. The aspect of social gaming in the web application is not fool-proof. A person can easily figure out the method of scoring. Thus it should be based on more general parameters and updates to each delegate should be fired only once a day.
Session
1. Provide filtering on date, duration, title and venue columns. Currently, only sorting is possible.
2. Add a pager index so that a user can track his movements. This can be implemented using Telerik AJAX Navigation Components.
Inbox
1. Currently, there is no paging as expected. We should make it more intuitive. There are two ideas to remodel.
First, to have a tab in the left and message being displayed in the right pane. Second, whichever message is selected, that will get expanded and a new control will be added to the existing list generated.
2. We will put following in the navigation menu such as Message, Contact Request, Meeting Request, Sent and Draft as sub-menu added instead of clustering all of them in the inbox.
Tasks
1. The task-list should have filtering and sorting capabilities and Add New Task should be another navigational tab under Tasks. This page has the maximum white space when you create a task.
My Profile
1. We will provide tabs like View, Update, Remove and Change Password.
2. Currently, we do not have “delete” option once you add links to your blogs. There is only an update option. This needs to be changed.

Improving Performance

We have already done the functional testing of our existing web application in our previous post. It defines the benchmark for our application. As we improve the UX and functionalities we keep comparing our modifications. This will help us explain whether we have improved just on user experience or also gained on time constraint. Two important features we are looking forward to implementing minification and bundling which would help the speeding.
– We will minify the style sheets and scripts. We will also bundle the style sheets and scripts.

Object Relational Mapping (ORM).
We are currently using Linq to SQL as our partial ORM. But it has a greater overhead. We will deploy OpenAccess ORM which will provide us a Data Application Layer (DAL).
ORM Caching.
Another improvement would be to cache static data. This can be achieved using L2-Caching which is a part of OpenAccess itself. It increases data fetch drastically.
Caching.
We will be using page caching or output caching as per the need.

Multi-Platform

We will generate companion hybrid app for different platforms. There is potential to generate Windows 8 and Windows Phone 8 application.

Conclusion

This post concentrates on improvements, enhancements and extensions for the Event-Networking web application. We will look at each one of these aspects and explore further.

Read-Revamping Web Applications Part-6 : Adding DAL (Data Access Layer)

Revamping Web Applications: Performance Test

Posted by ShantanuChandra

Read – Revamping Web Applications Part-3 Software Architecture

Read – Revamping Web Applications Part-2 Features

Read – Revamping Web Applications Part-1 Overview

We are in a process of revamping the application. To understand whether we have developed a better application than already existing, we need to set benchmark on the functional aspect and performance of the application. To set the benchmark, we need to perform various kind of tests like functional test, performance test etc.

We will start with setting performance benchmark. For that we need to do PERFORMANCE TESTING of existing application. We are going to use Telerik Automated Testing tool “Test Studio “for this purpose.

Test studio can perform following types of testing

Automated functional test of web application
Performance test
Load test
WPF test

Learn more about Test Studio here

Using Test Studio Performance benchmark can be set in three steps

Create a valid functional test
Configure performance counter
Execute performance test

Here is the screenshot of how the Test Studio defines it.

Step 1: Automated functional test of web application

In order to create valid functional test, we recorded the test on existing application as following,

1. Open Test Studio

2. Configure whether its trial and purchased.

3. Now let’s create a new project for our Event-Networking (EN) application
Go to File -> New
or just click Create New Project in the centre of the screen

4. New Project Pop-Up window would appear
specify the Project Name. Here we have named it “ENTest”
specify the Location to store the Projects. Here we have chosen the default path which is “C:\Users\Shantanu\Documents\Test Studio Projects”

5. Getting started window would appear. To explore more about Test Studio click here.

6. Now we are under Project tab.
Right click the project node created by default and click Add New Test.

7. Next we are on Select Test Type window. We will select Web Test option because we are creating a performance testing module for testing of our web application. Here let’s name it “AttendeeProfile_IE&Chrome” as we will be doing the performance testing on both the browsers.

8. Once the Web Test has been added to Project, hover over it. This will show a menu with Record and Play button. Press Record button. This will open Internet Explorer. Here we enter the URL of our website needed for testing. Then perform all the tasks to be recorded and tested. Here we have taken the attendee-list which is the default page of the web-application.

9. After recording all the steps close the Internet Explorer and all events will be recorded and now we will enter the Test tab.

10. From the Quick Execution toolbar select a browser and Run the testing environment. This process will let you know whether all your event are being executed successfully in that particular browser. Here Internet Explorer browser is used.

11. Once the testing is done it will prompt you to save it. If all the events have passed, a check sign would appear left to all the events. If the process has terminated without completing then a cross sign will appear at the event where the execution has stopped and the rest of the events would have a negative sign depicting that part is untouched. To save the Web Test or not depend on the developer but I recommend saving it.

12. While recording, we sometimes need to simulate some of the events to be real, like clicking button, selecting options from drop-down lists, typing etc. We can do so by selecting SimulateRealTyping for texts and SimulateRealClick for buttons. These are the two simulations we have used in our current test.

Step 2: Configure Performance Counters

Within the Test Studio in the menu bar you will see the Performance tab. Here we need to configure the setup parameters and performance counters.

1. Click Configure button.

2. Give you settings a name. I have named it“My Computer”. Check the Gather Performance Data and click Add Computer. In the Computer section, enter the IP address of your website which you want to test and click connect. Here 127.0.0.1 is used because my web application is on the localhost. 127.0.0.1 which defines the IP of my own PC. You should get a confirmation in red, left to the button.

The most important part is to select the parameters which is under the Performance Counters tab. The counters used in this project are shown below. You even have the functionality to calculate the Time To First Byte (TTFB).

Step 3: Execute Performance Test

1. The next and final step is to start the Performance testing by clicking the Quick Run button.

Internet explorer will open again but this time you do not have to type or click anything as the Web Test is automated. Once the IE closes we will see the following window.

This is an intermediate screen and will disappear in few seconds.

2. Next up is the actual overview of all the events. On execution we can see time taken by each test step or user actions. This view only shows the Total time taken at server and client side and the size of the packets of each event. To get the details of each event you can either click the Details button in the Ribbon categorized under Views or simply click the event to get individual data.

3. To see graph of all the event we need to click on Select All tab. We could also get performance over a range of restricted timeframe.

4. Here the performance testing is executed for all the functions from the application. The right-pane shows the performance counters. These parameters are plotted on X-Y (Red-Orange) axes graph with X being the ‘Seconds from beginning of the test’ and Y being “Percentage”. The plotted graph remains static on the screen whereas the function in the left-pane are scrollable. This will help depict the functions which are causing spikes by synchronizing the timeline with the graph; as X axis is same for both constraints.

5. Next we have a History tab which keeps a track of all the testing done till date and all the reports generated. Here, we can see different Test Time and a graph plotted with X-Y axis being Profile timeline and Test Time. This gives us a general idea of how our existing application is behaving.

We can also compare two Profiles at different times and look for the common loopholes to be solved.

We could set one of the profiles as the benchmark for all the other profiles just by clicking the hour-glass symbol on the left.

Conclusion

In this post we set a benchmark by executing Performance Testing of the web application and in the next blog we will talk about possible enhancements and extensions which can be made in the existing web application.

Read – Revamping Web Applications Part-5 Proposed Enhancements

Helping Ninja Technologists

Developer Experiences powered by GTM Catalyst

Month: March 2013

How to list all Github Repository in Icenium to clone

How to automate “once login and perform many operation Test ” in Test Studio

How to set up Icenium project from Github repository

How to work with Loops in Test Studio

Kendo Editor Wrapper for ASP.NET MVC

Webinar Recap: Automated Functional Testing can be affordable with Test Studio

How to perform localization on RadGrid for ASP.NET AJAX

Ninja Enough? – Telerik India Webcasts (April – May 2013)

Join me for the webinar Automated Functional Testing Can be affordable with Test Studio

How to ask questions in Telerik Forums?

Step 1

Step 2

Step 3

Step 4

Step 5

How to use a smaller test as Step of bigger test in Test Studio

Working with Manual Steps in Test Studio

Download Source codes, Slides and Recording from 7th march Webinar: Developing Applications for Nokia Lumia using Telerik Controls

Revamping Web Applications: Proposed Enhancements

Revamping Web Applications: Performance Test