Mouse hover and other mouse events in WebDriver

Posted on by Aditya

This is widely known issue among web driver community, how to perform mouse hover.  I have many scenarios in my test where I needed to perform mouse hover to see calendar, email schedule etc. After many attempts, I found solution which is actually working very well for me but I am not sure if it’s going to work with your application of not.  Before going into coding we need to consider few limitations,

  • In Firefox, you have to maximize the webpage just before doing mouseover to get the focus on browser.
  • Works fine even in normal window size with other browser like IE and Chrome.



For mouse event, you  can call Action builder or even java script can do as well. I will not go in more theoretical detail but directly into coding. I am giving the same code I am using in my scripts, so please feel free to change or modify as per your need.

Using Action Builder:

<br />
public static bool ElementMouseOver(IWebElement targetElement)<br />
        {<br />
            Size currentWinSize = _driver.Manage().Window.Size;<br />
            _driver.Manage().Window.Maximize();<br />
            OpenQA.Selenium.Interactions.Actions builder = new OpenQA.Selenium.Interactions.Actions(_driver);<br />
            try<br />
            {<br />
                builder.MoveToElement(targetElement).Build().Perform();<br />
                Thread.Sleep(2000);//2 sec is just to for this blog.<br />
                                   //I use custome method to wait element being appeared after mouse hover event.<br />
                                   //You can use other variable wait time but make sure your give some pause<br />
                                   //otherwise mouse hover will happen for fraction of seconds and then disappear.</p>
<p>                _driver.Manage().Window.Size = currentWinSize;<br />
            }<br />
            catch (Exception e)<br />
            {<br />
                loggerInfo.Instance.Message(e.Message);<br />
                return false;<br />
            }<br />
            return true;<br />
        }<br />



Using JavaScript

<br />
public static void MouseHoverByJavaScript(IWebElement targetElement)<br />
        {</p>
<p>            string javaScript = &quot;var evObj = document.createEvent('MouseEvents');&quot; +<br />
                                &quot;evObj.initMouseEvent(\&quot;mouseover\&quot;,true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);&quot; +<br />
                                &quot;arguments[0].dispatchEvent(evObj);&quot;;<br />
            IJavaScriptExecutor js = _driver as IJavaScriptExecutor;<br />
            js.ExecuteScript(javaScript, targetElement);<br />
          }<br />

You can use above java script to perform other  mouse events like click/double click. Please refer initMouseEvent which you can use in above code.
                          
I implemented drag and Drop event as well using Action builder itself.
Drag And Drop

</p>
<p>            IWebElement source = FindElement(&quot;blah blah&quot;);<br />
            IWebElement target = FindElement(&quot;blah blah&quot;);<br />
            OpenQA.Selenium.Interactions.Actions builder = new OpenQA.Selenium.Interactions.Actions(_driver);<br />
            try<br />
            {<br />
               builder.DragAndDrop(source, target).Build().Perform();<br />
            }<br />
            catch (Exception e)<br />
            {<br />
                //log Exception.I use NLog.<br />
            }</p>
<p>

Everyone uses own approach to handle such events. I mostly use Firefox/Chrome for testing as IE some time very flaky. And personally I hate IE. I tested above code in FF/Chrome and it was working fine. I would like to learn new way to handle such events If you are aware of any and please don’t forget to post in comment below or email me via contact us page.

Comments (17)
drag And drop in webdriver mouse listener in webdriver mousehover selenium

17 Replies to “Mouse hover and other mouse events in WebDriver”

  1. samwoo111 says: Reply
    October 4, 2012 at 9:38 PM

    I ran into a case where when I drag and drop I have to put a short sleep after moving the mouse and releasing the mouse button. To fix the issue I changed my DragAndDrop function to do this:

    Actions builder = new Actions(WTWebUiAuto.webDriver);
    builder.ClickAndHold(source);
    builder.MoveToElement(target, xOffset, yOffset);
    builder.Perform();

    Thread.Sleep(delayBeforeDropping);
    Actions builder2 = new Actions(WTWebUiAuto.webDriver);
    builder2.Release();
    builder2.Perform();

  2. samwoo111 says: Reply
    October 4, 2012 at 9:40 PM

    And thanks, your mouseover methods helped fix an issue I was seeing sometimes in firefox.

  3. admin says: Reply
    October 5, 2012 at 2:30 AM

    Thanks samwoo111 for your comments. I am very glad that above code helped you!.

  4. Deepak says: Reply
    January 22, 2015 at 7:18 PM

    GREAT lines of code.
    Solved my problem
    Thanks a lot

    public static void MouseHoverByJavaScript(IWebElement targetElement)
    {

    string javaScript = “var evObj = document.createEvent(‘MouseEvents’);” +
    “evObj.initMouseEvent(\”mouseover\”,true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);” +
    “arguments[0].dispatchEvent(evObj);”;
    IJavaScriptExecutor js = _driver as IJavaScriptExecutor;
    js.ExecuteScript(javaScript, targetElement);
    }

  5. surekha says: Reply
    July 8, 2015 at 1:32 PM

    i need mouse hover code for python not java and also for Interent explorer browser .Please provide solution .It may great help for us.

    1. Aditya says: Reply
      July 9, 2015 at 1:45 PM

      Hi Surekha,
      Try this
      from selenium.webdriver.common.action_chains import ActionChains

      def hover(self):
      wd = webdriver_connection.connection
      element = wd.find_element_by_link_text(self.locator)
      hov = ActionChains(wd).move_to_element(element)
      hov.perform()

      if this doesn’t work, please post your question in http://learnseleniumtesting.com/forum/

  6. Sreekanth says: Reply
    September 2, 2015 at 10:54 AM

    Hi,
    I am running the selenium scripts on Safari browser but its doesnt support interaction API. can you please send me the workaround javascript code for the below code please.

    Actions action = new Actions(driver);
    action.moveToElement(element);
    action.clickAndHold();
    action.moveByOffset(100,200).moveByOffset(-10, -20).moveByOffset(-10, -10).moveByOffset(-10, -20).build().perform();
    action.release().build().perform();

  7. Sonali says: Reply
    September 25, 2015 at 11:50 AM

    Hey Aditya,
    Your code has really helped me.
    Thanks a lot 🙂

    1. Aditya says: Reply
      September 25, 2015 at 3:05 PM

      Thanks Sonali,
      Glad that code was helpful.

  8. Mohit says: Reply
    March 3, 2016 at 9:42 AM

    The below mouse action code has worked for me while selecting a value from a drop-down :
    Actions act = new Actions(driver);
    act.moveToElement(driver.findElement(By.xpath(“”))).perform();
    act.moveByOffset(10, 0);(driver.findElement(By.xpath(“element path”))).click();

  9. Raveendra says: Reply
    April 7, 2016 at 1:05 PM

    How i need to copy the text of the field once Hover on element.?

    1. Aditya says: Reply
      April 7, 2016 at 1:16 PM

      Raveendra,
      Once you hover the mouse over the element, you just need to read that items in the same way you read other element. I think you are talking about some special case. Please share the issue with example.

  10. Sowjanya says: Reply
    September 22, 2017 at 7:22 PM

    Hi Aditya,

    Drag and Drop is not working for me on chrome for react code.. my code is

    public void scrollGrid() throws Exception
    {
    Actions actions = new Actions(driver);
    actions.moveToElement(driver.findElement(By.xpath(“.//*[@class=’price-org’]”)));
    actions.click();
    actions.sendKeys(Keys.PAGE_DOWN);
    actions.build().perform();
    WebElement ele=null;
    WebElement ele2=null;
    int flag=0;

    do{
    try{
    //element to search for while scrolling in grid
    ele = driver.findElement(By.xpath(“.//*[@class=’price-org’] //span[contains(text(),’R4 AU/NZ’)]”));
    ele2= driver.findElement(By.xpath(“.//*[@class=’create-event-drop-target’]”));
    /*
    Actions operation = new Actions(driver);
    operation.dragAndDrop(ele, ele2).build().perform();*/
    Actions builder = new Actions(driver);
    builder.clickAndHold(ele);
    builder.moveToElement(ele2, 800,691);
    builder.perform();

    Thread.sleep(1000);
    Actions builder2 = new Actions(driver);
    builder2.release();
    builder2.perform();

    Thread.sleep(3000);
    flag=1;
    } catch(Throwable e){
    //scrolling the grid using the grid’s xpath
    // driver.findElement(By.xpath(“.//*[@class=’hierarchy’]”)).sendKeys(Keys.PAGE_DOWN);
    Thread.sleep(3000);
    }
    }while(flag==0) ;

    if(flag==1){
    System.out.println(“Element has been found.!!”);

    }else{
    System.out.println(“Element has not been found.!!”);
    }

    }

    It says element is found.. test case is pass.. but the element is not dropped into the target

    1. Aditya says: Reply
      September 22, 2017 at 8:31 PM

      Try you code on following website which is reactjs based.
      https://fritz-c.github.io/react-sortable-tree/
      Since this is working code so difficult to say if you dev needs to make it testable or something wrong with code. If not working here then I will try to investigate and see if I need to add new code to support reactjs UI too.

  11. Vikas says: Reply
    November 6, 2017 at 6:11 AM

    Hi Sreekanth, I am facing the same issue with moveByOffset. Its not working on chrome when i am using it with clickAndHold(). How it worked for you.

    1. Aditya says: Reply
      November 6, 2017 at 4:02 PM

      Vikas,
      What kind of issue you are seeing? If possible, please share your’s or any sample code and that url (if available publically) where I can try your code.

  12. Prashant says: Reply
    August 28, 2018 at 2:04 PM

    I am facing a issue here , I have a link which on hover creates dropdown of other link which on hover shows a single link and i need to click this link.
    Mother link (on hover)
    |
    Child Link (on hover)
    |
    grandchild (click)

    Can somebody help me in this , I am using Java
    Thanks.

Leave a Reply