Forum Discussion

luke_jones's avatar
luke_jones
Occasional Contributor
10 years ago

Click empty span elements

We have a HTML object with the below structure...



<span class="glypicon-fast-back"></span>

<span class="glypicon-back"></span>

<input type="numeric" />

<span class="glypicon-forward"></span>

<span class="glypicon-fast-forward"></span>



I am selecting the span elements using the QuerySelector("span.glyphicon-back") method and then trying to click the selected element, but the test run fails stating that the element does not support the click method. I have overcome this in the past by changing the selector to include an element within the span, but in this instance there is nothing else to select. 



Has anyone else seen this issue? 

10 Replies

Sort By
  • dganov's avatar
    dganov
    Staff
    10 years ago
    Luke, I think there is a hack to do what you want - you need to add the non-empty role attribute for HTML nodes that are missing in the TestComplete Objects tree and then they should become available. You can do this by modifying the source code of web page, or by using code like this:



    page.contentDocument.Script.eval("(function () { var spans = document.querySelectorAll('span[class^=glyp]'); for (var i = 0; i < spans.length; i++) spans.setAttribute('role', 'button'); } ())")



    It finds all the span elements with the class attribute starting with "glyp" and adds to them role attribute with the "button" value.

    After this call you should be able to click on these spans.
  • Ryan_Moran's avatar
    Ryan_Moran
    Valued Contributor
    10 years ago
    You could possibly* work around it by calling Obj.Parent.Click(), and by specifying X Y coordinates for the span element using it's Top and Left properties.
  • TanyaYatskovska's avatar
    TanyaYatskovska
    SmartBear Alumni (Retired)
    10 years ago
    Hi Luke,

     


    It looks like TestComplete doesn't find the span element by the specified query. That's why, you are getting this error.


    There is a misprint in the class name in your query:


    QuerySelector("span.glyphicon-back")


    h is extra here.


     


    This code works for me:




       TestedPage =//...


       CSSSelector = "span.glypicon-back"; 


       res=TestedPage.QuerySelector(CSSSelector);


       if (res != null)


         res.Click();


     

  • luke_jones's avatar
    luke_jones
    Occasional Contributor
    10 years ago
    Thats just some example code which I seem to have put a typo in. I've debugged the test run and used the object inspector to make sure that the span is found but when inspecting it doesn't seem like there is a click method available. 
  • azakharov's avatar
    azakharov
    Contributor
    10 years ago
    Hi Luke,



    Can you try this?

    var page = Sys.Browser("Firefox").Page("*");

    var element = page.Find('className', 'glypicon-back', 100);

    Log.Message(element.    VisibleOnScreen); // Make sure this returns true

    element.Click();





    If it doesn't work then it probably means that this particular element is not clickable. Clickable element might be a parent or a child of this element.





  • azakharov's avatar
    azakharov
    Contributor
    10 years ago
    Another thing is css class is not required to be unique (versus id, that must be unique).

    Your script might see another element with the same css class.
  • luke_jones's avatar
    luke_jones
    Occasional Contributor
    10 years ago
    Please see the attached images, this is the object inspector which I have initiated from the 'Evaluate' menu during a debugging test run. The first image shows the object properties and the second the objects methods. As you can see there isn't a click method shown, is it usual that Test Complete doesn't allow Spans to be clicked? 





  • Ryan_Moran's avatar
    Ryan_Moran
    Valued Contributor
    10 years ago
    Luke,

    It is as you say and does not have a click method thus my previous suggestion.

    I can't tell how or even if you can "fix" that, but I believe you can use Test Completes record method to record your clicking the span element. The resulting code that the recorder generates should give you an idea of how to click this object.
  • luke_jones's avatar
    luke_jones
    Occasional Contributor
    10 years ago
    Thanks hanya, but I'd rather not have to get the HTML changed to enable to Test Complete testing. 



    I think for now I'll just do a click(x,y) call as all the spans I need to click have absolute positioning so won't be moving around.