Mouse Hover Action using selenium WebDriver

Mouse events like hovering, clicking on any element of the web page or the main menu and simulating the mouse actions/movements is not that tough in webDriver.  Most of the actions can be performed directly in the webdriver, here I am going to discuss about few of them. We use user interaction API constructor Actions with the moveToElement method to perform the task of monitoring the movements performed by the mouse events.

In mouser action, we use Actions(driver), object.moveToElement(), build(). and perform().

Action class is used to perform keyboard operation and mouse hover operations.

The build() method is used to compile all the listed actions into a single step.

Below is a simple script of  Mouse Hover Action. First of all we will write the scenario of what we will be going to do. Here we will automate the http://www.myntra.com and will perform the mouse hover actions.

1. Open A firefox Browser.
2. Navigate to the URL.
3. Maximize the window.
4. Now hover on the Men’s tab present in top navigational bar.
5. Select Bags and Bag-packs from Accessories.
6. Select the 1st item and add it to the shopping cart.
7. From shopping cart remove the product which has been added.
8. Close the browser.

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;


public class mouse_hover { 

    // TODO Auto-generated method stub  
     public static void main(String[] args)throws Exception{
  
     // TODO Auto-generated method stub
     // Initialize WebDriver
     WebDriver driver = new FirefoxDriver();
  
     // Wait For Page To Load
     driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
  
     // Go to URL
     driver.get("http://www.myntra.com/");
  
     // Maximize Window
     driver.manage().window().maximize();
  
     // Mouse Over On " Men link " 
     Actions a1 = new Actions(driver);
     a1.moveToElement(driver.findElement(By.xpath("//a[@href='/shop/men?src=tn&nav_id=5']"))).build().perform();
     Thread.sleep(3000L);
  
     // Wait For Page To Load
     driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
  
     // Click on " bags & backpacks " link
     driver.findElement(By.xpath("//a[@href='/men-bags-backpacks?src=tn&nav_id=25']")).click();
  
     // click on the categories - Bagpacks
     //  driver.findElement(By.xpath("//*[text()='Categories']//following::li[1]/label']")).click();
     // Hover on the 1st bag 
     Actions a2 = new Actions(driver);
     a2.moveToElement(driver.findElement(By.xpath("//ul[@class='results small']/li[1]"))).build().perform();
  
     //Click on the buy icon of the 1st bag
     driver.findElement(By.xpath(" //ul[@class='results small']/li[1]/div[1]//div[2]")).click();
  
     // Wait For Page To Load
     driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
  
     // Hover over the shopping bag icon present on the top navigatinal bar   
     Actions a3 = new Actions(driver);
     a3.moveToElement(driver.findElement(By.xpath("//a[@href='/checkout/cart']"))).build().perform();
  
     // click on the remove icon
     driver.findElement(By.xpath("//a[@data-hint='Remove item']")).click();
  
     //closing current driver window 
     driver.close();   
    }
}

Hope this helps the beginners.

Thanks for reading.
CodeProject

Locating Elements on a web page

In my previous article I have written about Browsers Commands.

In a webpage there are different Web Elements present like Buttons, Inputs boxes, Links, Drop-down lists, Check-boxes, Radio buttons, Plain texts and other items.To interact with the above elements we need to locate them first. Selenium provides number of Locators to locate the elements.

The different types of locator are-

• Locating By Id
• Locating By Name
• Locating By Class Name
• Locating by Tag Name
• Locating Hyperlinks by LinkText
• Locating By Xpath
• Locating By CSS

Locating elements on a webpage can be done using the findElement and findElements method.

findElement() –

• This method will find the first element within the current page using the given “locating mechanism”.
• It returns a single WebElement.
• If “findElement” will not find any element within the page then it will throw NoSuchElementException.
• Syntax – WebElement findElement(By. “ANY LOCATOR”);

findElements() method –

• This method is use to find multiple element on webpage.
• It returns a list of WebElements.
• If no element is not found, it will return empty List of WebElement and no exception will be thrown.
• Syntax – java.util.List<WebElement> findElements(By. “ANY LOCATOR”);

Now we have to install 2 plugins[Firebug, Firepath] so as to integrate it with Firefox as it will help us to inspect the element and to generate Xpath.

• First Add Firebug to the Firefox. Click this link to Add.
• After integrating the FireBug with Firefox add FirePath from this Link.

Now Open the Firebug by Pressing F12 on your keyboard. Then click on the inspect Element icon in the Firebug. It will show the html view of that particular element. See below for the image.

Now Lets discuss the Syntax for each Locator.

• Locating Element By.Id()-

By.Id  – This helps to find the element using the Id.

Syntax-

driver.findElement(By.id(“id of the element”));

• Locating Element By.Name() –

By.Name – This helps to locate the element by the value of the “name” attribute.

Syntax-

driver.findElement(By.name(“name of the element”));

• Locating Element By.tagName() –

By.tagName – This helps to locate the web element based on the HTML tag.

Syntax-

driver.findElement(By.tagName(“tagname”));

• Locating Element By.linkText() –

By.linkText – This helps to locate the element by text displayed on link.

Syntax-

 driver.findElement(By.linkText(“link text”));

• Locating ElementBy.partiallinkText: It is same as Link text. Only difference is here it helps to locate the  link element which is having partial matching text.

Syntax-

driver.findElement(By.partiallinkText(“partial text”));

• By.ClassName :- This helps to locate the web element based on the“class” attribute.

Syntax-

driver.findElement(By.className(“Name of the class”));

• By.xpath:- This helps to locate elements via xpath.

Syntax-

driver.findElement(By.xpath(“xpath of the element”));

• By.cssSelector:- This helps to locate element using the CSSSelector.

Syntax-

driver.findElement(By.cssSelector(“selector”));

So, in this post we discussed about the different ways of Locating Elements on a web page. Hope this article will help you 🙂