Resources for webinar “Integrating Knockout.js with Kendo UI”

On 24th April 2014 we hosted a webinar on Integrating KendoUI with Knockout.js. Now a days MV* patterns are most used patterns in almost all kind of applications. Knockout.js is one of the most popular library to achieve MVVM in JavaScript based web applications.

Learn more about Knockout.js here

Kendo UI provides complete capability to achieve MVVM. If you use Kendo UI, you don’t need to use any other JavaScript library to create applications based on MVVM or Single Page Application. In this webinar we tried to show you integration between Kendo UI and Knockout.js.

Learn more about Kendo UI here

Find below slides from the webinar,

 

 

Find below recording of webinar,

 

I hope you find this webinar useful.

Advertisements

Dynamic Values passing between test steps in Test Studio

Recently I was talking to a customer. He discussed a simple but important problem with me on test automation using Test Studio. He had a requirement to use values of variables from one test step in another test step.

To understand this problem in better way, consider below web application which is inserting data in database.

clip_image001

Let us try to understand this problem bit further. Suppose you have 6 test steps in test. In step2 user is typing UserName to be inserted.

clip_image003

To verify successful insertion of UserName in database, you need to do follow steps,

  • Read UserName inserted by user from step 2
  • Reading of username is done in step 4. So here you are reading value from step 2 in step4.
  • Use read value of step 4 to verify insertion in database.

In this post we are going to see how we can read variables value from one step in another step. In this case from step 2 to step 4 and then in step 6.

To use variable from one step in another you need Coded step. To add coded step select Test from menu and then Script Step from ribbon. In Visual Studio extension Coded Step can be added by clicking Add then selecting Coded Step.

clip_image001[6]

If you notice test steps in we have taken in example there are two test steps (step 4 and step 6) are coded steps. In step 4 we are reading user inserted value as below and assigning that to a public global variable.

clip_image003[6]

In step 4 (coded step) we read value from step 2 or in other words value from DOM element in which value got assigned in step 2. Now we need to read global variable value in step 6.

clip_image005

In this way very easily you can read variable values from one step in another step in a test project. I hope this post will help you. Thanks for reading.

Devices as Test Agents in Telerik Mobile Testing

Telerik Mobile Testing is an automated testing solution for native, hybrid, and web apps. To discover more about this product, I would recommend reading Robert Shoemate’s blog post entitled, Introducing Telerik Mobile Testing, where he details our motivations for building the product along with its technical underpinnings. In this post, I’ll explain how to configure devices to integrate as test agents with this environment. As an example, we’ll explore to configure an Android device as test agent on a Windows machine. However, if you’re interested in learning how to perform testing against a native iOS app, make sure to check out Anthony Rinaldi’s blog post entitled, Telerik Mobile Testing – iOS Case Study.

Before I go ahead and show you how to add a device as Test Agent, let us try to understand few fundamental questions. For example,

  • What is a Test Agent?
  • Why we need Test Agent?
  • Why we need to add a real device as Test Agent?

Test Agent is a place in which you run the test. It could be a computer, emulator, simulator, browser or even a background process. Test Agent can be seen as an environment in which test gets executed.

Any serious mobile application should get tested before launching to various stores. As a tester you should or rather must test application on real devices. For instance consider Android platform, it has more than 1000 variations of devices and any serious Android application should be tested on some of them.  To test application on device you need to add them as Test Agent. Same challenges goes with iOS app as well. They run on various version of operating systems and you should test applications against almost all versions of OS.

Telerik Mobile Testing allows you to add devices as Test Agent. You can add any kind of Android or iOS devices and run test on them. You can add devices as Test Agent without jail breaking them and only requirement is that devices (Test Agent) and Test Runner should be connected to same Wi-Fi networks.

Telerik Mobile Testing allows you to add real devices and emulator as Test Agent at the same time. So any testing scenario in which application should be tested on device and emulator at the same time can be possible here.

image 

Following are the steps you need to follow to set up an Android device (Samsung Galaxy S3) as Test agent. However almost same steps you need to follow to add iOS app.

Step 1

In order to test native and hybrid apps on a device, you need to download and install the Telerik Mobile Testing companion app for iOS (App Store) or Android (Google Play). Once installed, the app will appear on your device as follows:

image

 

Step 2

Download and extract the Telerik Mobile Testing archive to your machine. Navigate to Telerik Mobile Testing folder and run start_win.exe. This will launch the Test Runner with its default configuration and open a browser window that points to the Test Runner execution environment.

 

image

 

It will launch Test Runner in browser.

image

 

As of now you there is no Agent added to the Test Runner.

Step 3

Launch the Telerik Mobile Testing companion app on your device:

image

When launched, the app will be not connected to the Test Runner. To connect it to Test Runner, click on setting in Application. You will find setting option in top right.

image

In Setting you need to provide IP Address of machine in which Test Runner is running. You can find IP address of machine by running ipconfig command on command prompt in Windows devices. Ensure that you have provided port address as 8081.

image

Once you have provided Host as IP Adress of machine on which Test Runner is running (You can provide host name also) and port address as 8081, click on Connect to connect device with Test Runner.

image

On successful connection you will get message in App as this device is connected and ready to run tests.

Step 4

Now you have device connected as Test Agent. To view it go back to Test Runner and click on Refresh Agents. You will find device has been added to Test Runner as Test Agent

image

Now you can select device as Test Agent and run the Application Test on real device. I hope this post will help you in setting up device as Test Agent with ease and explain you why you need to test application on real devices. Thanks for reading.

Resources from webinar Kendo UI Mobile Tips and Tricks

On Feb 13 2014 we conducted the webinar on “Kendo UI Mobile Tips and Tricks”. This blog post will provide you some of the resources from the webinar like Slide Deck, Video recording of the webinar.

Kendo UI Mobile

Kendo UI Mobile helps you to build Cross Platform Mobile or Hybrid Applications with pure JavaScript and HTML5.

Learn more about Kendo UI Mobile here

Slide Deck

Here is the slide deck from the webinar

 

 

Video

As with every webinar, we have recorded this one too. Here is the video recording of the webinar for your leisure viewing

 

 

Thanks for attending webinar.

How to apply badge in Kendo UI Mobile Button

Learn more about Kendo UI Mobile here

Yes now you can have a default badge on Kendo UI Mobile Button. This was in demand feature and we brought this feature in Q1 2013 SP release.

You can put a badge by setting data-badge attribute of button. After setting badge button will look like below in various platforms.

image

Okay , so we can set badge property as follows. You need to set data-badge attribute.


<a data-role="button" data-badge = "10" data-click="AddFunction">Add</a>

You can access badge value with badge method. So if you need to read current badge value and print it in AddFunction JavaScript function then it can be done as follows.


function AddFunction()
{
 var badgeValue = parseInt(this.badge());

 alert(badgeValue);
}

We are reading badge value with badge() method. That returns a string value and before alerting that we are converting that to integer.

To write value of badge you need to pass a parameter in badge() method. So badge value can be written as below,


function AddFunction()
{
 var badgeValue = parseInt(this.badge());
 badgeValue++;
 this.badge(badgeValue);
 alert(badge);
}

You can remove badge from button by passing false to badge method. So you can remove badge as follows


function AddFunction()
{
 this.badge(false);
}

In this way you can work with badge in Kendo UI Mobile button. I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI Mobile here

Resources from webinar Node.js development using Visual Studio

On Jan 23 2014 we conducted the webinar on “Node.js development using Visual Studio”. This blog post will provide you some of the resources from the webinar like Slide Deck, Video recording of the webinar and source codes used in the demo.

Download source code and slide from webinar here

Node.js

Node.js is asynchronous event driven server side JavaScript. It is written in C++ and runs on Google V8 engine. Servers created using Node are high at performance and scalable. It perform File, DB and IO operations in non-blocking way.

Learn more about Node.js here

Slide Deck

Here is the slide deck from the webinar:

Video

As with every webinar, we have recorded this one too. Here is the video recording of the webinar for your leisure viewing

Download source code and slide from webinar here

T-Shirt Give Away

Every webinar we give away two .NET Ninja T-Shirts which have become quite popular among developers. In this webinar we have selected the following 2 persons to receive our t-shirt.

  • Ishitva Goel
  • Ramesh Pyru

Congratulations to the winners. We will contact you on the email address you have provided to us. We will ship the t-shirt to your address.

Thanks for attending webinar.

Download source code and slide from webinar here

How to work with Kendo UI Mobile Buttons

Learn more about Kendo UI here

In this post we will take a look on working with Kendo UI Mobile buttons and how can we change their icons and styles.

You can create Kendo UI mobile buttons as below,


<a href="#add" data-role="button">Add</a>
 <a href="#home" data-role="button">Home</a>

To create Kendo UI Mobile Button you need to follow following steps,

  • Create anchor tag
  • Set data-role as button
  • Set href as id of the view you want to navigate on click of the button

If you want to call a JavaScript function and execute some code on click of button then you need to set data-click as name of the JavaScript function.


<a data-role="button" data-click="AddFunction">Add</a>
<a href="#home" data-role="button">Home</a>

As you see in above example on click of button Add , JavaScript function AddFunction will be called. Whereas on click of Home button user will be navigated to mobile View with id home.

By default you get buttons rendered as below,

image

You can put style of buttons as well. For example you can set background colour as below,


<a data-role="button" data-click="AddFunction" style="background-color: green">Add</a>
 <a href="#home" data-role="button" style="background-color: red">Home</a>

You will get buttons rendered on mobile view as below,

image

There could be scenario in which you need to render different colours of buttons for android and iOS. Let us say you want blue colour for Android and red for iOS. You can do that by setting button styles in CSS as below,


.km-ios .buttonscolor { background-color: green; }
 .km-android .buttonscolor { background-color: red; }

Above we are overriding default style of Kendo UI Mobile Buttons. And set CSS class of buttons as below,


<a data-role="button" data-click="AddFunction" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" class="buttonscolor">Home</a>

You will get buttons rendered on mobile view as below,

image

You can set icons of buttons as well. Icons can be set by setting data-icon property.


<a data-role="button" data-click="AddFunction" data-icon="add" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" data-icon="home" class="buttonscolor">Home</a>

As you see we set data-icon attribute to add and home respectively. You will get buttons rendered on mobile view as below,

image

You see there are icons rendered on button now. Kendo UI provides you set of icons out of box to use.

image

You can use any of above shown icon by setting data-icon attribute. If you want you can create custom icons and set as button icon as well.

Apart from above icons Kendo UI provides you other set of icons as well. You can use them with their Unicode.

Learn more about Fonts here

So let us say you want to use telephone icon as icon of button then you can use that using the Unicode.


.km-upload:after,
 .km-upload:before
 {
 content: "\e009";
 }

And then you can use upload as value of data-icon attribute of button as given below,


<a data-role="button" data-click="AddFunction" data-icon="upload" >Add</a>
 <a href="#home" data-role="button" data-icon="upload">Home</a>

You will get buttons rendered on mobile view as below,

image

In this way you can take use of Kendo UI Mobile Buttons in your application. I hope you find this poste useful. Thanks for reading.

Learn more about Kendo UI here

How to Automate Test for Image verification using Test Studio

Learn more about Test Studio here

Telerik Test Studio got out of box feature to automate test for image verification. You can verify, whether image has been changed or distorted in application without writing any script. In this post we will take a look on, “How can image verification test can be automated in Test Studio

Let us consider that there is web application with an image as below,

clip_image001

To do verification around this image, start recording the test. Once application is launched for recording, select Enable or Disable over hover option from Test Studio control panel docked in recording browser window,

clip_image002

This will allow you to select image on DOM. Put mouse for some time and you will get a blue bubble.

clip_image004

On clicking of blue bubble you will get option to Image Verification.

clip_image005

Next you need to click on Image Verification. On clicking you will get Image Verification dialog box.

clip_image007

In dialog box you can configure various options like,

  • Verify entire image
  • Verify certain area of image

To do exact match you need to put Total Difference as 0. Recommended is to put in between 1 to 5 %. If you want to verify certain area of image then uncheck Verify Entire Image checkbox and configure X axis, Y axis, Width and Height value.

I have recorded a very simple test for image verification with two steps as below. You can see that error tolerance has been set to 2%.

clip_image002

Assume if test fails in image verification step then you will get information as below that Images are not the same.

clip_image004[6]

We just learnt that Test Studio allows us to perform automation of image verification without writing any script. I hope you find this post useful. Thanks for reading.

clip_image006

How to do CRUD operation on Telerik Everlive data from .NET Application

Learn more about Telerik Everlive here

You can consider this post as second post of the series. In first post of this series we learnt about fetching data from Telerik Everlive in a .Net application.

How to fetch data from Telerik Everlive in a .NET Application

In previous post we touched upon following,

  • Creating client side representation of Everlive content type
  • Adding required assembly to work with Everlive in a .Net application
  • Fetching data from Everlive in .Net application.

To create an item also we need client side representation of Everlive content type. You can create a single item as following,


static async void CreateData(EverliveApp productApp)
 {
 var productToInsert = new Products
 {
 ProductName = "sugar",
 IsContinued = true ,
 Quantity = 100,
 UnitInStock = 23,
 UnitPrice = 20 ,

 };

await productApp.WorkWith().Data<Products>().Create(productToInsert).ExecuteAsync();
 Console.WriteLine("Product Inserted " + productToInsert.Id);
 }

In above code,

  • We are creating item to be inserted. This item is instance of client side representation (class) of Everlive content type. In this case we are creating object of Products. This will pass as parameter to Create function.
  • Asynchronously we are inserting an item by calling Create function. This function takes instance of Products as parameter. This instance will get inserted as an item to Telerik Eeverlive

So these simple steps you need to follow to insert an item from .Net application to Telerik Everlive content type.

Next you can update an item by first fetching it on basis of id or any other column. Once data is fetched at the client application , you can update that and using Update() function save data back to Everlive server.


static async void UpdateData(EverliveApp productApp)
 {

var productToUpdate = await productApp.WorkWith().Data<Products>().GetById("76a49eb0-67ad-11e3-8374-496a59d093be").ExecuteAsync();
 productToUpdate.ProductName = "Sugar and Salt";
 productToUpdate.IsContinued = true;
 await productApp.WorkWith().Data<Products>().Update(productToUpdate).ExecuteAsync();

}

In above code,

  • We are fetching an item to update
  • Updating required columns
  • Using Update function saving data back to Everlive

These simple steps are required to update an item from .Net application.

Deleting an item is simplest. You need to pass id of item to delete that. If you want you can delete an item on other projection as well. In further posts we will discuss about that. To keep it simple we can delete an item on basis of id as below,


static async void DeleteData(EverliveApp productApp)
 {

var idtoDelete = "76a49eb0-67ad-11e3-8374-496a59d093be";
 await productApp.WorkWith().Data<Products>().Delete(idtoDelete).ExecuteAsync();

}

These simple steps are required to perform CRUD operation from .Net application on Telerik Everlive data. I hope you find this post useful. Thanks for reading.

How to fetch data from Telerik Everlive in a .NET Application

Learn more about Telerik Everlive here

To start with and put in a single sentence Telerik Everlive in Backend as a Service offering from Telerik. In this post we will take a look on fetching data from Everlive in a .Net application. We will consider using .Net Console Application. However concept will be same for almost all other kind of .Net applications like WPF, Windows Apps.

To start with download .NET SDK from here . On download page make sure that you have selected .NET platform. Download and extract folder. You should get two dll. You need to add these dll in .Net project.

image

To add dll in project right click on Reference in project. From context menu select option of Add Reference. You need to add above two extracted dll in the project.

image

After adding required references next step is to create class which will represent Everlive content type in the client application. That class can be created as following ,


public class Products : DataItem
 {
 private string productName;
 public string ProductName
 {
 get
 {
 return this.productName;
 }

set
 {
 this.productName = value;
 this.OnPropertyChanged("ProductName");
 }
 }

private int unitPrice;
 public int UnitPrice
 {
 get
 {
 return this.unitPrice;
 }

set
 {
 this.unitPrice = value;
 this.OnPropertyChanged("UnitPrice");
 }
 }

private int quantity;
 public int Quantity
 {
 get
 {
 return this.quantity;
 }

set
 {
 this.quantity = value;
 this.OnPropertyChanged("Quantity");
 }
 }

private bool isContinued;
 public bool IsContinued
 {
 get
 {
 return this.isContinued;
 }

set
 {
 this.isContinued = value;
 this.OnPropertyChanged("IsContinued");
 }
 }
 private int unitInStock;
 public int UnitInStock
 {
 get
 {
 return this.unitInStock;
 }

set
 {
 this.unitInStock = value;
 this.OnPropertyChanged("UnitInStock");
 }
 }


}

There are couple of points you need to keep in mind,

  • Class name should be same as Content Type name
  • Class should inherit from DataItem. It is not a must condition though.
  • Properties name should be same as columns of Content Type

After creating client side class, you can either synchronously or asynchronously fetch items from Everlive. Items can be fetched asynchronously as below,


static async void FetchData(EverliveApp productApp)
 {
 var products = await productApp.WorkWith().Data<Products>().GetAll().ExecuteAsync();

 foreach (var item in products)
 {
 Console.WriteLine(item.ProductName + item.UnitPrice);

}
 }

Important point is that you need to pass client side type (class) in this case Product to fetch items. You need to make an instance of EverliveApp class passing your app key in the constructor.


static void Main(string[] args)
 {
 EverliveApp productApp = new EverliveApp("yourkey");
 FetchData(productApp);
 Console.ReadKey(true);
 }

This is all you need to do to fetch elements from Telerik Eeverlive in a .Net Console Application. I hope you like this post. Thanks for reading.

Error Solved: Binding Excel file as Data Source in Test Studio

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

Okay, so have you come across this error while binding an Excel File as DataSource to a Test in Test Studio? You may get this error when you are working with fie saved in Excel 2013 format.

image

Now how to solve this error? Very easily you can solve this error by saving Excel file in Excel97-2003 Workbook format.

clip_image002

If you do not want and can save your file in Excel97-2003 format then probably you may want to check application log. To check application log follow these two steps,

  1. Navigate to Help Menu
  2. Click on Enable log to enable log in Test Studio.

image

In Log if you see something like Microsoft.ACE.OLEDB.12.0 is not registered on local machine then, you need to install Access Database Engine. You can download and install it from below link,

http://www.microsoft.com/en-us/download/details.aspx?id=23734

After installing it you should able to work with Excel file regardless of it format is Data Source in Test Studio.

I hope this post useful. Thanks for reading.

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

Recap of webinar Journey from Manual to Automated Tester

image

On 12th December 2013, we conducted webinar on Journey from Manual to Automated Tester in 1 Hrs. We had great time teaching Automated Testing over web to audience of more than 150.

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

In webinar we covered following topics,

  • Why to automate a Test
  • Advantage of Test Automation
  • Getting started with Test Studio
  • Record and Play a Test
  • Cross Browser Testing
  • Data Driven Testing
  • Test Lists and Scheduling

If you missed webinar then you can view recorded webinar below,

 

Some of the Questions and Answers from webinar are below,

Which all technologies that can be automated by Test Studio?

TestStudio can automate functional Testing of

  • Web Applications
  • Desktop Apps created using WPF
  • Load Testing
  • Load Testing of Web Services
  • Load Testing of Mobile Apps

Can we perform Load testing for more than 100 virtual users?

Yes Load Testing can be performed with more than 100 Virtual Users. Learn more about Load Testing here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/load-testing.aspx

Can we do automation testing for excel application?

What I understand from this question that you want to automate testing of

  • Reading Excel file
  • Verifying whether data being written to Excel file.

Yes you can do it using CODED STEPS. You need to write C# Code using File System API and Excel API to achieve automation .Learn more about Coded Steps here

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/coded_steps.aspx

What programming languages does it support?

Test Studio supports below programming languages,

  • C#
  • VB.Net

Can test studio access Linux System?

No Test Studio does not work on Linux system. As of now Test Studio supports only Windows.

Can you please show how we parameterise the user name and password?

As shown in demo you can do it using Data Driven Testing. Learn more about Data Driven Testing here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/data-driven-testing.aspx

When you choose any Browser for test recording

Learn more about recording here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/recording-tests.aspx

How this tool is handled browser pop-up?

Learn more about handling popup here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/dialogs-and-popups/dialogs.aspx

Is there any option for automating silver light application?

Yes Test Studio supports automation testing of Silverlight application. Learn more about that here,

http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/write-tests-in-code/silverlight-test-automation/introduction.aspx

Does it support flex?

Unfortunately Test Studio does not support Flex application testing.

Can we do testing for Kendo UI applications?

Test Studio supports out of box testing of Kendo UI Widgets. See Kendo UI Grid testing video here,

http://tv.telerik.com/watch/automated-testing-tools/testing-kendoui-grid-with-test-studio

Webinar was highly demo oriented and PPT had very less role to play. However if PPT interests you then find it below,

Download free 30 days trial of TestStudio from here

Find more about Test Studio here

clip_image002

Telerik TestStudio: Subscription based Automation Testing Tool

image

Telerik TestStudio is now subscription based. Now as user you have three options to choose from.

Learn more about Purchasing Options

image

You have now monthly and yearly subscription option. You can choose among three bundles as per your requirement.

There are many added and imprived features with this release. Some of them are as follows,

  • Load Testing Traffic from Mobile Devices
  • Load Testing of Web Services
  • Extended Support for HTML5 Controls
  • Improved Browser Calibration
  • TeamPulse Integration Improvement. Etc.

Learn what is new in TestStudio

I hope you will find new subscription based model along with new features exiting. Test Studio rocks.

How to change default waiting time to find Element for a step in Test Studio

Learn more about Test Studio here

While talking to customers I come across one common question that, “How can we change default waiting time to find element for a particular Test Step? “

Let me start with explaining this question little bit more. So when you record a test, TestStudio saves information about elements in Element Repository. While executing test, TestStudio try to identify element in Element Repository on basis of Identification Logic saved. TestStudio waits for 30ms to find element.

Now there could be scenario when 30ms is not enough and you want to change this default wait on step value. Let us learn how can we change this?

To change default wait to find element in a step, click on edit steps. You will get an option of UseStepWaitOnElements. You need to check the check box as given below.

image

Once you check this check box, next go to step property. There you will find WaitOnElement property field editable. Here you need to put desired wait time to find an element for a particular step.

clip_image001

This is what all you need to do to change default wait time for elements. I hope you find this post useful. Thanks for reading.