cancel
Showing results for 
Search instead for 
Did you mean: 

Unable to click or hover mouse on a Span element

SOLVED
Highlighted
Contributor

Unable to click or hover mouse on a Span element

Issue: Using .Click() or .HoverMouse() is not working for 1 of the webelements of the type [HTMLSpanElement]. Error thrown is: TypeError: webObj.HoverMouse is not a function OR TypeError: webObj.Click() is not a function

 

Description: I need to either mouse hover or click on an element which looks like a button named as Panel Menu. This opens a a menu in which I should click on 1 of the options from the menu. PFA the screenshot - PanelMenu. This shows the webelement - Panel Menu on which I need to either Hover the mouse or click, so that it opens up the menu as shown. After that I need to click on Align Panels option within the menu. PFA the screenshot - PanelMenuElementInfo. This contains the HTML element details of it. I am using JavaScript to write a test script.

 

Code snippets (tried below options but no luck):

 

//Clicking the object

let webObj = this.getPanelMenuObj() //This returns the webelement of type [HTMLSpanElement]

webObj.Click(); //Just a normal click function which throws the error

 

//Mouse hover on the object

let webObj = this.getPanelMenuObj() //This returns the webelement of type [HTMLSpanElement]

let width = webObj.width

let height = webObj.height

let destX = (width/2) - 2

let destY = (height/2) - 2

webObj.HoverMouse(destX,destY);

 

The above approach had the the issue - Width and height was returning undefined value. So, I tried to hardcode the height and width by taking the values of height and width from the element's style attribute.

 

let webObj = this.getPanelMenuObj() //This returns the webelement of type [HTMLSpanElement]

let width = 81

let height = 27

let destX = (width/2) - 2

let destY = (height/2) - 2

webObj.HoverMouse(destX,destY);

 

This approach again throws the error: TypeError: webObj.HoverMouse is not a function.

 

NOTE: I tried to have a for loop which waits 1000 ms each time for the width of the web object to load the actual value. I looped for 25 times and every time it returned width as undefined.

 

Please help! Let me know if any other details are required!

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Community Leader

Re: Unable to click or hover mouse on a Span element

Perhaps the Panel menu is an object drawn directly on screen (onscreen object).

To check that use the object from point method.

To click on this kind of object you can use my method with a call like clickInObject("screen", x,y).

 

Un sourire et ça repart

View solution in original post

Highlighted
Community Hero

Re: Unable to click or hover mouse on a Span element

Hi,

 

Error thrown is: TypeError: webObj.HoverMouse is not a function OR TypeError: webObj.Click() is not a function

This is a clear indication that webObj is not a wrapping object provided by TestComplete (as a result of FindXXX() call or using the Aliases). Most probably, webObj was obtained as a result of search by XPath and is a native DOM object.

HoverMouse() and Click() are methods provided by TestComplete and cannot be used for native DOM objects.

.click() (note small 'c') is a native method provided by DOM, so webObj.click() should work. I believe that something like webObj.hover() should exist in DOM as well.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================

View solution in original post

9 REPLIES 9
Highlighted
Community Leader

Re: Unable to click or hover mouse on a Span element

when you spy the element, does the hovermouse appears in the Methods tab of the Inspector ?

Un sourire et ça repart

Contributor

Re: Unable to click or hover mouse on a Span element

Hi Benoit,

 

Thanks for your response. I used the Spy Object to try to identify the required object which is Panel Menu. But the pointer is unable to isolate correctly to only the Panel Menu object (Just yellow box).

 

It either selects the entire grey bar containing Panel Menu when I move the mouse close to it. Please refer to screenshot - PanelMenu_ObjSpy_SelectionObj1.

OR

when I place the mouse exactly on Panel Menu, it selects the entire webpage instead of selecting only the Yellow box - Panel Menu. Please refer to screenshot - PanelMenu_ObjSpy_SelectionObj2. 

 

However, In both the cases, I see Click and HoverMouse under Methods > Actions.

Highlighted
Community Leader

Re: Unable to click or hover mouse on a Span element

Perhaps the Panel menu is an object drawn directly on screen (onscreen object).

To check that use the object from point method.

To click on this kind of object you can use my method with a call like clickInObject("screen", x,y).

 

Un sourire et ça repart

View solution in original post

Highlighted
Contributor

Re: Unable to click or hover mouse on a Span element

Thank you, I will try it out and let you know how it goes.

Highlighted
Contributor

Re: Unable to click or hover mouse on a Span element

Thanks a lot for the help, Benoit!  You were correct - it is an onscreen element. I'm able to click on it using Screen coordinates and your method for click. 

 

@others looking at the solution for a similar problem, I had some challenge in identifying the correct coordinates (X - screenLeft and Y - screenTop) as the Object Spy wasn't identifying the exact element. So the workaround was to find 2 elements which are closest to required element and do Object Spy to capture the nearest X and Y, then do additions/subtractions. I tried Coordinates extension in Chrome, but that wasn't much accurate.

Highlighted
Community Hero

Re: Unable to click or hover mouse on a Span element

Hi,

 

Error thrown is: TypeError: webObj.HoverMouse is not a function OR TypeError: webObj.Click() is not a function

This is a clear indication that webObj is not a wrapping object provided by TestComplete (as a result of FindXXX() call or using the Aliases). Most probably, webObj was obtained as a result of search by XPath and is a native DOM object.

HoverMouse() and Click() are methods provided by TestComplete and cannot be used for native DOM objects.

.click() (note small 'c') is a native method provided by DOM, so webObj.click() should work. I believe that something like webObj.hover() should exist in DOM as well.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================

View solution in original post

Highlighted
Contributor

Re: Unable to click or hover mouse on a Span element

Thank you, Alex! I also tried your solution and it was a simple thing. It worked by changing the Click() to pure JavaScript click().

 

I tried to research on HoverMouse equivalent function in pure JavaScript. I did see that we could try by generating mouseover event on the element, like the one below, but It throws an error message - Error: Type mismatch.

 

var element = //place your element getter here
element.addEventListener('mouseover', function() {
Log.Message("Event triggered");
});

var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});

element.dispatchEvent(event);

 

However, since click() is helping me proceed, fixing mouseover issue is lower priority as of now for me.

 

If I am able to resolve the above issue or find the details of pure JavaScript function for mouseover later, I'll come back and post it here.

 

Thanks for the help!

Highlighted
Community Hero

Re: Unable to click or hover mouse on a Span element

Hi,

 

Great to hear that at least one problem has been solved 🙂

 

generating mouseover event on the element

I would recommend to read those articles: https://support.smartbear.com/testcomplete/docs/app-testing/web/common-tasks/javascript.html and https://support.smartbear.com/articles/testcomplete/embedding-scripts-into-web-pages/. Hope, they will help.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
Highlighted
Contributor

Re: Unable to click or hover mouse on a Span element

Sure Alex thanks for the documentation. I will use them for reference.

New Here?
Join us and watch the welcome video:
Announcements
Top Kudoed Authors