Telerik Test Studio participated at STC 2013

Learn more about Test Studio here

See Photos from Event here

We are happy to announce that Telerik team was present at STC 2013 on 4-5th December in Bangalore. We had great time talking, interacting and advocating our products to esteem audience. Telerik had a booth at the event and we witnessed great response from audience at booth.

Download 30 days free trial of Test Studio from here

image

It was one of the premiere event with large number of audience. There were industry known speakers and audience from profile of Test Director to junior level Test Professional.

clip_image002

Our Evangelist Dhananjay Kumar did two presentations at event. At first day he gave a Test Studio tool demo. Second day he had a talk on “A Look on Automated Web Testing”. In talk he focused on how to handle dynamic id and Ajax in web test automation.

clip_image004

We gave away more than 100 Telerik Ninja TShirts and Nexus 7 Tablet to winner of lucky draw.

clip_image006

We had great time at the event. If you have any further queries feel free to write us at Dhananjay.kumar@telerik.com

Download 30 days free trial of Test Studio from here

Advertisements

Handle Dynamic Id with ease in Test Studio

Learn more about Test Studio here

Download 30 days Free Trial Here

Okay, so I will start this post saying there is not a single golden rule to handle dynamic id while automating Test. It depends, I repeat it depends. In this post I will focus on various ways you can handle dynamic id in Test Studio.

clip_image002

In this post we will learn to deal with dynamic id in three different ways,

  1. Handling with changing setting at Test Project level
  2. Handling with changing setting at Element level
  3. Handling with Coded Step

Scenario # 1 : Test Project Level

Let us say you are sure that id is going to be dynamic throughout the application. And you cannot rely on id to identify element. In this scenario Test Studio allows you to configure Identification Logic at the Test Project level. You can change that in Project Settings.

By default Test Studio finds and element on following identification logic. It search on the id AND tagname. This is set for the Test Project level.

clip_image002

Now we know that id for application in test is going to be dynamic and we want to change the FindLogic to some other tag. In other words we want to change default Find Logic for whole Test Project. To do this navigate to Project Settings.

You can browse to FindLogic setting of Test project by clicking on

Project -> Show Setting

clip_image004

In Project Setting dialog box click on identification logic. Here you can find identification logic and change it as per requirement to your project.

clip_image006

As you can clearly see that by default Test Studio find an element on its Id. If you consider that Name of the elements are not expected to change frequently then you can consider to change project setting to find an element on its Name attribute.

To change FindLogic select any attribute then click on up/down arrow to change its position. For example Name is at second from top. To make it first attribute on which Test Studio will find element select Name and then click on up arrow button to bring it at the top in the list.

clip_image008

In this way you can configure FindLogic. You may notice that if required you can add new Tag to list as well. After reconfiguring Identification Logic you can find that now FindLogic for whole Test project (recording which will happen after changing logic) has been set to name and tagname.

clip_image010

Scenario # 2 : Element Level

Second scenario could be you need to change identification logic only for a particular element. You do not want to change identification logic for whole Test project rather for a particular element. Test Studio allows you to do that as well. To do this select element from Element Repository and right click. From context menu select Edit Element.

clip_image001

When click on Edit Element, next you will get various options to Find Element.

clip_image003

Let us Find Element in Live Version. To find element in Live Version make sure that application is already open in browser. Since already application is opened here so select open Current Page and select application from drop down.

clip_image005

After navigating to application you will find Elements current FindLogic.

clip_image007

To delete current logic move mouse and you get option like below to delete current filter.

clip_image009

After deleting both filter let us use XPath to find element.

clip_image011

This is what all you need to change FindLogic for a particular element. You can see in Element Repository that FindLogic has been changed to XPath.

clip_image013

Scenario # 3 : Code Step

So far in above two scenario we saw that if Id is dynamic we can change it to some other attribute of element like Name, XPath etc. Now there could be scenario that you cannot rely on any attributes.

XPath gives you positional based FindLogic. Consider scenario of a Grid. In Grid you need to automate test to find an Employee ‘e2’. Say e2 is second employee in database and is listed in the second rows of Grid. You can put verification step as below,

clip_image001[6]

Now above test will fail if order of elements in Grid is changed. So in this kind of scenario you cannot rely on either id or XPath of element.

There could be many ways you can fix and automate test to find whether employee e2 exists in db or not. Test Studio allows you to write your custom logic using Coded Step. So we can write a coded step as below.

clip_image002[6]

In above coded step, we are finding reference of Grid then searching Employee ‘e2’ in whole grid and then asserting if count is equal to 1 to verify existence of Employee e2.

So in this scenario we are not finding element on any of the attribute and writing our own logic in script to find element.

Conclusion

We learnt in this post that there are various ways to deal with dynamic id. Again there is not a single bullet proof method to deal with dynamic id. It depends on the scenario that how dynamic id cane be handled while automating test.

Learn more about Test Studio here

Download 30 days Free Trial Here

Learn about Telerik Testing Solution at STC 2013

Learn more about Test Studio here

We are happy to inform that Telerik team will be present at STC 2013 on 4-5th December in Bangalore. Do join us to learn more about Test Studio, along with other products at the event.

We invite you to join us at Telerik booth and explore Test Studio with us.

image

We are giving away one Nexus 7 Tablet as well at the booth. So if you come, interact and explore Test Studio with us then you have a chance to win Nexus 7 Tablet.

clip_image002

Our Evangelist Dhananjay Kumar will present on “A Look on Automated Web Testing”. In this session he will use Test Studio as tool to demonstrate the concepts. He will touch on following topics,

  • Getting started with Test Automation
  • Data Driven Testing
  • Ajax Testing
  • Grouping of Tests and Scheduling

We are excited to see you at event. If you have any further queries feel free to write us at Dhananjay.kumar@telerik.com

Creating RSS Reader App using Telerik Icenium in Three simple steps

Learn more about Icenium here

In this post we will learn to create RSS reader App in Telerik Icenium. While creating this app we will have learning on creating following topics,

  • Kendo DataSource
  • Kendo Template
  • Kendo ListView

In this post we will create RSS Reader of https://telerikhelper.net/. Final output should be as follows,

clip_image001

Step 1: Create DataSource

To start with we will use YML to read RSS feed. Let us configure URL of Yahoo Query and RSS feed of desired site. Below I have configured that for https://telerikhelper.net/.


var url = "https://telerikhelper.net/feed/";
var proxyUrl = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + encodeURIComponent(url) +"'";

Next we need to create Kendo DataSource. That can be created using proxyUrl. RSS feed returns XML and we need to configure that while creating DataSource.


var telerikHelperRSSDS = new kendo.data.DataSource({
 transport:{
 read:{
 url: proxyUrl,
 dataType: "xml"
 }
 },
 schema:{
 type:"xml",
 data:"query/results/rss/channel/item",
 model:{
 id:"guid",
 fields:{
 title: "title/text()",
 pubDate: "pubDate/text()",
 story: "description/text()",
 url: "link/text()",
 id: "guid/text()"
 }
 }
 }
});

 

There are couple of points worth discussing about above code snippet,

  • We are creating schema reading title , published date , story and url of the post
  • Id of model is set to guid
  • Setting up data type as xml
  • data is set as query/results/rss/channel/item

 

Step 2: Create Template

Once DataSource is created next we need to create Template. Kendo Template decide how data will be displayed. We are displaying title and publication date of post.

You can see that

</span>

<script id="telerikhelperrsstemplate" type="text/x-kendo-template">

 <p class="titlecs">#=title#</p>
 <p class="datecs">#=pubDate#</p>

 </script>

Step 3: Creating ListView

In last step we need to create ListView. ListView is the Kendo UI Widget in which we will display RSS feeds.

ListView can be created as follows,

 <div data-role="view" id="telerikhelperrssview" data-title="TelerikHelper">
 <ul id="telerikhelperview"
 data-source="telerikHelperRSSDS"
 data-endlessscroll="true"
 data-template="telerikhelperrsstemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

In ListView we are setting

  • Data source
  • Data template
  • Data style

That’s it. We need to perfrom only these three steps to create RSS Reader App using Telerik Icenium

clip_image001[6]

I hope you find this post useful. Thanks for reading.

How to send Email using Telerik Everlive from Cross-Platform Mobile Application

Have you ever come across scenario in which you need to send an Email from your app? There are various ways you can do that. Some of them are as follows,

  1. Sending Email using PhoneGap API
  2. Sending Email using HTML5
  3. Delegate Send Email task to a server

In this post we will learn to send Email using Telerik Everlive. Everlive is a cloud based Backend as a Service. It provides you many functionalities using Email Services. You can send Email from your app using Telerik Everlive.

image

There are two components in Everlive Email Service.

  1. Email Template
  2. Send Email

Before sending Email, you need to create Email Template. You can create Email Template in two ways,

  1. Using code in your app
  2. At portal

You need id of Email Template to send Email. Okay so in this post we are going to create Email Template in portal. To create Email Template login to portal and you will get option to create Email Template.

image

As you see there are four default Email Templates already available in Telerik Everlive. To create new template click on Add an item and at right hand side you get option to create new Email Template. After successful creation of new Email Template you can view that in Template List. You need ID of the Email Template at code to send Email from App.

image

Make sure that you have copied API key and Account Key of application. You need this to send Email using code. You can get keys by clicking on API KEYS in left options.

Okay so we have done configuration at portal. We created Email Template. Next we need to send Email from app. We can send Email using REST API.

Very first you need to create recipients. You can create this as JavaScript object. In below code I am setting two Email addresses to send in TO.


var recipients = {
 "Recipients": [
 “Dhananjay.kumar@telerik.com”,
 “debugmode@outlook.com”
 ],
 "Context":{
 "SpecialOffer":"Happy New Year”
 }
 };

Once you have created recipients you need to make a AJAX post to send an Email using Telerik Email. You can send an Email using code below.


$.ajax({
 type: "POST",
 url: 'http://api.everlive.com/v1/Metadata/Applications/PUTYOURAPIKEY/EmailTemplates/PUTYOUREMAILTEMPLATEID/send',
 contentType: "application/json",
 headers: { "Authorization" : "Accountkey PUTYOURACCOUNTKEY" },
 data: JSON.stringify(recipients),
 success: function(data){
 alert("Email successfully sent.");
 },
 error: function(error){
 alert(JSON.stringify(error));
 }
});

Above code is very simple,

  • In URL you need to set API key and ID of Template
  • In headers put account key of application
  • In data set recipients
  • On success you can set a JavaScript function as callback
  • On error you can set a JavaScript function as callback

That’s it. You need to do only this much of work to send an Email using Telerik Everlive from Cross-platform application. I hope you find this post useful. Thanks for reading.

Resources for webinar “Patterns in JavaScript”

On November 7th we conducted a webinar “Patterns in JavaScript”. This is yet another webinar in the ongoing series we here at Telerik India have been doing. You want to know more about these webinar, take a look at the schedule here:

https://telerikhelper.net/2013/10/04/technology-to-keep-you-company-in-the-holiday-season/

Slide Deck

As usual the webinar was demo oriented and we learn to code various patterns of JavaScript. Even though webinar was demo oriented we covered almost everything in slide deck. This slides could be useful to you.

Video Recording

We record all our webinars so that those of you who couldn’t attend the live event or you had some audio issues can come back and view the webinar at your leisure time. Below is the recorded version of this webinar:

Resources

You can find different blog posts on same topic below,

Revealing Module Pattern in JavaScript

Understanding Prototype Pattern in JavaScript: Part # 2

Understanding Prototype Pattern in JavaScript

Invocation patterns in JavaScript

How to setup JavaScript Build in Sublime Text 2

I hope you find this webinar useful. See you in next webinar.

How to fetch Data from Telerik Everlive using REST API in a Web Application.

Learn more about Kendo UI here

Learn more about Icenium here

In this post we will take a look on fetching data from Telerik Everlive using REST API and use it in a web application. In web app we will be using Kendo UI DataSource to bind data to Kendo UI web ListView.

We are going to learn following,

  • Fetch data from Telerik Everlive using REST API
  • Create Kendo DataSource from returned data
  • Bind data to Kendo UI ListView

Okay so to keep it simple, I have created a simple Content Type Products in Everlive project as below. Permission of this Products content type is set as Public.

clip_image001

To fetch data from Telerik Everlive using REST API, Simply you can fetch data from Icenium Everlive using a AJAX call. You need to provide

  1. URL of the Everlive project with API key
  2. Content type name should be appended in URL. In this case we have appended Products (name of content type) in URL.
  3. Set type as GET
  4. You need to set two callback function. One Callback function will be called on success and another on error.

So data can be fetched using below code. You may want to notice that you need to replace yourapikey in URL with API key for your Everlive project.


$.ajax({
 url: 'http://api.everlive.com/v1/yourapikey/Products',
 type: "GET",
 headers: {
 "Authorization": "Bearer ${AccessToken}"
 },
 success: function (data) {
 BindDataToListView(data);
 },
 error: function (error) {
 alert(JSON.stringify(error));
 }
})

BindDataToListView is callback function and this function will be called on success fetching of data. In this function you need to create Kendo UI DataSource from returned data. Before we do that let us examine what value we get from Everlive server.

clip_image001[6]

You should get below output in browser console,

clip_image002

You can see that in output you are getting count and data in Result property of the returned Object. So you can create Kendo DataSource as follows,

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });

}

Again in Console log you can view that Kendo DataSource has been created from returned data.

clip_image001[8]

Next we need to create Kendo Template and Kendo ListView. We are going to create a very simple template as follows,


<script type="text/x-kendo-template" id="producttemplate">
 <div>
 <h2>#:ProductName# <br/>
 <h3>#=UnitInStock# #:UnitPrice#</h3>
 </div>
</script>

And to create Kendo ListView create a HTML div as follows,


<div id="listView"></div>

Again let us go back to callback function BindDataToListView() and convert div to Kendo ListView and bind already datasource

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });
 console.log(dsource);

$("#listView").kendoListView({
 dataSource: dsource,
 template: kendo.template($("#producttemplate").html())
 });

}

This is it. We are setting datasource and template after converting HTML div as Kendo ListView. When you run this web application you should get output as below,

clip_image002

In this way you can fetch data from Telerik Everlive using REST API and use in Kendo UI Web. I hope you find this post useful. Thanks for reading.

How to detect problems in browsers to work with Test Studio

Learn more about Test Studio here

Often I get questions from customers that how I could detect if there are any configuration setting missing to work with different browser in Test Studio. This can be easily detected. Very first before you start working with Test Studio in different browsers make sure you have configured them.

Read here to configure browser

After installation you can detect browsers or configured or not in Project Setting.

image

In Project Settings you will get option Browsers. In that you can see a message below each type of browsers that “There is a problem with this browser

image

You have option to calibrate browser right from there. You will get message to close instance.

image

Once browser is successfully calibrated you can see message below browser that “The browser is ready for playback

image

In this way you can detect configuration setting of browsers to work with Test Studio. I hope you find this post useful. Thanks for reading.

How to debug a Coded Step in Test Studio?

Learn more about Test Studio here

Recently in one of the customer interaction I came across a question that how a Coded Step in Test Studio can be debugged? This is an important query and can be very useful while writing complex Coded Step.

So let us begin with following recorded step,

image

As we see step 6 is a Coded Step. We need to debug this step. To being with we cannot debug a particular line of coded step in Test Studio desktop version. In Test Studio desktop version we can put breakpoint to debug only at Test Step level. So we can put a breakpoint on Test Step as given below. Test Studio will wait for user at step 3, 4 and 6.

image

Putting breakpoint at Test Step level is simple. However our requirement is to debug particular line of code in Coded Step. We cannot do this in Test Studio Desktop version. But this can be done in Test Studio plug-in of Visual Studio. So we need to follow below steps to debug coded step.

Very first open Test in Visual Studio and put a breakpoint in line of the code we need to debug. This can be done as follows,

image

After this open Test Explorer. To open it from menu select Test and then Windows and then Test Explorer. See the image below for reference.

image

Once Test Explorer is open select test (of which coded step you want to debug). In this case that is Test3 and right click on that and from context menu select Debug Selected Tests as given in below image,

image

Now on debugging of that particular test you will find breakpoint is being hit.

image

We learnt it is super easy to debug a codes step in Test Studio. I hope you find this post useful. Thanks for reading.

Learn more about Test Studio here

How to share on Facebook from Cross Platform Mobile App created using Icenium

Find project on GitHub

On any kind of Apps sharing on Facebook could be a frequent task. Icenium a Cloud Based IDE allows you to create Cross Platform Apps. In this blog post we will take a look on sharing status on FaceBook from a Cross Platform App being created using Icenium.

To start with let us create view. I am putting an input text box and a button. On click of button text from input box will be shared on FB wall of user.

image

Very first we will create helper functions we need to post To start with let us create an identity provider. Identity Provider can be created as given in following code


var IdentityProvider = function (config) {
 var that = this;
 var ref;
 this.getAccessToken = function (callback) {

// Begin Authorization
 var authorize_url = config.endpoint
 + "?response_type=" + config.response_type
 + "&client_id=" + config.client_id
 + "&redirect_uri=" + config.redirect_uri
 + "&display=" + config.display
 + "&access_type=" + config.access_type
 + "&scope=" + config.scope

//CALL IN APP BROWSER WITH THE LINK
 ref = window.open(authorize_url, '_blank', 'location=no');

ref.addEventListener('loadstart', function (event) {
 that.locationChanged(event.url, callback);
 });

ref.addEventListener('loadstop', function (event) {
 that.locationChanged(event.url, callback);
 });
 }

this.locationChanged = function (loc, callback) {
 if (loc.indexOf("access_token=") != -1) {
 ref.close();
 var token = getParameterByName("access_token", loc);
 callback(token);
 }
 }
}

&nbsp;

We are using a function to get parameter by name. Below function is doing this task.


function getParameterByName(name, url) {
 name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
 var regexS = name + "=([^&#]*)";

console.log("Parameter name: " + name);
 console.log("Url: " + url);

var regex = new RegExp(regexS);
 var results = regex.exec(url);

console.log("Result: " + results);

if (results == null) {
 return false;
 }
 else
 return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Once identity provider is being created, next you need to create instance of IdentityProvider. Important configuration you need to pass are as follows

  • Name of the app
  • In client id make sure to pass client if for your app. You will get client id while registering your app to Facebook.
  • In case of Cross Platform mobile App redirect Uri will be always as given in below setting
  • loginMethodName would be always loginWithFaceBook

var facebook = new IdentityProvider({
 name: "My Test App",
 loginMethodName: "loginWithFacebook",
 endpoint: "https://www.facebook.com/dialog/oauth",
 response_type: "token",
 client_id: fbClientID,
 redirect_uri: "https://www.facebook.com/connect/login_success.html",
 access_type: "online",
 scope: "email,publish_actions",
 display: "touch"
});

By this step we have created all the helper functions we need to post an update on Facebook. Now on click event of the button we will

  • get Access Token from helper function
  • pass that to Graph API to post on FaceBook

Below we are reading textbox value, fetching access token and calling a function to make a FB post.


function PostOnFb(e)
{
 var msgToPost = $('#msgTxt').val();
 alert(msgToPost)
 facebook.getAccessToken(function (token) {
 makefbPost(msgToPost, "http://debugmode.net", "DebugMode", token);
 });
}

We are passing

  • message to post
  • URL of application
  • Title of the post and
  • FB token to post status message

Last function we need to create to make a FB post. That function is as given below.


function makefbPost(FBmessage, FBLink, FBLinkName, fbToken) {
 var postURL = "https://graph.facebook.com/me/feed";
 var data = {};
 data.message = FBmessage;
 data.name = FBLinkName;
 data.link = FBLink;

data.access_token = fbToken;
 console.log("Token:" + fbToken);

$.post(postURL, data)
 .done(function (results) {
 navigator.notification.alert("Status Posted", function () { }, "DebugMode", "Done");

})
 .error(function (err)
 navigator.notification.alert("Error encountered. Details:" + err.message, function () { }, "Error", "Done");
 });
}

In above function important points are as follows

  • We are posting data to URL https://graph.facebook.com/me/feed. We are using Facebook Graph API to post status on Facebook
  • We are setting message, link, name and access token as property of data to be posted.

This is all what you need to do to post a Facebook status message from a Cross Platform Mobile Application being created using Icenium.

How to perform various tasks while navigating to/from KendoUI Mobile View in Cross Platform App

Learn more about Kendo UI here

Recently while conversing with one of the customers I came across some of the following queries,

  • How to do some tasks while navigating away from Mobile View
  • How to do some tasks while navigating to a Mobile View

Let us first simplify above queries. Essentially customer wants to call JavaScript functions while navigating to or navigating away from the Mobile View. There could be following combinations of scenarios like following,

  • Perform some task before Mobile View is visible
  • Perform some task after Mobile View is visible
  • Perform some task before Mobile View is hidden
  • Perform some task after Mobile View is hidden
  • Perform some task when Mobile View is visible
  • Perform some task when Mobile View is hidden

Kendo UI Mobile View provides events for all these scenario. As a developer what all you need to do is to call various events associated with Kendo UI Mobile View. Various events with their purpose is depicted in below image,

image

Now let us consider example that you need to perform a task before Kendo UI Mobile view is getting visible. You can do that by setting data-before-show attribute of Mobile View. In below image we are setting data-before-show property to a function with name myfunct.

image

Now each time before homeview (id of the view in example is set to homeview) will be navigated or get visible a function myfunct will be called. In the same way you can set other events as attributes to achieve a particular task while navigating to or away from view. Let us consider one more example that you want to achieve a task after view is hidden. In that scenario you need to set data-hide attribute of the view. We can achieve that as given in following image,

image

In this way you can set events as attributes to achieve any tasks while navigating to and from a Mobile View. Below I am putting codes from above discussion,


<div id="homeview"
 data-role="view"
 data-title="Mobile View"
 data-before-show="myfunct"
 data-hide="myfunct1" >

 <h1>Mobile View Contnet</h1>

 </div>

<script>
 function myfunct() {

alert("Called before View is Visible");
 console.log("Called before View is Visible");
 }
 function myfunct1() {

alert("Called after View is Hiden");
 console.log("Called after View is Hiden");
 }
 </script>

I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

Automating Mouse Actions Test in Test Studio

Learn more about Test Studio here

When you automate a test, working with various mouse actions as desktop commands are essential. Mouse actions could be as following,

  • Single Click
  • Double Click
  • Right Click
  • Mouse Hover etc.

When I talk to customers who are coming from manual testing background or working with other automated testing tools they complain about automation of mouse actions like hover etc. They say it is tough in their existing tools to automate Mouse Actions. They require them to write some amount of scripts to achieve automation of mouse actions.

In Test Studio automating mouse actions are super simple. In this post we will take a look on how to do that.

Let us consider you are recording a test and Test Studio is connected to recording browser (IE in this case) . From Test Studio control panel docked on browser select second option. It will allow to select an element on the DOM

image

When you move mouse on page elements would be getting selected. There would be a red rectangle around selected element. Keep mouse for some time and you will get a blue bubble.

image

Next you need to click on blue bubble. You will get various options. In options select Mouse Actions options.

clip_image001

On selecting Mouse Actions option , you will get available mouse actions to automate.

clip_image002

For example if you want to add Mouse Hover action in your test just double click on Mouse Hover and a step will get added in the test. Next Test Studio will ask you further options like Centre and Specific Point.

clip_image003

You will find mouse actions are added in test as follows

clip_image005

We just witnessed how easy it is to automate various desktop mouse actions command using Test Studio. We did not have to write any script and automation can be done while recording test. I hope you find this post useful. Thanks for reading.