Learn Selenium

Tuesday, December 1, 2015

Get text from the JQuery sliding hover image


In this article, discussing about how to get text which is displayed on the slider hover image. It is a typical situation to get hover text which has animation effect.

  • In this example, access web site http://www.hamaracoupons.in/all-categories.
  • At the left side there is a gadget called 'Popular stores', and each store which shows how many no.of coupons are available currently.
  • Mouse hover on any store image, you can find a sliding hover image contains a text.
  • Here, the test scenario is, locate the hover overlay and get the hover text from each store and display them on the console.
First, locate the web element of the gadget 'Popular Stores' section. Then xpath will be html/body/div[4]/div/div/div[2]/div[1].

WebElement container = driver.findElement(By.xpath("html/body/div[4]/div/div/div[2]/div[1]"));

Then listout elements of all the div's under it. Xpath of the one element is .//div[@class='Similar Similar-ninth'].

List<WebElement> allAdds = container.findElements(By.xpath(".//div[@class='Similar Similar-ninth']"));

Now, find the xpath of the any one of the hover overlay image. html/body/div[4]/div/div/div[2]/div[1]/div[2]/div/div/a.



And listout all the elements of the hover overlay image.

List<WebElement> hoverText = driver.findElements(By.xpath("html/body/div[4]/div/div/div[2]/div[1]/div/div/div/a"));

And, Iterate through each element and Mouse over on it using moveElement() method using Actions class. then get the text of each sliding hover image and print it on the console. 
              Actions action = new Actions(driver);
              action.moveToElement(allAdds.get(i)).build().perform();
              hoverText.get(i).getText();

SlidingHoverImage.java

import java.util.List;
import java.util.concurrent.TimeUnit;

import org.apache.commons.lang3.text.WordUtils;
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;
import com.sun.org.apache.xerces.internal.util.URI;
import com.sun.org.apache.xerces.internal.util.URI.MalformedURIException;

public class SlidingHoverImage {

public static WebDriver driver = null;
public static void main(String[] args) throws InterruptedException, MalformedURIException {
driver = new FirefoxDriver();
driver.get("http://www.hamaracoupons.in/all-categories");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
               Actions action = new Actions(driver);
WebElement container = driver.findElement(By.xpath("html/body/div[4]/div/div/div[2]/div[1]"));
List<WebElement> allAdds = container.findElements(By.xpath(".//div[@class='Similar Similar-ninth']"));
System.out.println(allAdds.size());
//Get all tooltip elements
List<WebElement> hoverText =          driver.findElements(By.xpath("html/body/div[4]/div/div/div[2]/div[1]/div/div/div/a"));
System.out.println("Hover Text Size:" + hoverText.size());
//Print all advertisement names and their coupons display on the tooltip
for (int i = 0; i < allAdds.size(); i++) {
String name = hoverText.get(i).getAttribute("href");
//Get last part of the url
URI uri = new URI(name);
String[] segments = uri.getPath().split("/");
String partURL = segments[segments.length-1];
//Split a string using separator
String splt[] = partURL.split("-");
//Capitalize first letter in a word
String firstUpper = WordUtils.capitalize(splt[0]);
action.moveToElement(allAdds.get(i)).build().perform();
Thread.sleep(2000);
String text = hoverText.get(i).getText();
System.out.println(firstUpper + ": " + text);
}
driver.close();
}
}


Read more...

Monday, November 30, 2015

Displaying all the collapsible content in an Accordion using Selenium Webdriver



In this post, discussing about how to get all the content which are collapsible under the accordion.  i.e; Open accordion and iterate through each element in the accordion and display those names in the console.

Consider an example from the website http://www.hamaracoupons.in/.
  • Access the website http://www.hamaracoupons.in/all-categories
  • Here in the page all the categories accordion contains sub-categories. And first listed category already expandable. 
  • I have a scenario like, get all the sub-category names and display or print those on the console. Choose other than first category, because it is already opened in the site.

Inspect the accordion element using firebug,

<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"/>

To find an element need to determine the xpath of that element. Using Firepath xpath will be 
.//*[@id='ui-accordion-f-accordion-header-2']/span

Click on that accordion web element using xpath expression as,
WebElement expanded = driver.findElement(By.xpath(".//*[@id='ui-accordion-f-accordion-header-2']/span"));
expanded.click();

Find the xpath of the any one of the sub-element under the list.

<div class="all-store">
<ul>
<li>
<a title="Bath & Body" href="category/beauty-and-health/bath-and-body">Bath & Body</a>
</li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
</div>

The xpath-expression will be
.//*[@id='ui-accordion-f-accordion-panel-2']/div/ul/li[1]/a

Observe that, all <li> tags are defined as sub-elements in the html code.
Listout all the sub elements under that accordion using findelements() method.

List<WebElement> allLinks = driver.findElements(By.xpath(".//*[@id='ui-accordion-f-accordion-panel-2']/div/ul/li/a"));

Iterate all the list of elements using for each() loop or Iterator() method from the Iterator interface.

AccordionTest.java

import java.util.Iterator;
import java.util.List;
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;

public class AccordionTest {

public static WebDriver driver = null;

public static void main(String[] args) throws InterruptedException, MalformedURIException {
driver = new FirefoxDriver();
driver.get("http://www.hamaracoupons.in/all-categories");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();
               WebElement expanded = driver.findElement(By.xpath(".//*[@id='ui-accordion-f-accordion header-2']/span"));
expanded.click();
//Listout all accordion elements
List<WebElement> allLinks = driver.findElements(By.xpath(".//*[@id='ui-accordion-f-accordion-panel-2']/div/ul/li/a"));
System.out.println(allLinks.size());
/*Iterator<WebElement> itr = allLinks.iterator();
while(itr.hasNext()){
   System.out.println(itr.next().getText());}*/
driver.close();
}
Read more...

Sunday, November 29, 2015

Mouse hover function on DropDown menu & submenu selection in Selenium Webdriver

Mouse hover function on Dropdown Menu

In this post, discussing about how to do mouse hover to select dropdown menu and its submenu options.
  • Access the site http://www.hamaracoupons.in/
  • Mouse hover on the 'Categories' menu.

  • Inspect element on the menu by using firebug. Find the webelement.
<a class="color2" href="/all-categories">Categories</a>
  • To identify this webelement, we need xpath for this. Right click on the web element and inspect it by firepath. we can find an xpath like below:
  • Then xpath for the dropdown menu is html/body/div[2]/div/ul/li[3]/a.
WebElement mainMenu = driver.findElement(By.xpath("html/body/div[2]/div/ul/li[3]/a"));

We are going to use Actions Class for mouse operation.

                      Actions action = new Actions(driver);
                     action.moveToElement(mainMenu);
  • Inspect element on the submenu link 'All Categories' under 'Categories' section.
<a href="/all-categories">All Categories</a>
  • Then xpath for the submenu link is: html/body/div[2]/div/ul/li[3]/div/div[2]/a
WebElement subMenu = driver.findElement(By.xpath("html/body/div[2]/div/ul/li[3]/div/div[2]/a"));

action.moveToElement(subMenu).click().build().perform();

DropDownMouseOver.java


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 DropDownMouseOver {

public static WebDriver driver = null;
public static void main(String[] args) throws InterruptedException {
driver = new FirefoxDriver();
driver.get("http://www.hamaracoupons.in/all-categories");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();
Actions action = new Actions(driver);
WebElement mainMenu = driver.findElement(By.xpath("html/body/div[2]/div/ul/li[3]/a"));
action.moveToElement(mainMenu);
WebElement subMenu = driver.findElement(By.xpath("html/body/div[2]/div/ul/li[3]/div/div[2]/a"));
action.moveToElement(subMenu).click().build().perform();
driver.close();
}

Read more...

Thursday, November 26, 2015

Setting up a project in the Eclipse IDE

Create Project

Let's write our first script code to use selenium web driver with java language in the Eclipse IDE. To setup a project in an Eclipse, follow  below steps.
  1. Open downloaded eclipse.zip file and extract it.
  2. Open the extracted folder, and double click on the executable file called eclipse.exe.
  3. Choose File -> New -> Java Project. A New Java Project dialog appears as shown below. Enter Project name and leave remaining as default selection. Click Next > button.
New Java Project dialog
In the next screen, move to 'Libraries' tab, click on 'Add External JARs' button as shown below and select selenium-java-2.x.jar and selenium-java-srcs-2.x.jar files from the extracted folder.

Add External jar files for build path

Add all available library jar files from the extracted selenium-java -> libs folder into java build settings by click 'Add External JARs' button again.

All libs jar files
 Click on the Finish button.

After project creation, your project will be display at the left panel window in the Package Explorer tab.

Create Package

To create a new package under the project, select project from the hierarchy and choose File -> New -> Package. A New Java Package dialog appears as shown below.
New Java Package dialog
Enter the package name in the provided textbox. Name should be given without any spaces in it. Ex: Package name such as 'automationFramework'. Click Finish button.

After package creation, package will be display in the Package Explorer tab as, Projectname -> src -> Packagename as shown below:

Project hierarchy structure

Create Class

From the package explorer project hierarchy, select project or package and right click and choose New -> Class. A New Java class dialog appears. Enter the class name and select main() method then click Finish button. 

New Java Class dialog
The final project hierarchy structure will be look like below:


Now we are ready for writing automation script using Selenium Webdriver.

Happy testing... :)


Read more...

Setup environment for Automation Testing with SELENIUM using JAVA

Installing Java

In this blog, all the code examples that describes by covering various features of  WebDriver will be in Java. To follow these examples and write your own code, you need Java Development Kit installed on your computer. The latest version of JDK can be downloaded from the following link:

For Windows 7 32 / 64 bit, Mac

For Ubuntu


A step-by-step installation guide is available at the following link:


Installing Eclipse

We need an IDE to write and excecute selenium webdriver scripts examples. For this, it would be handy to install a Java IDE. You can install your favorite IDE. Here, I am installing Eclipse. It can be downloaded from the following link:

Most of the automation testing is done on the Firefox browser in this blog. Any how, will talk about other browsers by going further learning process. It can be downloaded from the following link:

For identifying an elements on the web page, widely used to inspect HTML elements by using one of the Firefox add-on called Firebug. It can be downloaded from the following link:

After installation, when you open the Firefox browser, you should see the firebug icon on the top-right corner of the browser. Now, click on the Firebug icon to load the Firebug UI to inspect an elements.

Installing Firepath

After you have installed the Firebug add-on to Firefox, it's time to extend Firebug to have something named FirePath. FirePath is used to get XPath and CSS values of an HTML element on a web page. You can download FirePath from the following location:

https://addons.mozilla.org/EN-us/firefox/addon/firepath/

FirePath


After installation, you should see a new tab in the Firebug UI for FirePath, which is often usable for selenium automation for scripting process.

Download selenium jar files

To run Selenium Webdriver remotely, we need selenium standalone server. It can be downloaded from the following link: http://www.seleniumhq.org/download/
To create scripts that should interact with selenium webdriver, we need language-specific client drivers. Here scripts are written in the Java language. It can be downloaded from the following link: http://www.seleniumhq.org/download/.

After download selenium-standalone-sevrer.2.x and selenium-java-2.x.zip files. Extract them into a folder.


Read more...