Interacting with WebElements

In the previous section, we saw how to locate WebElements on a web page by using different locator methods. Here, we will see all the different user actions that can be performed on a WebElement. 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, it is the test script developer's responsibility to use the actions that are supported by the target element. In case we try to execute the wrong action on a WebElement, we don't see any exception or error thrown and we don't see any action get executed; WebDriver ignores such actions silently.

Now, let's get into each of the actions individually by looking at their Javadocs and a code example.

Getting element properties and attributes

In this section, we will learn the various methods to retrieve value and properties from the WebElement interface.

The getAttribute() method

The getAttribute method can be executed on all the WebElements. Remember, we have seen attributes of WebElement in the WebElements section. The HTML attributes are modifiers of HTML elements. They are generally key-value pairs that appear in the start tag of an element. For example:

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

In the preceding code, name and id are the attributes or attribute keys and Username and uname are the attribute values.

The API syntax of the getAttribute() method is as follows:

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

In the preceding code, the input parameter is String, which is the name of the attribute. The return type is again String, which is the value of the attribute.

Now let's see how we can get all the attributes of a WebElement using WebDriver. Here, we will make use of the Search box from the example application. This is what the element looks like:

<input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search entire store here..." autocomplete="off">

We will list all the attributes of this WebElement using WebDriver. The code for that is as follows:

@Test
public void elementGetAttributesExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    System.out.println("Name of the box is: "
            + searchBox.getAttribute("name"));
    System.out.println("Id of the box is: " + searchBox.getAttribute("id"));
    System.out.println("Class of the box is: "
            + searchBox.getAttribute("class"));
    System.out.println("Placeholder of the box is: "
            + searchBox.getAttribute("placeholder"));
}

In the preceding code, the last four lines of code use the getAttribute() method to fetch the attribute values of the name, id, class, and placeholder attributes of the WebElement search box. The output of the preceding code will be following:

 Name of the box is: q
 Id of the box is: search
 Class of the box is: input-text required-entry
 Placeholder of the box is: Search entire store here...

Going back to the By.tagName() method of the previous section, if the search by a locating mechanism, By.tagName, results in more than one result, you can use the getAttribute() method to further filter the results and get to your exact intended element.

The getText() method

The getText method can be called from all the WebElements. It will return visible text if the element contains any text on it, otherwise it will return nothing. The API syntax for the getText() method is as follows:

java.lang.String getText()

There is no input parameter for the preceding method, but it returns the visible innerText string of the WebElement if anything is available, otherwise it will return an empty string.

The following is the code to get the text present on the Site notice element present on the example application Homepage:

@Test
public void elementGetTextExample() {
    WebElement siteNotice = driver.findElement(By
            .className("global-site-notice"));
    
    System.out.println("Complete text is: "
            + siteNotice.getText());
}

The preceding code uses the getText() method to fetch the text present on the Site notice element, which returns the following:

Complete text is: This is a demo store. Any orders placed through this store will not be honored or fulfilled.

The getCssValue() method

The getCssValue method can be called on all the WebElements. This method is used to fetch a CSS property value from a WebElement. CSS properties can be font-family, background-color, color, and so on. This is useful when you want to validate the CSS styles that are applied to your WebElements through your test scripts. The API syntax for the getCssValue() method is as follows:

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

In the preceding code, the input parameter is the String value of the CSS property name, and the return type is the value assigned to that property name.

The following is the code example to retrieve font-family of the text from the Search box:

@Test
public void elementGetCssValueExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    System.out.println("Font of the box is: "
            + searchBox.getCssValue("font-family"));
}

The preceding code uses the getCssValue() method to find font-family of the text visible in the Search box. The output of the method is shown here:

Font of the box is: Raleway, "Helvetica Neue", Verdana, Arial, sans-serif

The getLocation() method

The getLocation method can be executed on all the WebElements. This is used to get the relative position of an element where it is rendered on the web page. This position is calculated relative to the top-left corner of the web page of which the (x, y) coordinates are assumed to be (0, 0). This method will be of use if your test script tries to validate the layout of your web page.

The API syntax of the getLocation() method is as follows:

Point getLocation()

The preceding method obviously doesn't take any input parameters, but the return type is a Point class that contains the (x, y) coordinates of the element.

The following is the code to retrieve the location of the Search box:

WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Location of the box is: "
        + searchBox.getLocation());

The output for the preceding code is the (x, y) location of the Search box, as shown in the following screenshot:

Location of the box is: (873, 136)

The getSize() method

The getSize method can also be called on all the visible components of HTML. It will return the width and height of the rendered WebElement. The API syntax of the getSize() method is as follows:

Dimension getSize()

The preceding method doesn't take any input parameters, and the return type is a class instance named Dimension. This class contains the width and height of the target WebElement. The following is the code to get the width and height of the Search box:

WebElement searchBox = driver.findElement(By.name("q"));
System.out.println("Size of the box is: "
        + searchBox.getSize());

The output for the preceding code is the width and height of the Search box, as shown in the following screenshot:

Size of the box is: (281, 40) 

The getTagName() method

The getTagName method can be called from all the WebElements. This will return the HTML tag name of the WebElement. For example, in the following HTML code, the button is the tag name of the HTML element:

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

In the preceding code, the button is the tag name of the HTML element.

The API syntax for the getTagName() method is as follows:

java.lang.String getTagName()

The return type of the preceding method is String, and it returns the tag name of the target element.

The following is the code that returns the tag name of the Search button:

@Test
public void elementGetTagNameExample() {
    WebElement searchButton = driver.findElement(By.className("search-button"));
    System.out.println("Html tag of the button is: "
            + searchButton.getTagName());
}

The preceding code uses the getTagName() method to get the tag name of the Search button element. The output of the code is as expected:

Html tag of the button is: button

Performing actions on WebElements

In the previous section, we saw how to retrieve values or properties of WebElements. In this section, we will see how to perform actions on WebElements, which is the most crucial part of automation. Let's explore the various methods available in the WebElement interface.

The sendKeys() method

ThesendKeys action is applicable for textbox or textarea HTML elements. This is used to type text into the textbox. This will simulate the user keyboard and types text into WebElements exactly as a user would. The API syntax for the sendKeys() method is as follows:

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. Now, let's see a code example of how to type a search text into the Search box using the sendKeys() method:

@Test
public void elementSendKeysExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    searchBox.sendKeys("Phones");
    searchBox.submit();
    assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Phones'");
}

In the preceding code, the sendKeys() method is used to type the required text in the textbox element of the web page. This is how we deal with normal keys, but if you want to type in some special keys, such as Backspace, Enter, Tab, or Shift, we need to use a special enum class of WebDriver, named Keys. Using the Keys enumeration, you can simulate many special keys while typing into a WebElement.

Now let's see some code example, which uses the Shift key to type the text in uppercase in the Search Box:

@Test
public void elementSendKeysCompositeExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    searchBox.sendKeys(Keys.chord(Keys.SHIFT,"phones"));
    searchBox.submit();
    assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'PHONES'");
}

In the preceding 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. Try this in your environment to see all the text being typed in uppercase.

The clear() method

The clear action is similar to the sendKeys() method, which is applicable for the textbox and textarea elements. This is used to erase the text entered in a WebElement using the sendKeys() method. This can be achieved using the Keys.BACK_SPACE enum, but WebDriver has given us an explicit method to clear the text easily. The API syntax for the clear() method is as follows:

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.

Now, let's see how we can clear text that is entered in the Search box. The code example for it is as follows:

@Test
public void elementClearExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    searchBox.sendKeys(Keys.chord(Keys.SHIFT,"phones"));
    searchBox.clear();
}

We have used the WebElement's clear() method to clear the text after typing phones into the Search box.

The submit() method

The submit() action can be taken on a Form or on an element, which is inside a Form element. This is used to submit a form of a web page to the server hosting the web application. The API syntax for the submit() method is as follows:

void submit()

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

Now, let's see a code example to submit the form on a Search page:

@Test
public void elementSubmitExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    searchBox.sendKeys(Keys.chord(Keys.SHIFT,"phones"));
    searchBox.submit();
}

In the preceding code, toward the end is where the Search form is submitted to the application servers using the submit() method. Now, try to execute the submit() method on an element, let's say the About link, which is not a part of any form. We should see NoSuchElementException is thrown. So, when you use the submit() method on a WebElement, make sure it is part of the Form element.

Checking the WebElement state

In the previous sections, we saw how to retrieve values and perform actions on WebElements. Now, we will see how to check the state of a WebElement. We will explore methods to check whether the WebElement is displayed in the Browser window, whether it is editable, and if the WebElement is Radio Button of Checkbox, we can determine whether it's selected or unselected. Let's see how we can use the methods available in the WebElement interface.

The isDisplayed() method

The isDisplayed action verifies whether an element is displayed on the web page and can be executed on all the WebElements. The API syntax for the isDisplayed() method is as follows:

boolean isDisplayed()

The preceding method returns a Boolean value specifying whether the target element is displayed on the web page. The following is the code to verify whether the Search box is displayed, which obviously should return true in this case:

@Test
public void elementStateExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    System.out.println("Search box is displayed: "
            + searchBox.isDisplayed());
}

The preceding code uses the isDisplayed() method to determine whether the element is displayed on a web page. The preceding code returns true for the Search box:

Search box is displayed: true

The isEnabled() method

The isEnabled action verifies whether an element is enabled on the web page and can be executed on all the WebElements. The API syntax for the isEnabled() method is as follows:

boolean isEnabled()

The preceding method returns a Boolean value specifying whether the target element is enabled on the web page. The following is the code to verify whether the Search box is enabled, which obviously should return true in this case:

@Test
public void elementStateExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    System.out.println("Search box is enabled: "
            + searchBox.isEnabled());
}

The preceding code uses the isEnabled() method to determine whether the element is enabled on a web page. The preceding code returns true for the Search box:

Search box is enabled: true 

The isSelected() method

The isSelected method returns a boolean value if an element is selected 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. The API syntax for the isSelected() method is as follows:

boolean isSelected()

The preceding method returns a Boolean value specifying whether the target element is selected on the web page. The following is the code to verify whether the Search box is selected on a search page:

@Test
public void elementStateExample() {
    WebElement searchBox = driver.findElement(By.name("q"));
    System.out.println("Search box is selected: "
            + searchBox.isSelected());
}

The preceding code uses the isSelected() method. It returns false for the Search box, because this is not a radio button, options in select, or a checkbox. The preceding code returns false for the Search box:

Search box is selected: false

To select a Checkbox or Radio button, we need to call the WebElement.click() method, which toggles the state of the element. We can use the isSelected() method to see whether it's selected.