Working with Selenium WebElements

Table of Contents

• 1. Selenium WebElements
• 2. WebElement Locators
• 3. Working With Text Box
• 4. Working With Buttons
• 5. Checkboxes and Radio Buttons
• 6. Selecting from Drop-Downs
• 7. File Uploads
• 8. Locating Links
• 9. Summary

In our previous tutorial, Getting Started with Selenium WebDriver, we discussed the way to set up the environment for automating testing using Selenium and wrote a basic script to do a simple test. In this tutorial, we will discuss other functionalities of the Selenium Web Driver in depth with examples.

1. Selenium WebElements

Web Element is a class in Web Driver to handle different  HTML elements of a web page. It can locate and perform different functionalities upon them. Following are the two methods, commonly used to obtain AUT elements directly and to store them as WebElement objects.

In order to create objects of WebElement, we need to import the package Selenium.WebElement

2. WebElement Locators

Locating different web elements are extremely crucial in testing web pages since the chance of ending up with incorrect elements is higher. Therefore, Selenium WebElement has introduced several different ”Locators” to locate web elements using their unique properties precisely. They can be easily identified using the Selenium IDE or Browser’s Developer Tool. Below is a list of Locators and their syntaxes.

Once the elements are located, different functionalities can be performed on them. In this tutorial, we will be using a sample web form to explain how Selenium WebElements can be used to test its various form elements.

3. Working With Text Box

Initially, we need to create WebElements for the ‘Firstname’ and ‘Lastname’ fields.

Once the element objects are made, the first thing to do is to clear the text, which is already in the text field. This is done by the clear() method.

Finally, we can enter the relevant text using the sendKeys() method by sending the text value as the parameter.

4. Working With Buttons

Buttons are usually accessed through the click() method. In the case of Submit buttons, the submit() method will be used to submit all the inputs to the server.

In this case, the className is used as the locator to find the button.

5. Checkboxes and Radio Buttons

Toggling checkboxes on or off and selecting radio buttons are done using the click() method.

The checkbox element is located using its XPath. This code checks if the checkbox is selected or not and then prints a message.

In the case of Radio Buttons, it is located using cssSelector.

6. Selecting from Drop-Downs

Before selecting values from a drop-down, we need to import a package.

Once that is done, we can declare the drop-down as a Select object.

Now we can control the drop-down by selecting its values using different methods defined in the Select class.

We can repeat the above code with different parameters when selecting multiple items.

7. File Uploads

There are a couple of solutions available for implementing ‘File Upload’ functionality within your selenium scripts. However, not all solutions may work on all applications because at times it may depend on typical ‘design or kind of implementation’ your application or website uses at the backend and/or client end.

However here is one such, simple implementation for File uploading. In the below snippet ‘File Uploading’ is simply done by locating the file-select input field and by entering the path of the file to be uploaded using the sendKeys() method.

8. Locating Links

We can locate links and access them using the linkText() and partialLinkText() locators. In the below example, we will obtain the link with its complete text using linkText() and part of the link text using partialLinkText() locator.

Here is the complete code.

package newPackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.firefox.FirefoxDriver;

public class myClass {

   public static void main(String[]args) throws InterruptedException{
      System.setProperty("webdriver.gecko.driver", "C:\\geckodriver\\geckodriver.exe");
      
      WebDriver driver = new FirefoxDriver();
      
      String baseUrl = "https://www.toolsqa.com/automation-practice-form/";
        String pageTitle="";
      driver.get(baseUrl);
      
      //Clicking a link text using linkText Locator
      driver.findElement(By.linkText("Partial Link Test")).click();
      System.out.println(driver.getTitle());
      Thread.sleep(1000);
      
      //Clicking a link text using partialLinkText Locator
      driver.findElement(By.partialLinkText("Partial")).click();
      System.out.println(driver.getTitle());
      
      //Capturing the page title
      pageTitle = driver.getTitle();
      
      //Get webElements for First name and Last name text boxes
      //Locator by name
      WebElement firstName= driver.findElement(By.name("firstname"));
      //Locator by Id
      WebElement lastName= driver.findElement(By.id("lastname"));
      
      //Clearing the text fields
      firstName.clear();
      lastName.clear();
      
      //Entering values to the text field
      firstName.sendKeys("John");
      lastName.sendKeys("Doe");
      
      //Get webElements for gender radio buttons using cssSelector
      WebElement radioMale=driver.findElement(By.cssSelector("input#sex-0"));
      //Selecting it using click()method and printing their values.
      radioMale.click();
      System.out.println("Male Selected");
      
      WebElement radioFmale=driver.findElement(By.cssSelector("input#sex-1"));
      radioFmale.click();
      System.out.println("Female Selected");
      
      //Selecting years of experience radio button
      WebElement yrsExp= driver.findElement(By.id("exp-2"));
      yrsExp.click();
      //Printing the number of experience selected
      System.out.println("Years of Experience = " + yrsExp.getText());
      
      //Entering values in Date text box
      WebElement date= driver.findElement(By.id("datepicker"));
      date.sendKeys("17-12-2019");
      
      //Selecting Profession Check box
      WebElement prof= driver.findElement(By.id("profession-0"));
      prof.click();
      
      //uploading a file
      WebElement uploadElement = driver.findElement(By.id("photo"));
      uploadElement.sendKeys("C:\\profilePic.jpg");
      
      //Creating web element for selecting Automation tool using xpath
      WebElement selQtp= driver.findElement(By.xpath("//*[@id=\'tool-0']"));
      // Toggling on and off to see if selected
      selQtp.click();	
      
      if (selQtp.isSelected())
         System.out.println("QTP Selected");
      else
         System.out.println("QTP Not Selected");
      //Unchecking
      selQtp.click();	
      
      if (!selQtp.isSelected())
         System.out.println("QTP Not Selected");
      
      //Selecting single continent using drop down
      Select singleContiDrp = new Select(driver.findElement(By.id("continents")));
      
      singleContiDrp.deselectByVisibleText("South America");
      
      //Selecting multiple continent using drop down
      Select contiDrp = new Select(driver.findElement(By.id("continentsmultiple")));
      
      contiDrp.deselectByVisibleText("Asia");
      contiDrp.deselectByVisibleText("Europe");
      
      //Locating button using className
      WebElement firstBtn= driver.findElement(By.className("btn btn-info"));
      firstBtn.click();
   
      
      Thread.sleep(1000);
      if (pageTitle.contentEquals(driver.getTitle())){
         System.out.println("Test Passed!");

         } else {

         System.out.println("Test Failed");}	 
      driver.close();
      
   }
   
}

9. Summary