Selenium Elements

What is a web element?

Anything present on the web is called the Web element. This includes the text boxes, buttons, links etc.  So before performing any action in selenium,  we can easily identify the selenium element characteristics. This provides an API to find elements and take actions like entering the text into test boxes, Clicking the buttons etc.

Every webpage element will have attributes. Elements have more than one attribute. And these elements will have mostly unique attributes for different elements.  Moreover, these elements can have the same value for the class name.  For instance, consider a page containing two elements named image and text box. These elements do have the NAME  attribute and ID attribute. And these values need to be unique for each element. So we use locators to identify the webpage elements.

Find element():

Find element() identifies the web page elements .This element identifies the web elements lists on the web page.  And there are multiple ways to uniquely identify the web elements in a page such as ID, Name, Class Name, Link Text, Partial Link text, Tag name, and Xpath.

Click here to know the importance of JAVA in Selenium

Find Elements():

This command takes an object element and returns the list of parameters. And if there are no elements found, this returns an empty list. If the match found, it returns the elements collection. Moreover, like the array, all the elements are indexed with a number starting with zero.

So now let's have a look at how selenium tutorial differentiates these elements:

Now we will see the various selenium web elements:

Text box :

These boxes accept the typed values and show  them as they are

But there are some text data, that requires to hide from the end users like passwords. In such cases, it would display the text in dotted format.

And you can add these elements in the project using the following code.

web element name = driver.findelement(By.id("name"));web element password = driver.findelement(By.id("passwd"))";

How to send values into the Text boxes?

People can easily send values into the text boxes using sendkeys() method.

email.sendkeys("info@onlineitguru.com")password.sendkeys("mypassword")

How do you delete your values in input boxes?

Clear method is used to delete the text in the input box. And it does not require any special parameter. Selenium automation testing says this snippet will clear out the text field  from the name and password fields

The complete working of the code is  shown below

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.*;public class Form {public static void main(String[] args) {// declaration and instantiation of objects/variablesSystem.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");WebDriver driver = new ChromeDriver();String baseUrl = "URL"; // given the URL to testdriver.get(baseUrl);WebElement email = driver.findElement(By.id("email"));WebElement password = driver.findElement(By.name("passwd"));email.sendKeys("abcd@gmail.com");password.sendKeys("abcdefghlkjl");System.out.println("Text Field Set");// Deleting values in the text boxemail.clear();password.clear();System.out.println("Text Field Cleared");// Find the submit buttonWebElement login = driver.findElement(By.id("SubmitLogin"));// Using click method to submit formemail.sendKeys("onlineitguru@gmail.com");password.sendKeys("abcdefghlkjl");login.click();System.out.println("Login Done with Click");//using submit method to submit the form. Submit used on password fielddriver.get(baseUrl);driver.findElement(By.id("email")).sendKeys("onlineitguru@gmail.com");driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");driver.findElement(By.id("SubmitLogin")).submit();System.out.println("Login Done with Submit");//driver.close();}}

buttons:

So after entering the data in the fields, the user needs to confirm the client, regarding the name and password confirmation. At this moment, buttons are required. For example, Sign in and Submit buttons

The buttons were usually classified into two types namely checkbox and Radio buttons

Check box :

The checkbox is used to select more than options in a group. With the click() method, we can toggle the checkbox on /off. The code provided below will click on Facebook "keep me logged in "  check the box twice and the output the result as true when the toggled is on and returns false if the toggled is off.

public static void main(String[] args){WebDriver driver = new FirefoxDriver();String base URL = "http://www.facebook.com";driver.get(baseURL);WebElement chkFBPersist = driver.findElement(By.id("persist_box"));for(int i=0;i<2;i++){chkFBPersist.click();System.out.println(chkFBPersist.isSelected());}driver.quit();}

Note:

isSelected() is used to check the toggled status( either on (or) off)

Also check the commands of Selenium Automation tool

Radio buttons():

And Radio is used to select only one option among multiple options.  Moreover,  like Text buttons, Radio buttons can be toggled using the click() method.

WebElement radio1 = driver.findElement(By.id("vfb-7-1"));WebElement radio1 = driver.findElement(By.id("vfb-7-2"));radio1.click();radio2. click();

check out the it training  complete button code

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.*;public class Form {public static void main(String[] args) {// declaration and instantiation of objects/variablesSystem.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");WebDriver driver = new ChromeDriver();driver.get("URL");//Provide the URL to testWebElement radio1 = driver.findElement(By.id("vfb-7-1"));WebElement radio2 = driver.findElement(By.id("vfb-7-2"));//Radio Button1 is selectedradio1.click();System.out.println("Radio Button Option 1 Selected");//Radio Button1 is de-selected and Radio Button2 is selectedradio2.click();System.out.println("Radio Button Option 2 Selected");// Selecting CheckBoxWebElement option1 = driver.findElement(By.id("vfb-6-0"));// This will Toggle the Check boxoption1.click();// Check whether the Check box is toggled onif (option1.isSelected()) {System.out.println("Checkbox is Toggled On");} else {System.out.println("Checkbox is Toggled Off");}//Selecting Checkbox and using isSelected Methoddriver.get("http://demo.guru99.com/test/facebook.html");WebElement chkFBPersist = driver.findElement(By.id("persist_box"));for (int i=0; i<2; i++) {chkFBPersist.click ();System.out.println("Facebook Persists Checkbox Status is -  "+chkFBPersist.isSelected());}//driver.close();}}

And the next option in selenium tutorial for beginners  is Drop down the list:

Usually, a drop-down list is used to select one among many options. In other UI designer prefer drop-down list if the options were greater than the single webpage.  A drop down in HTML is done using the following code

RoseLillyJasminelotus

So to perform this option in Web driver, we need to execute the following code. Usually in selenium, we do import the org.openqa.selenium.support.ui.Select package. 

public static void main(String[] args){WebDriver driver = new Firefoxdriver();driver.get("URL");Selecr fruits = new Select(driver.findElement(By.id("flowers")));flowers.selectByvisileText("Rose");flowers.selectByIndex(1);}

Moreover, this select has various commands,  

And we can execute the dropdown in  web driver with the following code:

package newpackage;

import org.openqa.selenium.WebDriver;import org.openqa.selenium.firefox.FirefoxDriver;import org.openqa.selenium.support.ui.Select;import org.openqa.selenium.By;public class accessDropDown { public static void main(String[] args) { System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");    String baseURL = "URL";//Provide the URL to test    WebDriver driver = new FirefoxDriver();driver.get(baseURL);Select drpCountry = new Select(driver.findElement(By.name("country")));drpCountry.selectByVisibleText("ANTARCTICA");//Selecting Items in a Multiple SELECT elementsdriver.get("http://jsbin.com/osebed/2");Select fruits = new Select(driver.findElement(By.id("fruits")));fruits.selectByVisibleText("Banana");fruits.selectByIndex(1); }}

Image Links :

These are the links in the web pages represented in an image. when Clicked, this navigates to the different window (or) different page.  Since these are the image files, they cannot By.linkText() and By.partialLinkText() methods. So at this moment, we need to use By.cssSelector (or) By.Xpath

Mouse click and Keyboard Event:

Using Advanced API Interactions, we can handle keyboard and mouse events. To execute these events both Actions and Action classes are required.   This action class provides the following mouse and keyboard clicks.

Likewise, there are some other web elements like images, hyperlinks, error messages, Combo box, Web table, and Frames.

Also, check how the connection happens between Selenium and Excel