The Java support package

Browser navigation

There are commands for various webpage loading actions:

// Navigate to a URL (both of the statements below are
// functionally equivalent).
driver.get("https://www.google.com");
driver.navigate().to("https://www.google.com");

// Go forward one page in the browser (if you're not on the
// last page that was viewed).
driver.navigate().forward();

// Go back one page in the browser (if you're not on the
// first page that was viewed).
driver.navigate().back();

// Refresh the current page.
driver.navigate().refresh();

Working with colours

You will occasionally want to validate the colour of something as part of your tests; the problem is that colour definitions on the web are not constant. Wouldn't it be nice if there was an easy way to compare a HEX representation of a colour with an RGB representation of a colour, or an RGBA representation of a colour with a HSLA representation of a colour?

Worry not. There's a solution: the Color class!

First of all, you will need to import the class:

import org.openqa.selenium.support.Color;

You can now start creating colour objects. Every colour object will need to be created from a string representation of your colour. Supported colour representations are:

private final Color HEX_COLOUR = Color.fromString("#2F7ED8");
private final Color RGB_COLOUR = Color.fromString("rgb(255, 255, 255)");
private final Color RGB_COLOUR = Color.fromString("rgb(40%, 20%, 40%)");
private final Color RGBA_COLOUR = Color.fromString("rgba(255, 255, 255, 0.5)");
private final Color RGBA_COLOUR = Color.fromString("rgba(40%, 20%, 40%, 0.5)");
private final Color HSL_COLOUR = Color.fromString("hsl(100, 0%, 50%)");
private final Color HSLA_COLOUR = Color.fromString("hsla(100, 0%, 50%, 0.5)");

The Color class also supports all of the base colour definitions specified in http://www.w3.org/TR/css3-color/#html4.

private final Color BLACK = Color.fromString("black");
private final Color CHOCOLATE = Color.fromString("chocolate");
private final Color HOTPINK = Color.fromString("hotpink");

Sometimes browsers will return a colour value of "transparent" if no colour has been set on an element. The Color class also supports this:

private final Color TRANSPARENT = Color.fromString("transparent");

You can now safely query an element to get its colour/background colour knowing that any response will be correctly parsed and converted into a valid Color object:

Color loginButtonColour = driver.findElement(By.id("login")).getCssValue("color");
Color loginButtonBackgroundColour = driver.findElement(By.id("login")).getCssValue("background-color");

You can then directly compare colour objects:

assert loginButtonBackgroundColour.equals(HOTPINK);

Or you can convert the colour into one of the following formats and perform a static validation:

assert loginButtonBackgroundColour.asHex().equals("#ff69b4");
assert loginButtonBackgroundColour.asRgba().equals("rgba(255, 105, 180, 1)");
assert loginButtonBackgroundColour.asRgb().equals("rgb(255, 105, 180)");

Colours are no longer a problem.

Working with select elements

Select elements can require quite a bit of boiler plate code to automate. To reduce this and make your tests cleaner, there is a Select class in the Selenium support package. To use it, you will need the following import statement:

import org.openqa.selenium.support.ui.Select;

You are then able to create a Select object using a WebElement that references a <select> element.

WebElement selectElement = driver.findElement(By.id("selectElementID"));
Select selectObject = new Select(selectElement);

The Select object will now give you a series of commands that allow you to interact with a <select> element. First of all, there are different ways of selecting an option from the <select> element.

<select>
 <option value=value1>Bread</option>
 <option value=value2 selected>Milk</option>
 <option value=value3>Cheese</option>
</select>

There are three ways to select the first option from the above element:

// Select an <option> based upon the <select> element's internal index
selectObject.selectByIndex(1);

// Select an <option> based upon its value attribute
selectObject.selectByValue("value1");

// Select an <option> based upon its text
selectObject.selectByVisibleText("Bread");

You can then check which options are selected by using:

// Return a List<WebElement> of options that have been selected
List<WebElement> allSelectedOptions = selectObject.getAllSelectedOptions();

// Return a WebElement referencing the first selection option found by walking down the DOM
WebElement firstSelectedOption = selectObject.getFirstSelectedOption();

Or you may just be interested in what <option> elements the <select> element contains:

// Return a List<WebElement> of options that the <select> element contains
List<WebElement> allAvailableOptions = selectObject.getOptions();

If you want to deselect any elements, you now have four options:

// Deselect an <option> based upon the <select> element's internal index
selectObject.deselectByIndex(1);

// Deselect an <option> based upon its value attribute
selectObject.deselectByValue("value1");

// Deselect an <option> based upon its text
selectObject.deselectByVisibleText("Bread");

// Deselect all selected <option> elements
selectObject.deselectAll();

Finally, some <select> elements allow you to select more than one option. You can find out if your <select> element is one of these by using:

Boolean doesThisAllowMultipleSelections = selectObject.isMultiple();

Mouse and keyboard actions in detail

Suppose you have an arbitrary web element e:

WebElement e = driver.findElement(By.id("testElement"));

You can simulate mouse clicking on e if it's visible and has a height and width that are greater than 0:

e.click();

Moreover, it's possible to mimic hovering of the cursor over e. In order to do so, you'll need the following import statement:

import org.openqa.selenium.interactions.Actions;

With this statement in place, you can now move over the element in question:

Actions actions = new Actions(driver);
actions.moveToElement(e);
actions.perform();

If e is an input or textarea element, the following keyboard actions can be carried out:

1. Enter a sequence of characters in e:

e.sendKeys("Test");

2. Delete the text that's in e (if there is any):

e.clear();

Working with web elements