Drag and Drop with Telerik Testing Framework



Posting a blog after a long time, so I'm not gonna add a huge description here.

Most of the user friendly web applications support drag and drop commands/actions and even though lot of test automation IDEs support drag and drop its dosent work most of the time, Trust me I have tired. So on today's post we will discuss how to perform this simple task using Telerik Test studio

Step 1

 First you have to identify which are the two elements you're going to use for this operation

Eg: I'm using 2 HTML div Elements

ids: dragitem, droptiem

Since you're using a code first method first you have to identify the 2 elements in the web browser



 HtmlDiv Dragitemspan = ActiveBrowser.Find.ById("dragitem").As<HtmlDiv>();  
 HtmlDiv dropitemspan= myManager.ActiveBrowser.Find.ById("dropitem").As<HtmlDiv>();

This is the vary basic method of identifying an element in Telerik test studio, you could use page object class or a page factory class to  make the code more maintainable, this is just an example

Step 2

 Basic drag and drop method

 use the following code

 dragitemspan.DragTo(dropitemspan)

This works some times but sometimes this doesn't work because the automation code doesnt work exactly the same as  how a user performs the drag and drop

eg: mouse hover tasks doesn't trigger in automation codes, you have specifically trigger them

The complex drag and drop method

So if this doesn't work what are the other options we have?

Method DragTo() has 9 overloading methods 
so you can use them here, but what is the most meaningful and useful method of these? 

 


 DragTo(Point absolutePoint);  
 DragTo(int offsetX, int offsetY);  
 DragTo(OffsetReference sourceOffsetReference, Point sourceOffset, HtmlControl destination);  
 DragTo(HtmlControl control, OffsetReference destinationOffsetReference, Point destinationOffset);  
 DragTo(OffsetReference sourceOffsetReference, Point sourceOffset, int destinationOffsetX, int destinationOffsetY);  
 DragTo(OffsetReference sourceOffsetReference, Point sourceOffset, HtmlControl destination, OffsetReference destinationOffsetReference, Point destinationOffset);  
 DragTo(OffsetReference sourceOffsetReference, int sourceOffsetX, int sourceOffsetY, Rectangle destinationRectangle, OffsetReference destinationOffsetReference, int destinationOffsetX, int destinationOffsetY);  
 DragTo(OffsetReference sourceOffsetReference, int sourceOffsetX, int sourceOffsetY, bool sourcePixelDrag, HtmlControl destination, OffsetReference destinationOffsetReference, int destinationOffsetX, int destinationOffsetY, bool pixelDrop);  
 DragToWindowLocation(OffsetReference sourceOffsetReference, int sourceOffsetX, int sourceOffsetY, bool sourcePixelDrag, OffsetReference windowOffset, int windowOffsetX, int windowOffsetY, bool pixelDrop);

How do we define the most useful overload method from here?

1.. Can we rely on x,y locations on a browser?
2. how many offsets we have?
3. how to define points?

Cant rely on xy locations, this is my argument, so what I'm proposing to use is the 5th overload method


 DragTo(HtmlControl control, OffsetReference destinationOffsetReference, Point destinationOffset);


Because this is using the HTML control so offsets doesn't apply to the whole screen its only inside the control

So what is an offset referance?

 Offset reference is which part of the droptiem  element you are going to drop the dragitem 

 its really easy to use offset use the below code

 ArtOfTest.Common.OffsetReference.BottomLeftCorner

You could use: 
BottomLeftCorner 
TopLeftCorner 
BottomrightCorner


so how do i set the point?

 Point should be created from System.Drawing class

 var des = new System.Drawing.Point();  
 des.X = topcontentarea.ScrollTop;  
 des.Y = topcontentarea.ScrollLeft;


now we need all the valibales you need to pass for the DragTo() Method


 dragitem.DragTo(dropitem, ArtOfTest.Common.OffsetReference.BottomLeftCorner, des);


There you go!!! :)  Happy testing

Comments

Post a Comment

Popular posts from this blog

Sheduling tests - Running Tests From the Command line | Telerik Testing Framework

Image
Telerik test studio   Has its own test scheduler so you can schedule tests from the Telerik IDE itself, but what if you're using there Free framework? Telerik Testing Framework Scheduling can be done using couple of methods, If you have Team foundation server  (TFS) you can create a CI module for this can if you have Microsoft Test Manager you can schedule and run the tests. If you don't have any of those tools but if you still want to schedule and run your tests this is a very simple method you can use. Just follow the below steps Step 1: Add a test settings file. Right click on your visual studio solution select Add > New Item Select Test settings Tab on the right and click on  Test Settings File to your project [Figure 1] Figure 1 No need to add or change any properties in the Test Settings file at the moment, just close it Build your solution Step 2 Create a text file, you can use notepad or Notepad++ for this task Copy the b...
Read more

Using page object model with Telerik Framework

Image
In this blog we are going to talk about how to use Page Object Model to arrange your page UI elements in your test. Page object Model is a design pattern used  to create  Object Repository  for web UI elements  in test automation. Page object Model is used heavily in selenium but its is a good practice to use it in Telerik framework because we don't get a pre populated DOM  like in Telerik test studio. Actually we are using a modified Page Object Model in here, Lets take a login scenario as an example Login Page With out using Page object model the login script will look like this HtmlInputText Uname = myManager.ActiveBrowser.Find.ById("username").As<HtmlInputText>(); HtmlInputText Pass = myManager.ActiveBrowser.Find.ById("password").As<HtmlInputText>(); HtmlInputButton login = myManager.ActiveBrowser.Find.ById("loginbutton").As<HtmlInputButton>(); myManager.ActiveBrowser.Actions.SetText(Uname, "User...
Read more