Switch between windows or tabs in Selenium Webdriver

Please refer the below set of code to understand how can we switch between different windows in Selenium. Open a web page:

WebDriver driver = new FirefoxDriver();
driver.get("http://aksahu.blogspot.in/");

Open a new window:

WebElement elemLink = driver.findElement(By.linkText("Web Driver"));
Actions actions = new Actions(driver);
actions.moveToElement(elemLink);
actions.contextClick(elemLink).sendKeys(Keys.ARROW_DOWN)
  .sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ENTER).build()
  .perform();

For opening in a new tab/window see the post Open in new Tab or new Window in Selenium Webdriver

Switch between two tabs or windows:

(1) 
If you want to switch to a specific window, see below:

String windowHandle = driver.getWindowHandle();

Now if you want to switch to second windows use the below code:

for(String winHandle : driver.getWindowHandles()){
    driver.switchTo().window(winHandle);
}

Switch to the parent window:

driver.switchTo().window(windowHandle);

(2)
Or, simply you can do as below to switch between two tabs or windows:

ArrayList tabs = new ArrayList (driver.getWindowHandles());

//Switch to new window
driver.switchTo().window(tabs.get(1));
driver.close();//do some action in new window(2nd tab)

//Switch to main/parent window
driver.switchTo().window(tabs.get(0));
driver.getTitle();//do some action in main window(1st tab)

Open in new Tab or new Window in Selenium Webdriver

New Tab:
Use the below code to complete the action in a new tab.

WebDriver driver = new FirefoxDriver();
driver.get("http://aksahu.blogspot.in/");

You can  do by either of the below ways

driver.findElement(By.linkText("Tips & Tricks")).sendKeys(Keys.CONTROL + "t");

Or

WebElement aLink = driver.findElement(By.linkText("Tips & Tricks"));
Actions actions = new Actions(driver);
actions.moveToElement(aLink);
actions.contextClick(aLink)
       .sendKeys(Keys.ARROW_DOWN)
       .sendKeys(Keys.ENTER).build().perform();

New Window:
Use the below code to complete the action in a new window.

WebDriver driver = new FirefoxDriver();
driver.get("http://aksahu.blogspot.in/");

Open a web page in a new window:

String script = "var d=document,a=d.createElement('a');a.target='_blank';a.href='%s';a.innerHTML='.';d.body.appendChild(a);return a";
Object element = ((JavascriptExecutor) driver).executeScript(String.format(script, "http://aksahu.blogspot.in/"));
if (element instanceof WebElement) {
    WebElement anchor = (WebElement) element;
    anchor.click();
    ((JavascriptExecutor) driver).executeScript("var a=arguments[0];a.parentNode.removeChild(a);", anchor);
} else {
     throw new JavaScriptException(element, "Unable to open Window", 1);
}

Open a link in a new window:

WebElement elemLink = driver.findElement(By.linkText("Web Driver"));
Actions actions = new Actions(driver);
actions.moveToElement(elemLink);
actions.contextClick(elemLink)
       .sendKeys(Keys.ARROW_DOWN)
       .sendKeys(Keys.ARROW_DOWN)
       .sendKeys(Keys.ENTER).build().perform();

Maximize and Resize browser window in Selenium Webdriver

Maximize browser window:
You can maximize your current browser window by simply calling the maximize() method of WebDriver as below:

WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();

Sometimes the above doesn't work in some versions of browsers like chrome. So you can use below code alternatively:

Point targetPosition = new Point(0, 0);
driver.manage().window().setPosition(targetPosition);

String w = "return screen.availWidth";
String h = "return screen.availHeight";
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
int width = ((Long) javascriptExecutor.executeScript(w)).intValue();
int height = ((Long) javascriptExecutor.executeScript(h))
  .intValue();
Dimension targetSize = new Dimension(width, height);

driver.manage().window().setSize(targetSize);

Resize browser window:
Sometimes in the test we need to resize the browser window to a certain window size. In such cases we can use the below to do:

driver.manage().window().setSize(new Dimension(320, 480));

Selenium tricks for CSS and Xpath locators

In this post you will learn some CSS rules and how to use CSS selectors and Xpath locators in Selenium.

(1) Id:
An element's id is defined as "[@id='idName']" in Xpath but "#idName" in CSS.
For example, a 'div' element with id 'panel' will be represented as below:
In Xpath locator

//div[@id='panel']

In CSS selector

css=div#panel

(2) Class:
An element's class is defined as "[@class='className']" in Xpath but ".className" in CSS.  
For example, a 'div' element with class 'panelClass' will be represented as below:
In Xpath locator

//div[@class='panelClass']

In CSS selector

css=div.panelClass

For element with multiple class we need to separate with space(" ") in Xpath and dot(".") in case of CSS. See below example,
In Xpath locator

//div[@class='panelClass1 panelClass2']

In CSS selector

css=div.panelClass1.panelClass2

(3) Any Attributes:
For selecting an element by its any of the attribute(say "name" is an attribute of a 'div' element and "type" in an "input" element) is given below:
In Xpath locator

//div[@name='continue']

//input[@type='button'] 

In CSS selector

css=div[name='continue']

css=input[type='button'] 

(4) Direct Child:
A direct child of an element is denoted as "/" in Xpath and ">" in CSS selector. See the example below for a direct child "li" for a "ul" element:
In Xpath locator

//ul/li

In CSS selector

css=ul > li

(5) Child or Subchild:
A direct child of an element is denoted as "//" in Xpath and a wehite-space(" ") in CSS selector. See the example below for a child/subchild "li" for a "ul" element:
In Xpath locator

//ul//li

In CSS selector

css=ul li

Note that "ul li" and "ul > li" are different. If you are confusing please go through this article.

(6) nth Child:
For finding 'nth' child, in Xpath we denote as "[n]" and in CSS we denote as ":nth-of-type(n)". See the below example,

  
Coffee
  
Tea
  
Milk
  
Soup
  
Soft Drinks

In Xpath locator

//ul[@id='drinks']/li[5]

In CSS selector

css=ul#drinks li:nth-of-type(5)

Also you can use ":nth-child" but the difference between ":nth-child" and ":nth-of-type(n)" is:
li:nth-child(2)
This means, select an element if It is a paragraph element and the second child of a parent.
li:nth-of-type(2)
This means, select the second paragraph child of a parent. This is less conditional.
See here for more details on difference between the above two.

If we want to select the "fifth li element" (Soft Drinks) in this list, we can use the nth-of-type, which will find the fifth li in the list.

css=ul#drinks li:nth-of-type(5)

On the other hand, if we want to get the "fifth element" only if it is a li element, we can use a filtered nth-child which will select again (Soft Drinks) here.

css=ul#drinks li:nth-child(5)

(7) Parent of an element:
Parent of an element can be represented as "/.." in Xpath and ":parent" in CSS selectors. For example, if you want to indicate parent of the list item of class 'blue'

  
first
  
second
  
third
  
fourth
  
fifth

In Xpath locator

//li[@class='blue']/..

In CSS selector

css=li.blue:parent

(8) Next Sibling:
Next sibling is nothing but next adjacent element which is inside the same parent on the page. An adjacent sibling combinator selector allows you to select an element that is directly after another specific element. For example, If you want to select the sibling of "li" element with class "blue" which is 'second' list item,
In Xpath locator

//li[@class='blue']/../li[2]

In CSS selector

css=li.blue + li

Similarly, if you want to indicate 'third' list item, see the below
In Xpath locator

//li[@class='blue']/../li[3]

In CSS selector

css=li.blue + li + li

(9) Match by Innertext:
There is a javascript methodcontains() which can be used to check the inner text of a web element. For example a link with text "Sign in"
In Xpath locator

//a[contains(text(),'Sign in')]

or

//a[contains(string(),'Sign in')] 

In CSS selector

css=a:contains('Sign in')

(10) Match by Sub-string:
This is interesting and is described below. With this we can match strings with its partial text. E.g. prefix, suffix or any pattern(sub-string)

(i) Match a Sub-string(pattern):
Taking an example of a 'div' with an 'id' that contains the text "pattern"

...

In Xpath locator, we need to use "contains()" to match a sub-string

//div[contains(@id,'pattern')]

In CSS selector, we need to use "*=" for matching a sub-string

css=div[id*='pattern']

(ii) Match a prefix:
Taking an example of a 'div' with an 'id' that starts with the text "prefixString"

...

In Xpath locator, we need to use "starts-with" to match a prefix

//div[starts-with(@id,"prefixString")]

In CSS selector, we need to use "^=" for matching a prefix

css=div[id^='prefixString']

(iii) Match a suffix:
Taking an example of a 'div' with an 'id' that starts with the text "suffixString"

...

In Xpath locator, we need to use "ends-with" to match a suffix Note that "ends-with()" is a standard XPath 2.0 function only, it won't work if you are using Xpath 1.0 engine

//div[ends-with(@id,"suffixString")]

In CSS selector, we need to use "$=" for matching a suffix

css=div[id$='suffixString']

The summary of sub-string match is listed out in the following table:

	Match a Sub-string	Match a Prefix	Match a Suffix
Xpath	contains()	starts-with()	ends-with()
CSS	*=	^=	$=

Mouse hover in Selenium WebDriver

In some web applications we need to mouse hover on one element to make visible of another element. In those cases we need to mouse over on first element before performing any action on second element.

For example, when we mouse hover on certain menus, the sub-menus appears. In such cases we need to use the following ways to hover on web elements:

1. Using Actions class:
We can use WebDriver's Actions class to perform hover action as below:

Actions actions = new Actions(driver);
WebElement mainMenu = driver.findElement(By.cssSelector("#headerMenu"));
actions.moveToElement(mainMenu);

WebElement subMenu = driver.findElement(By.cssSelector("#headerMenu .subMenu"));
actions.moveToElement(subMenu);
actions.click();

actions.perform();

Don't forget to call 'perform()' method. This action won't complete unless you call perform().


2. Using JQuery:
You can use JQuery selector with mouseover() function as below:

String aJQueryString = "jQuery(\"#headerMenu\").mouseover()"; 
WebElement element = findElementByJQuery(aJQueryString);

For understanding "findElementByJQuery(aJQueryString)" method and use please go through my post "Finding web elements by executing JQuery script".


3. Using Robot:
You can use Robot class to find out location of the web element in the screen and then by hover on it as below:

/**
 * Mouse overs on the element by its locator by
 * 
 * @param by
 *            a locator e.g. xpath, css, name, id, class name etc
 */
public void mouseOverOnElementUsingRobot(By by) {
 try {
  Point coordinates = driver.findElement(by).getLocation();
  Robot robot = new Robot();
  robot.mouseMove(coordinates.getX(), coordinates.getY() + 60);
  /*
   * WebDriver provide document coordinates, where as Robot class is
   * based on Screen coordinates, so I have added +60 to compensate
   * the browser header. You can even adjust if needed.
   */

 } catch (AWTException e) {
  log.error("Failed to mouseover on the element '" + by + "'. " + e);
 }
}