WebElement Methods

An HTML element is represented by WebElement. All the operations that require interacting with a web page will be performed through WebElement interface. We can use the following method calls using WebElement interface as shown in the image below:

image001

Every method call will check if the element is attached to the DOM or not. If the check fails, then it will throw StaleElementReferenceException. Some of the regularly used methods are discussed below.

  • click()

This is used to perform click action on an element, but for this to happen, the element should be visible and its height and width must be greater than zero.

image002

For example, if you want to click on the element shown in the image above, you can write the command as:

WebElement element = driver.findElement(By.xpath(“//a[@title=’ Mayank Purohit’]”));

element.click();

Or

driver.findElement(By.xpath(“//a[@title=’ Mayank Purohit’]”)).click();

  • sendKeys(java.lang.CharSequence… keysToSend)

This is used to type into the element (text entry elements such as input and textarea).This method will accept CharSequence as a parameter.

image003

For example, the text box shown above is an input element. We can perform a sendKeys action on the same as shown below:

WebElement element = driver.findElement(By.id(“s”));

element.sendKeys(“Mayank”);

Or

driver.findElement(By.id(“s”)).sendKeys(“Mayank”);

This will type the text Mayank into the text field.

  • clear()

This will clear the value from the text entry element (such as input and textarea elements). Referring the above image, we can write this command as follows:

WebElement element = driver.findElement(By.id(“s”));

element.clear();

Or

driver.findElement(By.id(“s”)).clear();

This will clear the text Mayank from the text field.

  • isDisplayed()

This will check if the element is displayed or not. This is a Boolean function and will return true if the element is actually visible on the page. If the element is not visible on the page, then it will return false, even if the element exists in the DOM, but is hidden. For better understanding, refer the following image:

image004

Element 1 having id=”s” is visible on the page as Search text box. In this case, the following command will return true:

WebElement element = driver.findElement(By.id(“s”));

boolean status = element.isDisplayed();

Or

boolean status = driver.findElement(By.id(“s”)). isDisplayed ();

Element 2 which exists with property hidden is not visible at the page. In this case, the following command will return false:

WebElement element = driver.findElement(By.id(“searchsubmit”));

boolean status = element.isDisplayed();

Or

boolean status = driver.findElement(By.id(“searchsubmit”)). isDisplayed ();

  • isSelected()

This will check if the element is selected or not. This is a Boolean function and will return true if the element is selected else will return false. This applies to input elements such as check box, radio buttons, etc.

image005

In the above image, the checkbox is not selected by default. Hence, the following operation will return a false value:

WebElement element = driver.findElement(By.id(“persist_box”));

boolean status = element.isSelected();

Or

boolean status = driver.findElement(By.id(“persist_box”)). isSelected ();

  • isEnabled()

This will check if the element is enabled or not. This is a Boolean function and will return true if the element is enabled else will return false. For example, we have a ‘Send’ button, which is in disabled state until we enter text in the associated text field. The following operation will return true or false depending on whether the element is in enabled or disabled state:

WebElement element = driver.findElement(By.xpath(“//button[text()=’Send’]”));

boolean status = element.isEnabled();

Or

boolean status = driver.findElement(By.xpath(“//button[text()=’Send’]”)). isEnabled ();

image006

image007

  • getText()

This function is used to get the visible inner text of the element.

image008

For example, if we want to get the inner text of the element shown in image above, we can do it using the following command:

 WebElement element = driver.findElement(By.xpath(“//a[@rel=’me’]”));

String text = element.getText();

Or

String text = driver.findElement(By.xpath(“//a[@rel=’me’]”)). getText ();

This will return the String value Mayank Purohit.

  • getTagName()

This function is used to get the tag name of the given element. Consider the image below:

image009

We can get the tag name for the above selected element by using the following command:

WebElement element = driver.findElement(By.id(“page”));

String tagname = element. getTagName ();

Or

String tagname = driver.findElement(By.id(“page”)). getTagName ();

This will return the String value for tag name as a div.

  • getCssValue(String propertyName)

This function is used to get the value of given Css property of the specified element.

image010

Refer the image above. Suppose we want to find the value of selected Css properties (font-size or color) of Google Search button.

The following command will give us the font-size (13px) of the specified element:

WebElement element = driver.findElement(By.xpath(“//input[@name=’btnK’]”));

String value = element.getCssValue(“font-size”);

System.out.println(“Font size is:”+value);

 Following command will give us the color (as rgba strings) of the specified element:

WebElement element = driver.findElement(By.xpath(“//input[@name=’btnK’]”));

String value = element.getCssValue(“color”);

System.out.println(“Color is:”+value);

The returned rgba string will be: rgba(117, 117, 117, 1) corresponding to the Hex color code #757575 as shown in the above image.

  • getAttribute()

This function is used to get the attribute value of the given element. If no value is set, then null is returned. For example, we can get the attribute value of id, class, name, etc. as follows:

WebElement element = driver.findElement(By.id(“s”));

String attributeValue = element. getAttribute (“class”);

Or

String attributeValue = driver.findElement(By.id(“s”)). getAttribute (“class”);

image011

If you refer the above image, we’ll get the value of the class attribute as a field.

  • getSize()

This function is used to get the size (height and width) of the given element as shown below:

WebElement element = driver.findElement(By.id(“s”));

Dimension d = element.getSize();

System.out.println(“height is:”+ d.height);

System.out.println(“width is:”+d.width);

  • getLocation()

This function is used to get the location of the element on the page. For e.g. refer the command below:

WebElement element = driver.findElement(By.id(“s”));

Point pt = element.getLocation();

System.out.println(“x coordinate:”+pt.x);

System.out.println(“y coordinate:”+pt.y);

This will return the point object with the help of which we can get the ‘x’ and ‘y’ coordinates of the specified element.

Also Read: Understanding Selenium WebDriver API Commands (Part 1)