Web Element class - Notes By ShariqSP

Understanding the WebElement Class in Selenium and Appium Testing

The WebElement class is a core part of Selenium WebDriver and is widely used in both web and mobile automation testing, including Appium. It represents an element on a web page or within a mobile application, allowing testers to interact with the UI elements through methods like clicking, entering text, and retrieving attributes.

What is WebElement?

The WebElement class is a Selenium abstraction for interacting with UI elements in web and mobile environments. It provides methods for simulating user actions like clicking buttons, filling forms, and validating the state of elements.

Key Features of WebElement

  • Element Interaction:

    Allows interaction with visible elements like buttons, input fields, and links.

  • Attribute and Property Handling:

    Supports retrieving attributes, CSS properties, and visible text for validation purposes.

  • Cross-Platform Usage:

    Can be used for both web testing in Selenium and mobile web testing in Appium.

Common Methods of WebElement

The WebElement class includes numerous methods for interacting with elements. Below are some of the most commonly used methods:

  • click():

    Simulates a click action on the element.

    
                  WebElement button = driver.findElement(By.id("submit_button"));
                  button.click();
                        
  • sendKeys(String text):

    Types the specified text into an input field or textarea.

    
                  WebElement inputField = driver.findElement(By.name("username"));
                  inputField.sendKeys("testuser");
                        
  • clear():

    Clears the current value of an input field or textarea.

    
                  WebElement passwordField = driver.findElement(By.name("password"));
                  passwordField.clear();
                        
  • getText():

    Retrieves the visible text of the element.

    
                  WebElement label = driver.findElement(By.id("welcome_message"));
                  System.out.println(label.getText());
                        
  • getAttribute(String attributeName):

    Retrieves the value of a specified attribute of the element.

    
                  WebElement link = driver.findElement(By.tagName("a"));
                  System.out.println(link.getAttribute("href"));
                        
  • isDisplayed():

    Checks if the element is currently visible on the screen.

    
                  WebElement element = driver.findElement(By.id("logo"));
                  if (element.isDisplayed()) {
                      System.out.println("Element is visible.");
                  }
                        
  • isEnabled():

    Checks if the element is enabled for interaction (e.g., not disabled).

    
                  WebElement submitButton = driver.findElement(By.id("submit_button"));
                  if (submitButton.isEnabled()) {
                      submitButton.click();
                  }
                        
  • isSelected():

    Checks if a checkbox or radio button is selected.

    
                  WebElement checkbox = driver.findElement(By.id("agree_terms"));
                  if (!checkbox.isSelected()) {
                      checkbox.click();
                  }
                        

Locating WebElements

Elements can be located using various strategies provided by the By class, such as:

  • By.id(): Locates elements by their unique ID.
  • By.name(): Locates elements by their name attribute.
  • By.className(): Locates elements by their CSS class name.
  • By.tagName(): Locates elements by their tag name.
  • By.xpath(): Locates elements using XPath expressions.
  • By.cssSelector(): Locates elements using CSS selectors.

              WebElement button = driver.findElement(By.id("submit_button"));
              WebElement inputField = driver.findElement(By.cssSelector(".form-control"));
                

Best Practices for Using WebElement

  • Use unique locators like id or name for more reliable tests.
  • Avoid relying on XPath when other locators are available, as it may affect test performance.
  • Ensure proper wait conditions (e.g., explicit waits) before interacting with elements to handle dynamic page loading.
  • Combine WebElement interactions with assertions to validate application behavior.

Example: Using WebElement in a Selenium Test

The following example demonstrates how to use the WebElement class in a Selenium test script:


              import org.openqa.selenium.By;
              import org.openqa.selenium.WebDriver;
              import org.openqa.selenium.WebElement;
              import org.openqa.selenium.chrome.ChromeDriver;
              
              public class WebElementExample {
                  public static void main(String[] args) {
                      System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");
                      WebDriver driver = new ChromeDriver();
              
                      driver.get("https://example.com");
              
                      // Locate and interact with elements
                      WebElement usernameField = driver.findElement(By.id("username"));
                      usernameField.sendKeys("testuser");
              
                      WebElement passwordField = driver.findElement(By.id("password"));
                      passwordField.sendKeys("password");
              
                      WebElement loginButton = driver.findElement(By.id("login_button"));
                      loginButton.click();
              
                      driver.quit();
                  }
              }
                    

Differences Between MobileElement and WebElement

Both MobileElement and WebElement are integral parts of Selenium and Appium automation testing. While they share many similarities, they differ in their use cases, supported platforms, and additional functionalities tailored to their respective environments. The table below highlights the key differences:

Aspect MobileElement WebElement
Definition A class in Appium that extends Selenium’s WebElement to provide additional methods for mobile-specific interactions. A Selenium class that represents a UI element on a web page and provides methods for standard interactions.
Supported Platforms Mobile platforms like Android and iOS (native, hybrid, and mobile web applications). Web platforms (desktop and mobile browsers).
Gesture Support Supports gestures like tap, swipe, and long press when combined with Appium’s TouchAction. Does not support gestures; designed for standard mouse and keyboard interactions.
Locator Strategies Works with mobile-specific locators like MobileBy.AccessibilityId, MobileBy.AndroidUIAutomator, and MobileBy.iOSClassChain. Supports web-specific locators like By.id, By.name, By.cssSelector, and By.xpath.
Methods Inherits all methods of WebElement and adds mobile-specific functionality for advanced interactions. Standard methods for interacting with web elements, such as click, sendKeys, and getText.
Use Cases Native and hybrid mobile application testing, as well as mobile web applications in Appium. Web application testing using Selenium or mobile browsers via Appium.
Cross-Platform Compatibility Designed for mobile platforms but can also work with mobile web browsers using Appium. Works across all browsers supported by Selenium (desktop and mobile).
Community and Usage Primarily used in the Appium community for mobile testing scenarios. Widely used in the Selenium community for web testing scenarios.

Summary

While WebElement is a versatile class designed for web application testing, MobileElement extends its functionality to cater specifically to mobile applications. Choose the appropriate class based on the type of application you are testing.