not able to use Drag method

[nitingambhir88]

Hi,

I am trying to drag and drop an item from one panel to another. When i record and play the script, it works fine. But when i try to use the Drag method in my script (using javascript), it says Drag is not a function. What is possible wrong here ?

Record script - 

let page = Aliases.pageShoppingPortal;

page.panel.Drag(134, 23, 26, 182);

Javascript - 

let memberdrag = page.contentDocument.getElementsByClassName("name cdk-drag");

memberdrag.item(1).Drag(134, 23, 26, 182);

[AlexKaras]

Hi,

> Drag is not a function. What is possible wrong here ?

.Drag() method is provided by TestComplete.
The error reported means that your code tries to call the .Drag() method for the object that does not provide it.

The reason is the use of native DOM objects and methods in the code (contentDocument and getElementsByClassName() ) - as it is described in the documentation, native DOM object is returned in case when TestComplete cannot match the object that is returned by native DOM methods to the object from TestComplete's Object Tree (which is your case).
Solution: either stick to the methods provided by TestComplete (.FindXXX() methods and Aliases) or check whether or not the returned object is native DOM one and don't use properties and methods provided by TestComplete for native DOM objects.

P.S. As it was often mentioned on these forums: use of native DOM properties and methods as well as Selenium-like search by XPath, ClassName, etc. (except for extreme cases and in case of cross-platform test code for TC 14.50 and up) is highly not recommended in TestComplete's world and can be considered to be a bad style/approach.

[nitingambhir88]

Hi Alex,

Thanks for the quick and efficient reply.

I checked with object spy and found out that the object which i am trying to drag and drop , supports Drag() method. 

Can you suggest me something appropriate with a Find() method OR whatever best solution you provide, i am all game.

P.S. I am using javascript + my project uses angular.

Please check screenshot for better idea of what and where i am trying to drag and drop.

Thanks in advance.

[AlexKaras]

Hi,

> something appropriate with a Find()

You need to examine tested web page in the Object Browser and find out a set of unique and stable parameters that correspond to the source and target web elements (i.e. web elements you are going to drag from and to).

My preference is to use .Find() method and, considering your initial message, the code might look like this:

let page = Aliases.pageShoppingPortal;

let memberdragFrom = page.Find("class", "*name cdk-drag*", -1);

let memberdragTo = page.Find("class", "*name cdk-dragTo*", -1);

if (!(memberdragFrom.Exists && memberdragTo.Exists))

  ... ' handle the case when one or both web elements were not found

let toX = memberdragFrom.Left - memberdragTo.Left +memberdragTo.Width / 2;

let toY = memberdragFrom.Top - memberdragTo.Top +memberdragTo.Height / 2;

memberdragFrom.Drag (memberdragFrom.Width / 2, memberdragFrom.Height / 2, toX, toY, skNoShift);

Note: Depending on the tested page you might need to adjust the value of the Dragging Delay / Mouse Movement Delay parameters under Tools | Current Project Properties -> Playback.

[nitingambhir88]

let memberdragFrom = page.Find("class", "*name cdk-drag*", -1);

Here, there are 2 elements with the same class name, and i want to pick the 2nd one.

Similarly, for memberdragTo , there are 3 elements with the same class name(dragHere), and i want to pick the 3rd one. 

I am not able to find unique identifiers for these two. That is why in my example above, i was using item(1) and item(2) to pick 2nd and 3rd item of the same name class.

I am sorry to bug you again and again, but i am scratching my head and trying codes, but nothing is working for me.

[AlexKaras]

Hi,

> I am sorry to bug you again and again

That's OK with no problem indeed. We all here are trying to help when we can. 🙂

Also SmartBear's Support is really helpful and can be contacted via the https://support.smartbear.com/message/?prod=TestComplete form in case no one here can help.

> I am not able to find unique identifiers for these two.

This is the usual, common and generic problem of the majority of modern web applications created using modern libraries/technologies when testability is not considered on the design stage and is not specified into requirements. A lot of people here have this exact problem. Unfortunately, React and Angular are great examples of the libraries that by default produce barely testable web applications.

Obviously, the best and the most reliable way is to talk to Development and discuss with then the possibility to provide *stable and unique* identifiers for all web elements your test code needs to interact with.

Unfortunately, this might appear to be not achievable depending on the project.

The good news in this case is that more than one property can be specified as a search criteria for the .Find() method. For example, you may consider something like this:

let memberdragFrom = page.Find(["class", "index"], ["*name cdk-drag*", 2], -1);

to search for the web element with index that equals to two. For sure, as index is dynamic property, this approach is less stable and reliable when compared to unique identifiers like ID, but might appear to work for you.

So, again, examine the required web elements in the Object Browser and identify set of properties that are stable enough and make it possible to uniquely identify the required web element and use these properties and their values as a parameters for the .Find() method.

P.S. Consider the search not from the page root but from some intermediate container. For example, the source and target web elements (those you are dragging from and to) may be a children of different panels. If these panels are easily and uniquely identifiable, it might be more easy and more reliable to find those panels first and then search for the required web elements not from the page but using found containers as a search root.

Sometimes, such approach, combined with some simple math and tested application's specific may result in more reliable test code.

For example:

-- If Medical Group #1 and Medical Group #2 panels can be reliably identified;

-- You may search for all 'cdk-drag' web children for each panel;

-- The first (or the last) found element for every panel may be the sub-panel that the dragged element should be dropped to;

-- And the second (or the last but one) found element in this case may be the element that that can be used for dragging.

[sonya_m]

Thank you Alex, this is such an awesome thread! A lot of knowledge shared here🙂

Hi @nitingambhir88 ! Did Alex's latest advice help you solve the issue?

[nitingambhir88]

Hi Alex,

As per your suggestion, this is the code which i am using but it gives me as error for memberdragFrom  & memberdragTo both,   saying - "Invalid parameters specified"

function Drag_Smartbear(){

let page = Sys.Browser("*").Page("*");

memberdragFrom = page.Find(["class", "index"], ["*name cdk-drag*", 1], -1);
memberdragTo = page.Find(["class", "index"], ["*dragHere*", 2], -1);

if (!(memberdragFrom.Exists && memberdragTo.Exists)){

Log.Message("cannot be dragged")
}else {
Log.Message("Yay ! cann be dragged")
}

let toX = memberdragFrom.Left - memberdragTo.Left +memberdragTo.Width / 2;
Log.Message(toX);

let toY = memberdragFrom.Top - memberdragTo.Top +memberdragTo.Height / 2;
Log.Message(toY);

memberdragFrom.Drag (memberdragFrom.Width / 2, memberdragFrom.Height / 2, toX, toY, skNoShift);

}

[AlexKaras]

Hi,

> error for memberdragFrom  & memberdragTo

What exact lines fail?

If those are

memberdragFrom = page.Find(["class", "index"], ["*name cdk-drag*", 1], -1);
memberdragTo = page.Find(["class", "index"], ["*dragHere*", 2], -1);

then try to change them to

memberdragFrom = page.Find(new Array("class", "index"), new Array("*name cdk-drag*", 1), -1);
memberdragTo = page.Find(new Array("class", "index"), new Array("*dragHere*", 2), -1);

P.S. All code is a kind of sample pseudocode and is not tested.

[nitingambhir88]

Hey Alex,

Thank you for trying so much on this with me. I really appreciate your efforts.

I changed it to :

memberdragFrom = page.Find(new Array("class", "index"), new Array("*name cdk-drag*", 1), -1);
memberdragTo = page.Find(new Array("class", "index"), new Array("*dragHere*", 2), -1);

But still i am getting the same error for these 2 : Invalid parameters are specified.

Maybe. something wrong the the technical architecture of this page. If this does not works, can we try something else for drag and drop ?

I tried changing the depth, but the error seems to be the number or type of parameters?