The Complete Guide to Handling Web Elements in Selenium

Are you looking to automate your cross browser tests using the Selenium web automation framework? If so, you must understand Web Elements and how to handle them in Selenium. Whether it’s locating Web Elements in Selenium or performing actions on them, interacting with Web Elements is a key part of any automated test script. 

In this article, we’ll discuss everything you need to know about Web Element handling in Selenium. We will also cover different strategies for handling dynamic Web Elements in Selenium and ways to improve your code’s execution time by avoiding unnecessary waits. 

So let’s get started!

What is Web Element?

Web page components such as text boxes, checkboxes, buttons, drop-downs, radio buttons, web forms, etc. are called web elements. These can be identified by attributes like id, classname, name, or XPath.

Via Selenium, you can interact with these web elements to perform tasks like clicking a button or filling in text boxes.

Syntax 

The syntax for interacting with a text box is given below:

WebElement element = driver.findElement(By.id(“TextBox”)); element.sendKeys(“stqatools”);

Or

driver.findElement(By.id(“TextBox”)).sendKeys(“stqatools”);

Common Selenium WebDriver Commands for Web Elements

Let us learn in-depth about the commonly used commands for common web elements on a web page in Selenium –

1. Clear Command

The clear() command in Selenium is used to clear the text from a text box or text area. It is equivalent to selecting the contents of the element and pressing the DELETE or BACKSPACE key.

Method – clear() : void 

Command – element.clear(); 

Code Syntax – 

WebElement element = driver.findElement(By.id(“UserName”)); element.clear(); //Or can be written as driver.findElement(By.id(“UserName”)).clear();

2. Sendkeys Command

The Sendkeys command in Selenium simulates the keyboard input of a user. It is used to type text into input boxes, text areas, and any Web Element allowing text input. It also simulates pressing special keys such as Enter, Tab, and other function keys.

Method – sendKeys(CharSequence? KeysToSend) : void 

Command – element.sendKeys(“text”); 

Code Syntax – 

WebElement element = driver.findElement(By.id(“UserName”)); element.sendKeys(“JavaTpoint”); //Or can be written as driver.findElement(By.id(“UserName”)).sendKeys(“JavaTpoint”);

3. Click Command

The Click command in Selenium is a user action that simulates a mouse click on an element, typically a button or a link, which can open a new page, submit a form, or perform other actions on the web page.

Method – click() : void 

Command – element.click(); 

Code Syntax – 

WebElement element = driver.findElement(By.linkText(“javaTpoint”)); element.click(); //Or can be written as driver.findElement(By.linkText(“javaTpoint”)).click();

4. IsDisplayed Command

The IsDisplayed command in Selenium determines if an element is currently visible on the page or hidden from view. Depending on the element’s visibility, it will return a Boolean value (true or false). This ensures that elements are visible on the page before continuing with a test.

Method – isDisplayed() : boolean 

Command – element.isDisplayed(); 

Code Syntax – 

WebElement element = driver.findElement(By.id(“UserName”)); boolean status = element.isDisplayed(); //Or can be written as boolean staus = driver.findElement(By.id(“UserName”)).isDisplayed();

5. IsEnabled Command

The IsEnabled command in Selenium is used to check whether the specified element is enabled or not. It returns true if the element is enabled and false if the element is disabled. It is used to verify the state of the web page elements.

Method – isEnabled() : boolean 

Command – element.isEnabled(); 

Code Syntax – 

WebElement element = driver.findElement(By.id(“UserName”)); boolean status = element.isEnabled(); //Or can be written as boolean staus = driver.findElement(By.id(“UserName”)).isEnabled();

6. IsSelected Command

The IsSelected command in Selenium determines whether an element has been selected or not. This command returns a boolean value of True or False depending on the state of the element. This command is mainly used for checkboxes, radio buttons, and options in a select element.

Method – isSelected() : boolean 

Command – element.isSelected();  

Code Syntax – 

WebElement element = driver.findElement(By.id(“Sex-Male”)); boolean status = element.isSelected();

7. Submit Command

The submit command in Selenium is used to submit a form. One can use it on any element that is a descendant of a form element.

Method – submit() : void 

Command – element.submit();  

Code Syntax –

WebElement element = driver.findElement(By.id(“SubmitButton”)); element.submit(); //Or can be written as driver.findElement(By.id(“SubmitButton”)).submit();

8. GetText Command

GetText is a command in Selenium used to retrieve the innerText of an element. It retrieves the text from a drop-down list, a paragraph, a list item, a button, etc.

Method – getText() : String 

Command – element.getText(); 

Code Syntax –

WebElement element = driver.findElement(By.xpath(“anyLink”)); String linkText = element.getText();

9. GetTagName Command

The GetTagName command in Selenium retrieves the tag name of an element. It returns a string containing the tag name of the element on which this command is being called.

Method – getTagName() : String  

Command – element.getTagName(); 

Code Syntax –

WebElement element = driver.findElement(By.id(“SubmitButton”)); String tagName = element.getTagName(); //Or can be written as String tagName = driver.findElement(By.id(“SubmitButton”)).getTagName();

10. getCssValue Command

The getCssValue command in Selenium is a method used to retrieve the value of a given CSS property of an element on a webpage. It is useful for verifying the attributes of an element, such as its font size, color, or visibility.

Method – getCssvalue() : String  

Command – element.getCssValue();  

Code Syntax –

WebElement element = driver.find_element_by_css_selector(“body”) bg_color = element.value_of_css_property(“background-color”)

11. getAttribute Command

The getAttribute command in Selenium is a method used to retrieve the value of an attribute of a Web Element. It checks the value of an attribute of an element, such as its ID, class, name, title, etc. It can also be used to check the state of a checkbox or radio button.

Method – getAttribute(String Name) : String  

Command – element.getAttribute(); 

Code Syntax –

WebElement element = driver.findElement(By.id(“SubmitButton”)); String attValue = element.getAttribute(“id”); //This will return “SubmitButton”

12. getSize Command

The getSize command in Selenium is used to return the width and height of an element. It returns a dictionary object with two keys, width, and height, which contain the width and height of the element, respectively.

Method – getSize() : Dimension 

Command – element.getSize(); 

Code Syntax –

WebElement element = driver.findElement(By.id(“SubmitButton”)); Dimension dimensions = element.getSize(); System.out.println(“Height :” + dimensions.height + “Width : “+ dimensions.width);

13. getLocation Command

The getLocation command in Selenium is used to retrieve the current URL of the page that is currently loaded in the browser. This command can be used to verify that the page has loaded correctly and that the URL matches the expected URL.

Method – getLocation() : Point 

Command – element.getLocation(); 

Code Syntax –

WebElement element = driver.findElement(By.id(“SubmitButton”)); Point = element.getLocation(); System.out.println(“X coordinate : ” + point.x + “Y coordinate: ” + point.y);

Operations performed on the WebElements

Working with Web Elements in Selenium can be complex and challenging. However, there are several operations that can be performed on Web Elements to be identified by their attributes like id and name, or they can be located with the help of XPath or CSS selectors. 

Furthermore, Web Element states can also be inspected in terms of whether they are enabled or disabled, visible or hidden on the page. As a result, all these operations make Web Elements in Selenium an incredibly useful test automation tool for web applications.

Some basic operations performed on the WebElement are –

• Browser Operations – Launch, navigate, maximize, minimize, refresh and exit.
• Web Page Operations – Get the title of the page, URL of the page
• Link Operations – Click on the Link, Return to the home page, and return to the link name
• Edit Box Operations – Enter a value, get a new value, delete
• Button Operations – Enable/disable button status, display status update
• Text Operations – Capture or return messages/texts on the webpage
• Image Operations – General image display, clickable image function, redirecting image link
• Frame Operations – Switch to a specific web page frame from the top window and vice versa
• Checkbox Operations – Tick and undo
• Drop Down Operations – Click on the drop-down menu, select and get the count

Locators In Selenium WebDriver

Selenium WebDriver supports many different locators to help you find Web Elements and interact with them. The basic locators include id, className, name, linkText, partialLinkText, tagName and XPath. Each of these is used in a slightly different way to provide you with the capability to locate Selenium Web Elements quickly and accurately. 

Id is one of the most popularly used locators. It helps locate an element based on its unique ID assigned by web developers, while className can help select Web Elements that follow the same style. The name helps identify Web Elements that have the same name tag, and linkText is apt for Web Elements in Selenium with text hyperlinks associated with it. 

Similarly, partialLinkText uses part of the text string with Web Elements, and tagName allows you to locate Web Elements using its HTML tag, while XPath helps to parse through the web pages or XML documents for Web Elements.

Final Words

While we use Selenium to automate our cross browser tests, scripting all the user actions is possible only with the help of supported programming languages like JAVA, JavaScript, Python, Ruby, C# or .NET. This means that to work with Selenium, you need to have expertise in one programming language at least.

This is where Testsigma can help. Testsigma low-code test automation platform. Here, you can automate even you complex test scenarios without needing to code. Testsigma lets you automate your end-to-end UI tests for web, mobile, desktop and APIs, from the same. And, the test automation and execution is 5x faster.

Frequently Asked Questions:

What are the types of Web Elements?

Web Elements are the objects that comprise a web page. They can be divided into a number of categories, such as windows, web browsers, web forms, and web objects. 

Web forms consist of web elements like text fields, buttons, and checkboxes used to extract information from end users. Last but not least are web elements which include images, videos, hyperlinks, and documents like PDFs. 

What is the purpose of WebElement?

WebElement (an HTML element) is the interface that allows the Selenium code to interact with various elements on web pages. It allows users to manipulate and assert Web Elements on web pages by selecting, clicking, entering data, etc.

Is size() a WebElement method?

No, size() is not a WebElement method. It is a method of the built-in Java class java. util.Collection.