Click empty span elements

[luke_jones]

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? 

[Ryan_Moran]

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.

[luke_jones]

Yes, I'm just trying to avoid that situation.

[TanyaYatskovska]

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]

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]

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]

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]

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]

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.

[dganov]

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.