Skip to content

Extracting WebElement

To interact with the website displayed in the browser, Selenium provides us with a WebElement interface. This interface has over 21 valuable methods that let us interact with any website. But before we can interact with the website, we need to be able to extract the element from the website.

In this code note, we will cover following topics:

  • What is WebElement
  • WebElement Location
  • Extracting Single WebElement
  • Extracting List of WebElements



› What is WebElement

Everything you see on the website is known as a web element. This includes text, icons, images, videos, buttons, etc. For example, as you can see from the following screenshot, the Facebook sign-in page has over nine interactable elements and is visible to the user.

Each of these elements can be represented as a WebElement object in Selenium. Through this object and its methods, we can interact with these actual web elements. However, we must first find the exact location ( coordinate ) of the element in the website to be able to interact with them in our code.



› WebElement Location

Finding an element location from the website involves finding its exact coordinate value with specialized element locating strategies. Usually, we will use an AI-powered tool called Ranorex Selocity to find these values.

Locating Strategies

Ranorex Selocity will auto-generate location value for us on a given website. The location of the element is represented as Byobject in Selenium and there are eight ways to capture them.

  • Using Xpath query
  • Using CSS query
  • Using id attribute value
  • Using name attribute value
  • Using class attribute value
  • Using tag name value
  • Using link text value
  • Using partial link text value
Locating Strategies Usage Example
Xpath By.xpath()
Css Selector By.cssSelector()
id attribute By.id()
name attribute By.name()
class attribute By.className()
element tag name By.tagName()

Please note that in order to get the most generic and stable element location, always resort to using xpath, css query, and id attribute value.

Each of these element location values can be copied & pasted from the Ranorex Selocity.

Using the element location value in your code is relatively simple. All you have to do is copy & paste the location value from Ranorex to the Selenium By object. For example, a Log in link from above website can be represented in Selenium code as follows: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Example 1: Using the first CSS query 
By loc_log_in = By.cssSelector(".btn.btn-link.btn-sm.text-primary");

// Example 2: Using the second CSS query 
By loc_log_in = By.cssSelector(".text-primary");

// Example 3: Using link text value 
By loc_log_in = By.linkText("Log in");

// Example 4: Using xpath query  
By loc_log_in = By.xpath(".//body[@class='bidi-highlight']//nav");



› Extracting WebElement

Once we got the location of the target element in the website, we can extract the element as a WebElement object for usage in our code. In order to accomplish this, we will use driver.findElement(By by) method, which requires element location value as By object. Here is the syntax: 

1
2
3
4
5
6
// Location value from the Ranorex Selocity converted to By object
By loc_log_in = By.cssSelector(".text-primary");

// Extracting the element as WebElement in Selenium 
// providing the above by object into findElement() method 
WebElement loginButton = driver.findElement(loc_log_in);

Please note that if the element is not extractable with provided element location value, Selenium will throw a NoSuchElementException error to the programmer. That is a nice way of knowing that your element location might be faulty or there might be element related bug in the website.



› Extracting WebElements

Sometimes we need to find multiple elements from the website. This can be done with driver.findElements(By by) method. Regardless we will still provide a common element location value as By object.

For example, if we want to extract all the 3 image elements from the following page:

We will do as follows: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Location of all of the avatar picture elements 
By loc_avatars = By.xpath("//img[@loading='lazy']");

// Using findElements(By by) to extract all the elements as 
// list of WebElemet
List<WebElement> allAvatars = driver.findElements(loc_avatars);
int count = allAvatars.size();

 // prints 3 to the console if elements found
 // prints 0 to the console if elements not found
System.out.println(count);

Please note that if the elements are not found, Selenium will not throw any error for multiple-element extraction. Instead, it will return an empty list of elements with size 0.

Now the element in the website is ready to be used in your Selenium code as a WebElement object!



› Summary

Please watch the following video for the summary of all the topics presented in this code note.

GitHub Repo: AlphaleafTech/note_selenium

If the link does not work: 

1
https://github.com/AlphaleafTech/note_selenium

Please watch the video with 1.25 playback speed

Note Summary Video