Selenium WebDriver: Handling mouseover and hover events

There are many ways to simulate mouse movement in Selenium WebDriver. A few of the of the ways I have used to date can be seen below.

1. Use the Actions class
2. Hijack the mouse
3. Execute Javascript

Example

Hello world

[C#] Solution 1 : Action class

[Test]

  public void handlingMouseoverEvent()

  {

   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/12/selenium-webdriver-handling-mouseover.html");

   Actions builder = new Actions(driver);

   IWebElement smiley = driver.FindElement(By.Id("hoverOverMe"));

   builder.MoveToElement(smiley).Build().Perform();   

  }

[C#] Solution 2 : Hijack the mouse

[Test]

  public void handlingMouseoverEvent()

  {

   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/12/selenium-webdriver-handling-mouseover.html");

   ILocatable hoverItem = (ILocatable) driver.FindElement(By.Id("hoverOverMe"));

   IMouse mouse = ((IHasInputDevices) driver).Mouse;

   mouse.MouseMove(hoverItem.Coordinates);   

  }

[C#] Solution 3 : Execute Javascript

[Test]

  public void handlingMouseoverEvent()

  {

   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/12/selenium-webdriver-handling-mouseover.html");

   var js = (IJavaScriptExecutor)driver;

            js.ExecuteScript("$('[id=hoverOverMe]').trigger('mouseover')");   

  }

Reference:

Actions
Provides a mechanism for building advanced interactions with the browser.

ExecuteScript
Executes JavaScript in the context of the currently selected frame or window.

IJavaScriptExecutor
Defines the interface through which the user can execute JavaScript.

ILocatable
Defines the interface through which the user can discover where an element is on the screen.

IMouse
Provides methods representing basic mouse actions.

MouseMove(ICoordinates)
Moves the mouse to the specified set of coordinates.

MoveToElement(IWebElement)
Moves the mouse to the specified element.

Selenium WebDriver: Perform a drag and drop

If your browser supports advanced user interactions like drag and drop, you can use the Actions class to imitate this behaviour.

Drag and Drop

This is an interactive demo. Drag and drop the small square into the large square. 

Below you will find an example detailing how to drag one element to another:

[C#] Solution 1

  [Test]
  public void draganddrop()
  {
   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/11/selenium-webdriver-perform-drag-and-drop.html");
   
   IWebElement source = driver.FindElement(By.Id("draggable"));
   IWebElement target = driver.FindElement(By.Id("droppable"));
   
   Actions builder = new Actions(driver);
    builder.DragAndDrop(source, target);
    builder.Build().Perform();

    Assert.That(dragAndDropIsComplete());
  }
  
  private bool dragAndDropIsComplete()
  {
   return driver.FindElement(By.ClassName("drag-and-drop-complete")).Displayed;
  }

[C#] Solution 2

  [Test]
  public void draganddrop()
  {
   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/11/selenium-webdriver-perform-drag-and-drop.html");
   
   IWebElement source = driver.FindElement(By.Id("draggable"));
   IWebElement target = driver.FindElement(By.Id("droppable"));
   
   Actions builder = new Actions(driver);
          builder.ClickAndHold(source);
          builder.MoveToElement(target);
          builder.Release(target);
          builder.Build().Perform();
    
   Assert.That(dragAndDropIsComplete());
  }
  
  private bool dragAndDropIsComplete()
  {
   return driver.FindElement(By.ClassName("drag-and-drop-complete")).Displayed;
  }

Tips:

• Ensure native events are enabled
• Maximise your browser windows before you perform a drag and drop

Reference: 

DragAndDrop

Performs a drag-and-drop operation from one element to another.

ClickAndHold

Clicks and holds the mouse button down on the specified element.

MoveToElement

Moves the mouse to the specified element.