Post#27.Actions on WebElements

Actions on WebElements

Different WebElements will have different actions that can be taken on them. For example, in a textbox element, we can type in some text or clear the text that is already typed in it. Similarly for a button, we can click on it, get the dimensions of it, and so on, but we cannot type into a button, and for a link, we cannot type into it. So, though all the actions are listed in one WebElement interface.

In case we try to execute a wrong action on a WebElement, we don't see any exception or error thrown and also we don't see any action that really gets executed; WebDriver ignores such actions silently.

The getAttribute() method

The getAttribute action can be executed on all the WebElements.

They are generally key-value pairs appearing in the start tag of an element. For example, in the following WebElement:

<label name="Username" id="uname">Enter Username: </label>

Here name and id are the attributes or attribute keys and Username and uname are the attribute values.

Syntax:

java.lang.String getAttribute(java.lang.String name)

Example:

Consider Google Search Button;

<button id="gbqfba" class="gbqfba" name="btnK" aria-label="Google Search">

Script:

public class GetAttributes{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println("Name of the button is: "

+searchButton.getAttribute("name"));

System.out.println("Id of the button is: " +searchButton.getAttribute("id"));

System.out.println("Class of the button is: "

+searchButton.getAttribute("class"));

System.out.println("Label of the button is: "

+searchButton.getAttribute("aria- label"));

}

}

In the above code getAttribute() method is to fetch the attribute values of the attribute name, id, class, and aria-label of the Google Search button WebElement.

OutPut:

Name of the button is:  btnK

Id of the button is: gbqfba

Class of the button is: gbqfba

Label of the button is: Google Search

The sendKeys() method

The sendKeys action is applicable for textbox or textarea HTML elements.

This is used to type text into the textbox.

Syntax

void sendKeys(java.lang.CharSequence...keysToSend)

The input parameter for the preceding method is CharSequence of text that has to be entered into the element. This method doesn't return anything.

Example

Type a search text into the Google Search box using the sendKeys() method.

public class sendKeys{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchBox = driver.findElement(By.name("q"));

searchBox.sendKeys("TestingBar");

}

}

If you want to type in some special keys, such as Backspace, Enter, Tab, Shift etc. then you need to use a special enum class of WebDriver named Keys .

Example:

public class SendKeys{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchBox = driver.findElement(By.name("q"));

searchBox.sendKeys(Keys.chord(Keys.SHIFT,"TestingBar"));

}

}

In the above code, the chord() method from the Keys enum is used to type the key while the text specified is being given as an input to be the textbox.  i.e Shift Key + ”Text”

So in the above program all the text being typed in uppercase.

The clear() method

The clear action is similar to the sendKeys() method, which is applicable for textbox and textarea elements.

This is used to erase the text that is entered in a WebElement using the sendKeys() method.

Syntax:

void clear();

This method doesn't take any input and doesn't return any output. It is simply executed on the target text entry element.

Example:

public class Clear{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchBox = driver.findElement(By.name("q"));

searchBox.sendKeys(Keys.chord(Keys.SHIFT,"testingbar"));

searchBox.clear();

}

}

WebElement's clear() method to clear the text after typing testingbar into the Google Search box.

*This can be achieved using the Keys.BACK_SPACE enum also.

The submit() method

The submit action can be taken on a form or on an element, which is inside a form. This is used to submit a form of a web page to the server hosting the web application.

Syntax:

void submit();

The preceding method doesn't take any input parameter and doesn't return anything. But a NoSuchElementException is thrown when this method is executed on a WebElement that is not present within a form.

Example:

public class Submit{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchBox = driver.findElement(By.name("q"));

searchBox.sendKeys(Keys.chord(Keys.SHIFT,"testingbar"));

searchBox.submit();

}

}

In the above code search box is not a part of any form. So you should encounter a NoSuchElementException message.

So when you use the submit() method on a WebElement, make sure it is part of the form element.

The getCssValue() method

The getCssValue action can be taken on all the WebElements.

This is used to fetch the CSS properties' values of the given element. CSS properties can be font-family, background-color, color, and so on.

Syntax:

java.lang.String getCssValue(java.lang.String propertyName)

Example:

public class GetCSSValue{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println(searchButton.getCssValue("font-family"));

}

}

The getCssValue() method to find the font-family of the text visible on the Google Search button.

Output:

MS Shell Dlg

Similarly, we can retrieve the background color of an element using this method. (Refer the below Example)

public class GetCSSValue2{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println(searchButton.getCssValue("background-color"));

}

}

Output:

Transparent

The getLocation() method

Any web element has its own position on page and generally it is measured in x and y pixels and known as x y coordinates of element. X pixels means horizontal position on page from left side and Y pixels means vertical position on page from top side. You can find x y coordinates of any element.

In selenium WebDriver, You can get x y coordinates of element using Point class.

» You can get xy coordinate by using getLocation() method of Point Class. Refer the below Java Code for the same.

I have created simple example to demonstrate you how to get x y coordinates of any Image on page.

Example: Consider the below screenshot. Let’s find out the xy coordinate of Testingbar Logo

Java Code:

package pack3;

import org.openqa.selenium.By;

import org.openqa.selenium.Point;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.firefox.FirefoxDriver;

public class XYCoordinateExample {

public static void main(String[] args) {

// TODO Auto-generated method stub

FirefoxDriver driver = new FirefoxDriver();

driver.manage().window().maximize();

driver.get("http://www.testingbar.com/");

//Locate element for which you wants to retrieve x y coordinates.

WebElement Image = driver.findElement(By.xpath("//*[@id='masthead']/div/div[1]/a/img"));

//Used points class to get x and y coordinates of element.

Point point = Image.getLocation();

int xcord = point.getX();

System.out.println("Element's Position from left side Is "+xcord +" pixels.");

int ycord = point.getY();

System.out.println("Element's Position from top side Is "+ycord +" pixels.");

driver.quit();

}

}

Output:

Element’s Position from left side Is 165 pixels.
Element’s Position from top side Is 50 pixels.

The getSize() method

As you know, every web element has Its own height and width or we can say size element. Sometimes you need to perform pixel to pixel testing as per client’s requirement like each and every button’s height should be x(some pixels) and width should be y(some pixels) throughout the site. 

We have learnt how to get x y coordinates of element using selenium web driver in previous post. Now let us learn how to get size of element. I have prepared simple example to explain you how to get height and width of Image In selenium web driver.

In selenium WebDriver, You can get Height and width of element using Dimension class.

» You can get Height and width by using getSize() method of Dimension Class. Refer the below Java Code for the same.

Example: Consider the below screenshot. Let’s find out the height and width of Testingbar Logo.

Java Code:

package pack5;

import org.openqa.selenium.By;

import org.openqa.selenium.Dimension;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.firefox.FirefoxDriver;

public class GetHeightWidthExample {

public static void main(String[] args) {

// TODO Auto-generated method stub

FirefoxDriver driver = new FirefoxDriver();

driver.manage().window().maximize();

driver.get("http://www.testingbar.com/");

//Locate element(Here it is Logo) for which you wants to get height and width.

WebElement Image = driver.findElement(By.xpath("//*[@id='masthead']/div/div[1]/a/img"));

Dimension d = Image.getSize();

//Get width of element.

int ImageWidth = d.getWidth();

System.out.println("Image width Is "+ImageWidth+" pixels");

//Get height of element.

int ImageHeight = d.getHeight();

System.out.println("Image height Is "+ImageHeight+" pixels");

driver.quit();

}

}

Output:

Image width Is 223 pixels
Image height Is 62 pixels

Difference between getSize() and getLocation() methods:

getSize() : 

» It will returns the “Dimension” object.
» If you want to get the width and Height of the specific element on the webpage then use “getsize()” method.

Sample code to get the width and height :

//Locate element for which you wants to get height and width.

WebElement Image = driver.findElement(By.xpath("//*[@id='container']/div[3]/div[2]/div[1]/a/img"));

//Get width of element.

int ImageWidth = Image.getSize().getWidth();

System.out.println("Image width Is "+ImageWidth+" pixels");

//Get height of element.

int ImageHeight = Image.getSize().getHeight();

System.out.println("Image height Is "+ImageHeight+" pixels");

Note:
Makesure to import “org.openqa.selenium.Dimension;” package.

getLocation() :
» It will return the “Point” object.
» If you want to get the exact “x” and “y” coordinates of the element then use “getLocation()”  method.

Sample code to get the “x” and “y” coordinates :

//Locate element for which you wants to retrieve x y coordinates.

WebElement Image = driver.findElement(By.xpath("//*[@id='container']/div[3]/div[2]/div[1]/a/img"));

//Used points class to get x and y coordinates of element.

Point point = Image.getLocation();

int xcord = point.getX();

System.out.println("Element's Position from left side Is "+xcord +" pixels.");

int ycord = point.getY();

System.out.println("Element's Position from top side Is "+ycord +" pixels.");

Note:
Makesure to import “org.openqa.selenium.Point;” package.

The getText() method

The getText action can be taken on all the WebElements.

It will give the visible text if the element contains any text on it or else will return nothing.

Syntax:

java.lang.String getText();

Example:

public class GetText{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println(searchButton.getText());

}

}

Output:

Google Search

The getTagName() method

The getTagName action can be taken on all the WebElements.

This will return the tag name of the WebElement.

Syntax:

java.lang.String getTagName()

Example:

<button id="gbqfba" class="gbqfba" name="btnK" aria-label="Google Search">

Script:

public class GetTagName{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println(searchButton.getTagName());

}

}

Output:

Button

The isDisplayed() method

The isDisplayed action verifies if an element is displayed on the web page and can be executed on all the WebElements.

Syntax:

boolean isDisplayed();

Example:

public class isDisplayed{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println(searchButton.isDisplayed());

}

}

The isEnabled() method

The isEnabled action verifies if an element is enabled on the web page and can be executed on all the WebElements.

Syntax:

boolean isEnabled();

Example:

public class isEnabled{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchButton = driver.findElement(By.name("btnK"));

System.out.println(searchButton.isEnabled());

}

}

The isSelected() method

The isSelected action verifies if an element is selected right now on the web page and can be executed only on a radio button, options in select, and checkbox WebElements.

When executed on other elements, it will return false.

Syntax: boolean isSelected()

Example:

public class IsSelected{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com");

WebElement searchBox = driver.findElement(By.name("q"));

System.out.println(searchBox.isSelected());

}

}

It returns false for the Google Search box, because this is not a radio button, options in select, or a checkbox.

getCSSValue() method

Various styles are applied on elements displayed in a web application, so they look neat and become more usable.

There may be tests that need to verify that correct styles have been applied to the elements. This can be done using WebElement class's getCSSValue() method, which returns the value of a specified style attribute.

Example: Here we will create a program that reads the width attribute of the “SUBMIT” element.

Link to access the page: http://www.testingbar.com/cssvalue/

Script:

package pack4;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.firefox.FirefoxDriver;

public class CssExample {

            public static void main(String[] args) {

                        WebDriver driver = new FirefoxDriver();

                        driver.get("http://www.testingbar.com/cssvalue/");

                        WebElement button = driver.findElement(By.id("sbutton"));

                        String width = button.getCssValue("width");

                        System.out.println(width);

                        driver.close();

}

}

Output: 114.967px