Hi, I need to select items from a tree view. this tree view is created in angular js.when i spy this tree view I am not getting the witems property.even the methods used to get items from tree view are not available,like Expanitem, clickitem these methods are not available. even double clicking on the lable does not expand the tree. can you suggest me some way to click on the plus icon (check attached image)which I am not able to spy using the object object spy.or any alternative method to select the angular js tree view items. Thanks

Hi , Find the label and get width and height For example TreeView.Click(label.width+10/2,label.Height/2); another way,Place selection on TreeItem,Press Space Key [Space],it will expand. Regards,Karthick Raj P

Close. Hard to say what's happening exactly as I'm not sure exactly which object you are passing your function. But you are using the wrong information, and clicking in the wrong place. You're also trying to interpret and object by moving the mouse to it and getting the object under the mouse at that point? If there are overlays and things in place, that could all go horribly wrong. Anyway. Using the example here: http://www.jqueryrain.com/?KIVkhqxl As it looks most similar to yours. (But may not be. It looks like there are various ways of building these and this looks closer than the other example I found.) This code (VBScript - which is what you're using by the look of it): Function ClickNode() Dim searchPROP(1) Dim searchVAL(1) searchPROP(0) = "contentText" searchPROP(1) = "className" searchVAL(0) = "root2*" searchVAL(1) = "node-wrapper" Set tree = Sys.Browser("iexplore").Page("http://www.jqueryrain.com/?KIVkhqxl").Frame(0).Panel(0).Panel(0).Panel(0).Panel(0).Panel(0).Panel(1).Panel(1).Panel(0).Panel(1).Panel(0).Panel(0).Panel(3).Panel(0).Panel(0).Panel(0).Panel(0).Panel(0).Frame(0).Panel(0) Set node = tree.FindChild(searchPROP, searchVAL, 2) y = node.Height / 2 x = 4 node.Click x,y End Function Will expand/contract the second node in tree on that example page. It's simple enough. Assigns the tree container to an object. Searches for the node it wants within the tree using the content text and class name. You have to use two parameters to make sure you get the single line. If you don't, and search using text only, it will find the container wrapper for the entire node (including child nodes if it's open) and the co-ordinates could be wrong (they'll be wrong if the node is expanded). You have to isolate it to the single line within the node. With a "*" in the text search part as it's only the first, main text, part I'm after. Assigns that to an object. Gets the height of the node and divides by 2 to get the mid-point. Don't need the width as we know it's the little arrow on the left we want to click so it's hard-coded to 4. The height on this is example is 29. So call it 15 once divided by 2. It then applies the Click on the node it found at point 4 , 15 within the object. So 4 pixels in halfway up. And the node expands. Or contracts. Depending what state it's currently in. (You can also check that.) If you change the text search string to "asyncroot*", it will do the same to the third node. Etc etc. You would need to add to this. Pass in parameters. Add some error handling. Put it in some sort of stepped loop if you need to go several levels deep. But this demonstrates the basics of clicking a single node. Open the sample I linked to in IE and try it. (Should work in Chrome as well but it looks like Chrome updated itself last night and I'm going to have to update or patch my TestComplete install to get it working again. Sigh.)

What are you clicking on? The first example I linked to, the expanders (the bit you need to click on) was a child object of the node. The second example was a little more fiddly. You can still find the node using content text, but it's the little arrow on the left you need to click to expand it. This is not seen as a child object like in the first example. But instead, you just click half way up the height of the node and a couple of pixels in from the left and it expands as it's supposed to. If your one uses clicks on the node directly (rather than an embedded child object), then you need to do something similar to the first reply. ie. get the co-ordinates of the node, work out the centre-point, and just apply a mouse click there. Similar to the second example. If it's the "+" in a box you need to click, get the left edge and centre point of the node , relative to the control container, and then move left a set number of pixels and that should click on the expander. There will be a way of doing it. Might just need a little more thought than usual. All the elements seem to be there. You just need to work out a way of manipulating it if it's not giving you out-of-the-box methods you can use. Not all controls do. Another possibility may be to use keypresses to move around inside it. Depends if the active node is flagged in a way that you can detect. eg. Move down all nodes in a loop checking which one is active each time. When the one you want becomes active, hit enter, or space, or whatever key acts as a shortcut in your case. Your second screenshot isn't very helpful without some context. I have no idea where that control sits. Is it a node? Is it a child of a node? Where does the top level container sit? And there are a bunch more properties cut off and we can't see any of the available methods ....

OK. Sounds much the same as my second example. So assign the tree container (the top level object - the tree itself) to a variable. Do a FindChild on that using the content text to get the node you want. Then get the Height property of the node. You don't need the width as you will always apply the click at the same point in from the left. Apply a click to the found node using half the height as the Y co-ordinate, and 4 (or whatever is applicable, I don't know the exact size and scaling here) as the X co-ordinate. This should apply the click on the "+" and expand the node. Obviously, you'll probably need to put this in some sort of loop if you need to go several levels deep. I can see how it could be done, but I'm afraid I can't sit here at work and write an entire custom routine for you! I have to do something very similar to this on a Tree View in my application as there are custom event triggers on it which are only triggered if the mouse click is applied in the correct place. So I do the same thing. Find the node, then use it's size and relative position to the parent control to work out where to apply the click.

How your object is mapped in Name mapping?. As you said you are not able to see the wItems in your object please share the screenshot of the object mapping and methods of that then we will try to see what is causing issue.

How to select items from a angular js tree view

14 Replies

karthick7
Contributor
8 years ago
Hi ,

Find the label and get width and height

For example

TreeView.Click(label.width+10/2,label.Height/2);

another way,
Place selection on TreeItem,Press Space Key [Space],it will expand.

Regards,
Karthick Raj P
- tristaanogre
  Esteemed Contributor
  8 years ago
  karthick7 wrote:
  
  Hi ,
  
  Find the label and get width and height
  
  For example
  
  TreeView.Click(label.width+10/2,label.Height/2);
  
  another way,
  
  Place selection on TreeItem,Press Space Key [Space],it will expand.
  
  Regards,
  
  Karthick Raj P
  
  These are some good alternatives. However, we might be able to get this to work if we know what kind of TreeView it is. What is sounds like is that the treeview object is not being identified as a known component type.
  
  This is the list of supported Angular JS controls. https://support.smartbear.com/testcomplete/docs/general-info/supported-technologies/controls/angularui.html
  
  If your component is not one of these, then either go with karthick7 suggestion or see if we can map the object to something similar in your project object mapping (Tools | Current Project Properties)
  - Colin_McCrae
    Community Hero
    8 years ago
    Looking at the TC docs, Angular JS Trees are not supported directly.
    
    But I had a look at an example one. The one on here: https://angular-ui-tree.github.io/angular-ui-tree/#/basic-example
    
    ... and I was able to interact with it easily enough. The tree itself shows as a top level control. All it's nodes show as child items. All text within the nodes was visible and I was able to search by it. And the clickable controls (expand, add, remove) within each node were all accessible and usable. I'd be happy I could build my own handler function to allow me to use them without too much trouble.
    
    Of course, this is based on an example one I happened to find online. I have no idea if the one you're dealing with behaves the same way.
- ameykhopade
  Contributor
  8 years ago
  Hi,
  
  can you tell me what you mean by label and treeview (which objects)
  
  I tried something similar
  
  On Error Resume Next strLongName = func_RetrieveLongName(Driver2)
  ' here from "func_RetrieveLongName"
  I am getting the full of the object from a excel sheet as I am doing this as data driven, that full name is
  Sys.Browser("iexplore").Page("*").Panel(1).Panel(0).Panel(0).Panel(1).Panel(0).Panel(0).Panel(0).Panel(0).Panel(1)
  panel(1) in having only one child i.e for the "Routine" label as panel(0) (attached image img.PNG)
  
  Set Obj = eval(strLongName) Dim x,y x = Obj.Left + Obj.Width / 2 y = Obj.Top + Obj.Height / 2 ' Obtains the IMG object by coordinates Set a= Sys.Desktop.ObjectFromPoint(x, y) If a.Exists Then a.Click Else Call Log.Warning("Unable to simulate the click.") End If If Err.Number > 0 Then Log.Message Err.Description End if
  for the a.click action I am getting message "waiting until the overlapped window becomes visible"
  
  as my tree view in on the Modual Dialogue Box
  so i guess I need to get the coordinates of that dialogue box I am not sure how to get them any idea on this?
  
  and is the code i have written correct?
  
  thanks,
  Amey
  - Colin_McCrae
    Community Hero
    8 years ago
    Close.
    
    Hard to say what's happening exactly as I'm not sure exactly which object you are passing your function. But you are using the wrong information, and clicking in the wrong place. You're also trying to interpret and object by moving the mouse to it and getting the object under the mouse at that point? If there are overlays and things in place, that could all go horribly wrong.
    
    Anyway.
    
    Using the example here: http://www.jqueryrain.com/?KIVkhqxl
    
    As it looks most similar to yours. (But may not be. It looks like there are various ways of building these and this looks closer than the other example I found.)
    
    This code (VBScript - which is what you're using by the look of it):
    
    Function ClickNode() Dim searchPROP(1) Dim searchVAL(1) searchPROP(0) = "contentText" searchPROP(1) = "className" searchVAL(0) = "root2*" searchVAL(1) = "node-wrapper" Set tree = Sys.Browser("iexplore").Page("http://www.jqueryrain.com/?KIVkhqxl").Frame(0).Panel(0).Panel(0).Panel(0).Panel(0).Panel(0).Panel(1).Panel(1).Panel(0).Panel(1).Panel(0).Panel(0).Panel(3).Panel(0).Panel(0).Panel(0).Panel(0).Panel(0).Frame(0).Panel(0) Set node = tree.FindChild(searchPROP, searchVAL, 2) y = node.Height / 2 x = 4 node.Click x,y End Function
    
    Will expand/contract the second node in tree on that example page.
    
    It's simple enough.
    
    Assigns the tree container to an object.
    
    Searches for the node it wants within the tree using the content text and class name. You have to use two parameters to make sure you get the single line. If you don't, and search using text only, it will find the container wrapper for the entire node (including child nodes if it's open) and the co-ordinates could be wrong (they'll be wrong if the node is expanded). You have to isolate it to the single line within the node. With a "*" in the text search part as it's only the first, main text, part I'm after.
    
    Assigns that to an object.
    
    Gets the height of the node and divides by 2 to get the mid-point.
    
    Don't need the width as we know it's the little arrow on the left we want to click so it's hard-coded to 4.
    
    The height on this is example is 29. So call it 15 once divided by 2.
    
    It then applies the Click on the node it found at point 4 , 15 within the object. So 4 pixels in halfway up.
    
    And the node expands. Or contracts. Depending what state it's currently in. (You can also check that.)
    
    If you change the text search string to "asyncroot*", it will do the same to the third node. Etc etc.
    
    You would need to add to this. Pass in parameters. Add some error handling. Put it in some sort of stepped loop if you need to go several levels deep. But this demonstrates the basics of clicking a single node. Open the sample I linked to in IE and try it. (Should work in Chrome as well but it looks like Chrome updated itself last night and I'm going to have to update or patch my TestComplete install to get it working again. Sigh.)
shankar_r
Community Hero
8 years ago
How your object is mapped in Name mapping?. As you said you are not able to see the wItems in your object please share the screenshot of the object mapping and methods of that then we will try to see what is causing issue.
- ameykhopade
  Contributor
  8 years ago
  Attached the snapshot

Forum Discussion

How to select items from a angular js tree view

14 Replies

Related Content

Select a specific ROW item in file explorer

ClickItem select another Option

ClickItem is selecting each drop-down item in latest TestComplete instead of required item

Angular 2 Dropdown elements doesnt get selected

TestComplete not recognizing Angular objects

Recent Discussions

Delay after pressing specific Key

Best way to handle Azure login using TestComplete

The Recording tool does not record a click on a link and I do not know why

OCR recognition no longer recognizes newline between keywords

Unable to connect to the license server. Connection is not blocked on your side.