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);
 }
 }
}

 

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.

How to change Build Settings in Icenium

Learn more about Icenium here

In Icenium you have two Build Settings, they are as follows

  1. Release
  2. Debug

While developing apps you should have Build Settings set to debug whereas before publishing it to store, you should set it to Release. In this post I will walk you through how to change Build Settings.

To change Build Settings, right click on project workspace and then select Build Settings option from context menu.

image

Next you get options to change Active build configuration. From drop down you can change Build Settings.

clip_image001

Just we learnt that it is very easy to work different Build Settings in Icenium. I hope you find this post useful. Thanks for reading.

Learn more about Icenium here

Push Notification on Android device using Icenium Everlive

Download sample used in this blog post from Github

Learn more about Icenium

In this post we will walkthrough working with Icenium Everlive Push Notification on an Android device. This post is divided in three parts from creating Google project to writing JavaScript code to enable notification on device.

Let us follow following steps to get it started with push notification on android devices

Step 1: Configure or Create Google Project

You need to start with creating Google Project. You need Google project ID to enable Push Notification.

  • Navigate to https://code.google.com/apis/console
  • In drop down you get an option to create a new project. From there create a new project
  • After creating project, you will get project number. There are two ways you can find project number, either in URL or on dashboard

image

After creating Google project, from left hand options select API Access. In that go ahead and click on Create a New Android Key. We need Android key at Everlive server side to enable Push Notification

image

After getting Android key next step you need to do to enable Service. To enable that click on Services in left and On Google Cloud Messaging for Android.

image

As of now we have created Google Project.

Step 2: Create and Configure project in Icenium Everlive

To create Icenium Everlive project, navigate to https://www.everlive.com/ . To create new project click on Create New Project on the home page. After successful creation of project go to Settings

image

In Settings select Push Notification from left menu options. We are going to enable Push Notification for Android, so check the check box of Android and provide Android Key created in previous step.

image

Step 3: Create Application

In this step we will create application to work with push notification. We will us EverLive JavaScript SDK. You can download sample Sample App from GitHub here

To start with you need following JavaScript files in your application. You can get these files from downloaded sample.

image

Now to start with, you need EverLive API key of your project and android project number. You will find API key on EverLive portal and android project number which you configured in step1 of this post.

image

As of now we have created environment in application to work with EverLive SDK for PushNotification. Next we need to create pushSettings for Android. You may notice that we are passing androidProjectNumber to create push setting for android.

image

Next you can enable notification on device by calling enableNotifications function and passing setting for push notification as input parameter in that. On successful enabling we are returning registration of device.

image

After enabling notification on device you need to register device in Everlive portal. To do this call register function on instance of current device.

image

These are two operations you need to perform to get push notification on android device from Everlive push notification. I have created two buttons on app view to enable notification on device and then register device to get push notification. View with buttons are as follows,

 <div data-role="view" id="pushview" data-tile="Push" data-model="app.pushService.viewModel" >
 <a id="initializeButton" data-role="button" data-bind="click: enablePushNotifications" class="btn-big">Enable Notifications</a>
 <a id="registerButton" data-role="button" data-bind="events: { click: registerInEverlive }" class="btn-big">Register</a>

 </div>

Below find full code to enable and register device for push notification.


(function (global) {
 var everliveApiKey = 'I1eE4AuOaWv0Vp5y';
 var androidProjectNumber = '1088191728786';
 var emulatorMode = false;

var pushViewModel = kendo.data.ObservableObject.extend({

el: new Everlive({
 apiKey: everliveApiKey
 }),

message: function () {
 alert("dhananjay");
 },

onAndroidPushReceived: function (args) {
 alert('Android notification received: ' + JSON.stringify(args));
 },
 enablePushNotifications: function () {
 // Push Setting for Android
 var pushSettings = {
 android: {
 senderID: androidProjectNumber
 },
 notificationCallbackAndroid: this.onAndroidPushReceived,

};
 // Setting the current device
 var currentDevice = this.el.push.currentDevice(this.emulatorMode);
 currentDevice.enableNotifications(pushSettings)
 .then(
 function (initResult) { return currentDevice.getRegistration();
 },
 function (err) {
 alert("ERROR!<br /><br />An error occured while initializing the device for push notifications.<br/><br/>" + err.message);
 }
 );

&nbsp;
 },
 registerInEverlive: function () {
 var currentDevice = this.el.push.currentDevice();

if (!currentDevice.pushToken) currentDevice.pushToken = "some token";
 this.el.push.currentDevice()
 .register({ Age: 15 })
 .then(
 this.onDeviceIsRegistered,
 function (err) {
 alert('REGISTER ERROR: ' + JSON.stringify(err));
 }
 );
 },
 onDeviceIsRegistered: function () {

alert("device registered");
 }

&nbsp;
 });

app.pushService = {
 viewModel: new pushViewModel()
 };

})(window);

&nbsp;

After successful operations on device, you will find device is registered in Everlive portal as below. All device registered for application will be listed here.

image

Now you can send push notification to device from portal. Device is enabled and registered to receive push notification from the Icenium Everlive server. We just witnessed that it is so easy working with push notification on Android devices from Icenium Everlive server. I hope you find this post useful. Thanks for reading.

Download sample used in this blog post from Github

Learn more about Icenium

How to use existing Test Scripts to create new test in Test Studio

Learn more about Test Studio here

In one of customer demo, I came across a question that how we could use test scripts recorded on different machine or rather an existing test script to create a new test in Test Studio.

This can be done very easily in Test Studio. Each Test Project in Test Studio can be opened in File system. Let us say you want to use Test1 to create another test. So right click on Test1 and from context menu select Show in Windows Explorer

image

On File system you will find Test Studio Test file. You need to use this Test Studio Test File to create new test with existing scripts.

clip_image002

Next to use existing test script, right click on Test Project you get option to Add Existing Test in content menu.

clip_image004

Browse to existing Test Studio Test File you want to use to create new test. Select Test File click on Open.

clip_image006

On clicking on Open you will find that you have created new test with existing test. Newly created test will have same name as of existing test. If you want you can rename test by right clicking on the test and selecting rename option from context menu.

So just we learnt that it is very simple to use existing test scripts to create new test in Test Studio. I hope you find this post useful. Thanks for reading.

Learn more about Test Studio here

How to create Support Ticket from Telerik Test Studio Desktop

Learn more about Test Studio here

In this post we will take a look on creating Support Ticket from Test Studio Desktop. To create support ticket after launching Test Studio Desktop click on Help in top menu

clip_image002

After clicking on Help menu in ribbon you get option to Submit Ticket. Click on Submit Ticket to create a support ticket.

clip_image004

Now either you need to create a new Telerik account or login with existing account. I am login with existing Telerik account

clip_image005

After successful login, you will be provided with options from various products. Select TestStudio and click on Contact Support Team

clip_image007

You will get option to create Support Ticket under product Test Studio. If Test Studio is expired for you then you will get message as like below,

clip_image009

These steps you need to follow create Support Ticket. I hope you find this post useful. Thanks for reading.

Learn more about Test Studio here

Resources for Webinar “Data Driven Testing using Test Studio”

Learn more about Test Studio here

On Jul 18 we conducted a webinar titled “Data Driven Testing using Test Studio”. This is part of the ongoing webinar series we here at Telerik India are doing targeting the APAC region. We call this the Telerik. .NET Ninja Developer Webinar series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

image

Learn more about Test Studio here

Slides deck of webinar is here,

For those of you who missed attending the webinar live, we have it covered for you. We record all our webinars and so was this one. Here is the recording of the webinar:

Telerik Ninja T-Shirt Giveaway:

We select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. We have picked up 2 lucky persons in this webinar too. They are:

Sharma, Avinash

Neha Tiwari

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts.

Excited to see you in next webinar

Automate Database Insertion Test using Test Studio

Learn more about Test Studio here

Inserting data from application is very prominent task. You will find this functionality in all kind of applications. In this post we will take a look on automating the test to verify insertion of data in database.

Let us assume you have following application to insert data in database,

image

And you have recorded test steps for insertion operation as following. As you see that all the test steps are passed and data got inserted in database.

image

At this point there is no step to verify that whether data got inserted to database successfully or not? Only manually Tester can verify that data being inserted or not. Now let us see that how can we automate this test.

We will automate this test using

  • Coded step
  • Performing database verification operation in coded step. We will choose LINQ to verify that whether data got inserted successfully not. You can choose any other data base technology like ADO.Net or other library to perform operation against database.
  • We will use NUnit for assertion

Very first we need to add a Coded step. To add coded step select Test from menu and then Script Step from ribbon as given in below image.

image

You will be asked to select scripting language. I am selecting C# as scripting language here.

image

Once Code step is added export test project to Visual Studio. To export to visual studio from menu click on Export to Visual Studio as shown in image below,

image

Next select Visual Studio version to export project.

image

Creating Library to work with LINQ

Now in visual studio you need to add operations related to LINQ in different class library. Idea is that we will create separate library for LINQ operation and later we will add that library to Test Studio.

clip_image002

Assume that we have created a library with name DataLibrary. This Library got

  • LINQ data context classes
  • We added a static class in which operation is being performed to verify that whether data exist with given user name or not? If data does not exist static function will return false else true.

So DataHelper class contains following code to verify that whether data exist or not.


public static class DataHelper
 {
 public static bool VerifyInsertion(string username)
 {
 DataClasses1DataContext conext = new DataClasses1DataContext();
 var result = (from r in conext.User_Login_Datas
 where
 r.username.Equals(username)
 select r).FirstOrDefault();
 if (result == null)
 return false;
 else
 return true;

}
 }

Adding Reference in Test Project

There are in two ways you can work on Test Studio. Either on Visual Studio plugin or on Test Studio Desktop.

Adding reference in Visual Studio is simpler. Right click on test project and from context menu select Add Reference. Browse to DataHelper.dll library and add reference in test project.

Even though you have added reference in Visual Studio make sure that you have added reference in test project opened in Test Studio desktop version else you will get exception.

To add DataHelper.dll assembly in Test Studio desktop version you need to follow following steps,

In project tab or project dashboard select Settings option from ribbon

clip_image002[6]

In dialog box click on Script Options. To add assembly reference click on Add Reference.

clip_image004

The way you added DataHelper library add Add reference of nunit.framework dll in Test Project as well. Make sure to add this in Test Studio desktop version also.

After adding references you need to write codes for coded steps. We need add two coded steps,

First coded step to read username value before Post back or Form get submitted. In this particular application when user will click on Insert Data button, a post back will occurred or form will get submitted and this will clear value of all the elements in DOM. So we need to read value before form submission. We can do that in coded step as following,

image

We are reading text of UserName field using TestStudio Framework API.

Second coded step will call VerifyInsertion function from DataHelper library and using NUnit we will assert the validation. We can do that as following,

image

For your reference both coded steps are as follows,


string insertedValue = string.Empty;

 [CodedStep(@"New Coded Step")]
 public void Data_Insert_Test_CodedStep()
 {

 bool result = DataHelper.VerifyInsertion(insertedValue);
 NUnit.Framework.Assert.AreEqual(true, result);
 }

[CodedStep(@"New Coded Step")]
 public void Data_Insert_Test_CodedStep1()
 {
 insertedValue = Find.ById<HtmlInputText>("MainContent_txtUserName").Text;

}

Your test should be like following

clip_image001

In this way you can automate data insertion test in database. I hope you find this post useful. Thanks for reading.

Learn more about Test Studio here

How to execute Test in different Environment in Test Studio

Learn more about Test Studio here

To execute test in different environment you need to set base URI at project level. Very first let us understand that why we need BaseURL? Assume a scenario when you need to run test in different environment. For example your test should run in following environments

  • Testing environment
  • Staging environment
  • Production environment

Now suppose for testing environment you have recorded test as follows,

clip_image001

As you see first step of test is navigating to base URL of testing environment. Problem will occur when you will move test from testing environment to some other environment. In that scenario for each step you will have to come back and change URL.

Test Studio provides a simple solution of this by option of setting baseURL at project level. To set baseURL at project level navigate to project tab and click on project setting in ribbon

clip_image003

In project setting you have option to provide baseURL. Provide base URL here and click on ok.

clip_image005

After providing base URL when you rerecord test you will find portion specified in base URL hs been removed.

clip_image006

So setting base URL at project level allows you easily to move test from one environment to another environment. For example in case of test environment set base URL as test environment and perform all testing. When you need to execute test in production environment all you need to change base URL in the project setting. I hope you find this post useful.

Learn more about Test Studio here

Hello Test Studio Desktop: New Immersive experience

Test Studio has got all new user interface and look. Now it is lighter and more immersive. After installing latest version you will find TEST STUDIO Desktop home as given in below image.

clip_image002

There are three section

  1. Recent Projects section
  2. Option to create new project , open existing project and open sample project
  3. Option to watch Get Started video right from launching pad

You can create new project by clicking on Create new project option. Here you select location to create project and can give a desired name to project.

image

In latest Test Studio desktop version Project dashboard look like below,

image

Right from project dashboard you can connect to TFS and do Check In and Check Out.

image

You can perform following operation on TFS from project dash board

  1. Check in
  2. Check out
  3. Open existing project from source control
  4. Connect to TFS

Right from project dash board you can connect to

  1. Team Pulse
  2. QC
  3. Bug tracking tools

Now there is new experience to create new test also

image

Now you can record test in any browser. Test Studio supports cross browser recording. In later posts I will show you in detail recording options. In new version recorded tests look like as following,

image

In further posts we will explore other new features of new Test Studio Desktop. I hope you find this post useful. Thanks for reading.