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

[bewen]

Hi, I am currently having issues attempting to click a icon button within my application. TestComplete is able to find the element through the FindChildByXPath method however, when TestComplete attempts to click the button I recivev an error saying "Click is not a function". 

Through further investigation within the Chrome inspect element "Click" is listed as an event listener. But in TestComplete this method does not appear. Is therre anyway to work around this issue?

Thank you for any help!

note: Some title and class names have been changed for the examples. Within the screenshot for the methods shown by TestComplete the remainder of the list that cannot be seen also does not show a Click method. 

[rraghvani]

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-cla...

[bewen]

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?

[rraghvani]

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

[bewen]

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. 

[rraghvani]

What does the HTML coding look like? For example, 

[bewen]

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. 

[rraghvani]

I mean the full HTML, including these items

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

[bewen]

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. 

[rraghvani]

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.