TestComplete doesn't show click method on inspection but it will appear in browser

The object is a <span> and not a <button>, hence Click() method won't work. Try getting the parent object, and see if Click() method works.

This might be able to help, https://stackoverflow.com/questions/34047001/how-to-click-on-a-span-using-javascript-span-has-no-class-or-id

Hi rraghvani thank you for the reply. Unfortunately that button when clicked is just to produce the dropdown menu to see the further nodes. The <span> element which is the "plus" icon on the browser is what im trying to click to show a further dropdown menu. However that is the only element used to show that further dropdown menu, if you remove that <span> you can no longer access or click anywhere to get that next dropdown menu.

I have tried to use the JQuery code you suggested however it produces an error "is not a function" when i run the test. Is their a specific way of using Jquery or regular JavaScript within TestComplete?

I've found an example website that uses <span> on a tree view. The following coding is able to click on  Beverages and expand the nodes.

I suggest you try to perform a click on "Node 1" text

Hi rraghvani, unfortunately I have already tried clicking on the "Node 1" text, but it is not clickable. Only the <span> containing the "plus" icon is clickable. 

What does the HTML coding look like? For example, 

The code is on the lines of this: 

<ul>

     <li>

          //This is the element that needs to be clicked

          <span>::before</span>

          //This is the element containing the "Node 1" text

          <span>Node 1</span>

     </li>

</ul>

So the first <span> is what needs to be clicked, if you remove this span the dropdown menu can no longer be accessed anymore. 

I mean the full HTML, including these items

It's not possible to click on a <span> unless it has text

The full HTML is:

<div>

   <button>

      <span>Dropdown node</span>

      <span><span>

   <button>

   <ul>

      <li>

         ::marker

         <span class="treeToggle glyphicon glyphicon-minus-sign">::before</span>

         <span></span>

         <ul>

              <li> title="node 1">

                  <span>::before</span>

                  <span>Node 1</span>

                  <ul>for the dropdown list items .....</ul>

              </li>

         </ul>

      </li>

   </ul>

</div>

The span with the class "glyphicon-minux-sign" is just used to collapse the tree. 

It won't be possible to select the item.

Not sure why you have empty <span><span>. You need to speak to speak with your developers to resolve this.