Unable to click or hover mouse on a Span element

[nish_b]

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!

[BenoitB]

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

[nish_b]

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.

[BenoitB · Accepted solution]

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

[nish_b]

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

[nish_b]

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.

[AlexKaras · Accepted solution]

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.

[nish_b]

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!

[AlexKaras]

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.

[nish_b]

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