Ask a Question

Click empty span elements

luke_jones
Occasional Contributor

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 10
Ryan_Moran
Valued Contributor

RE: Click empty span elements

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.

''-Praise the sun and Give Kudos.''
luke_jones
Occasional Contributor

RE: Click empty span elements

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

RE: Click empty span elements

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();



---------
Tanya Yatskovskaya
SmartBear Community and Education Manager

Did my reply answer your question? Give Kudos or Accept it as a Solution to help others. ⬇️⬇️⬇️
luke_jones
Occasional Contributor

RE: Click empty span elements

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
Contributor

RE: Click empty span elements

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
Contributor

RE: Click empty span elements

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
Occasional Contributor

RE: Click empty span elements

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
Valued Contributor

RE: Click empty span elements

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.

''-Praise the sun and Give Kudos.''
dganov
Staff

RE: Click empty span elements

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.
cancel
Showing results for 
Search instead for 
Did you mean: