Forum Discussion

nish_b's avatar
nish_b
Contributor
5 years ago

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!

  • BenoitB's avatar
    BenoitB
    5 years ago

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

     

  • AlexKaras's avatar
    AlexKaras
    5 years ago

    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.

     

  • AlexKaras's avatar
    AlexKaras
    Champion Level 3
    5 years ago

    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's avatar
      nish_b
      Contributor
      5 years ago

      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!

  • BenoitB's avatar
    BenoitB
    Community Hero
    5 years ago
    when you spy the element, does the hovermouse appears in the Methods tab of the Inspector ?
    • nish_b's avatar
      nish_b
      Contributor
      5 years ago

      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's avatar
        BenoitB
        Community Hero
        5 years ago

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