Skip to main content

Learn Automation Testing: Selenium Tutorial (Locators in Selenium)


Hello Everyone! Welcome back to another Fresh article of MODTECHSTUFF where you Learn Automation testing.
In this article, we will talk about how to use locators to inspect the element on the web page.

Learn Automation testing

What do you understand by Locators?

The purpose of Locator is to tell Selenium which GUI components like Text Box, Buttons, Check Boxes, and so forth it is necessities to work on. The recognizable proof of right GUI components is essential to making an automation content. However, exact distinguishing proof of GUI components is surprisingly troublesome. In some cases, you wind up working with mistaken GUI components or no components by any means! Subsequently, Selenium gives various Locators to exactly find a GUI component 

Much the same as Selenium IDE, WebDriver utilizes a similar arrangement of finding methodologies for indicating the area of a specific web component. Since we are utilizing WebDriver with java; each finding procedure has its own order in Java to find the web components.
These are the ways of Locating an element on a web page.
  • Locating  By ID
  • Locating  By Name
  • Locating  By Class Name
  • Locating  By Tag Name
  • Locating  By Link Text
  • Locating  By CSS

The most common way of locating elements is by ID because every element has a different id.

Syntax: id=id of the element

For example, I will use Facebook as our test site. Use this page https://www.facebook.com/  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. You have to select the id='email' as shown below.

Learn Automation testing


We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".


import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.facebook.com/"); 
 // Click on the search text box and send value 
 driver.findElement(By.id("email")).sendKeys("Modetechstuff"); 
 } 
}

Locating  By Name

Locating elements by name is very easy to use, we use the "name=" prefix 

Syntax: name=name of the element

For example, I will use Instagram as our test site. Use this page https://www.instagram.com/?hl=en  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. You have to select the id='username' as shown below.

Learn Automation testing

We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.instagram.com/?hl=en"); 
 // Click on the search text box and send value 
 driver.findElement(By.name("username")).sendKeys("Modetechstuff"); 
 } 
}

Locating  By Class Name

The most common way of locating elements is by ID because every element has a different id.

Syntax: className=className of the element

For example, I will use Facebook as our test site. Use this page https://www.facebook.com/  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. You have to select the className='inputtext login_form_input_box' as shown below.


                     Learn Automation testing

We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".


import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.facebook.com/"); 
 // Click on the search text box and send value 
 driver.findElement(By.className("inputtext login_form_input_box")).sendKeys("Modetechstuff"); 
 } 
}

Locating  By Tag Name

Locate a particular web element using its Tag Name.

Syntax: tagName=tagName of the element

For example, I will use Instagram as our test site. Use this page https://www.instagram.com/?hl=en  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. You have to select the tagName='input' as shown below.

Learn Automation testing

We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.instagram.com/?hl=en"); 
 // Click on the search text box and send value 
 driver.findElement(By.tagName("input")).sendKeys("Modetechstuff"); 
 } 
}
Locating  By Link Text

The Link Text locator applies only to hyperlink texts. By selecting "link=" and then followed by the hyperlink text.

Syntax: linkText=linkText of the element
For example, I will use Instagram as our test site. Use this page https://www.instagram.com/?hl=en  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. You have to select the linkText='Forgot password?' as shown below.

Learn Automation testing


We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.instagram.com/?hl=en"); 
 // Click on the search text box and send value 
 driver.findElement(By.linktext("Forgot password?")).sendKeys("Modetechstuff"); 
 } 
}


Locating  By CSS

CSS means Cascading Style Sheets. It is a programming language that is used to define the appearance and formatting of a record written in a markup language. 

Locating web elements under CSS includes the application of CSS Selector which distinguishes an element based on the sequence of HTML tag, id, class, and attributes. We can locate the element with the help of CSS in the following manner:

  1. Tag and ID
  2. Tag and Class
  3. Tag and Attribute

Tag and ID

We will use Facebook's Email text box in this case, it has an ID of "email,". we will use a CSS Selector. I will use Facebook as our test site. Use this page https://www.facebook.com/  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. You have to select the cssSelector='input#email' as shown below.
 

                       Learn Automation testing

We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".


import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.facebook.com/"); 
 // Click on the search text box and send value 
 driver.findElement(By.cssSelector("input#email")).sendKeys("Modetechstuff"); 
 } 
}

Tag and Class


We will use Facebook's Email text box in this case, it has an ID of "email,". we will use a CSS Selector. I will use Facebook as our test site. Use this page https://www.facebook.com/  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open.
 

                       Learn Automation testing

We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".


import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.facebook.com/"); 
 // Click on the search text box and send value 
 driver.findElement(By.cssSelector("input#inputtext login_form_input_box")).sendKeys("Modetechstuff"); 
 } 
}

Tag and Attribute

We will use Facebook's Email text box in this case, it has an ID of "email,". we will use a CSS Selector. I will use Facebook as our test site. Use this page https://www.facebook.com/  for testing. Inspect the "Email or Phone" text box by clicking the right click on the text box and select inspect element after that a pop-up window will open. 
 
Learn Automation testing

We need to write the code which will click on the Text box, type the desired values on the text box and click on the submit button.

Here is the sample code to click on the Text box and type values as "Modtechstuff".


import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class first { 
 public static void main(String[] args) { 
 // declaration and instantiation of objects/variables 
 System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
 WebDriver driver=new ChromeDriver(); 
// Launch website 
 driver.navigate().to("https://www.facebook.com/"); 
 // Click on the search text box and send value 
 driver.findElement(By.cssSelector("input[name=firstname]")).sendKeys("Modetechstuff"); 
 } 
}


Wrap-UP


I hope this article has helped to focus on how to use locators to inspect the element on the web page.
Please let us know your feedback and also share your experiences and for any query send me a message here. I will ready to help(In FREE).


Author:: HAROON

For more details please visit  MODTECHSTUFF

FOLLOW ME @

      


Comments

Post a Comment

Donate Us to Keep this site Alive! With PayPal

Popular posts from this blog

Top 5 Automation Testing Tools[2020]

Hello Everyone! Welcome back to another Fresh article of MODTECHST UFF where you Learn Automation testing. In this article, we will talk about Updated Top 5 Automation Testing Tools[2020] that will surely help you out. Quality at speed is the need of great importance in the product development industry. This is the reason associations are hoping to embrace Agile, Continuous Integration (CD), and DevOps techniques to discover arrangements. Test automation is a basic part of these techniques that can empower associations to give quality at speed.  In straightforward terms, automation testing is a procedure of automated test case execution and the creation of test results with no human intercession. It extensively brings down the expense and exertion that is in any case required in manual testing. It limits the possibility of mistakes by limiting excess manual work.  To execute automation testing, associations require the help of a decent automation testing organization...
15 comments
Read more

How to Automate OTP using Appium and Selenium Framework ?

Hello Everyone! Welcome back to another Fresh article of MODTECHST UFF where you Learn Automation testing. In this article, we will talk about Integrating the OTP SMS reading capability with your Selenium - Appium Framework that will surely help you out. There can be three solutions to this problem. Solution 1: Ask your development team to fix the OTP check process to any static value. Solution 2: Ask your development team to provide you an API in which you can pass some parameter in response he can return you the OTP sent against that number.  Solution 3: Design two Appium scripts one is two handle Websites and one is to handle the Android message box, so after sending OTP from the web execute the second script to read a message from the message box. OTP is a 2-factor authentication mechanism that was build to avoid ROBOT / Automation SO you never find the solution direct solution for that. What is Appium? Appium is an open-source structure that permits you to lead automating test...
1 comment
Read more

Write data from Excel file and Capture ScreenShot Using Selenium WebDriver

File Read and Write is a basic piece of any product or software process. We as often as possible make a document, open it, and update something or erase it in our Computers. The same is the situation with Selenium Automation. We need a procedure to control records with Selenium.  Java gives us various classes to File Manipulation with Selenium. In this article, we will figure out how might we Read Data on Excel documents with the assistance of the Java and Apache POI library. Do check my Latest video on Open Source Behavior-Driven Development (BDD) Tools and Subscribe my Channel for Latest Updates!!! Here is the link:::  https://youtu.be/t7EwU8LWfr0 Installing JAVA in your System. TestNG requires Java which means you should download and install Java on your system. In my previous blog, I have shown how to install JAVA on your computer in detail. Here is the link   https://modtechstuff.blogspot.com/2020/05/how-to-start-automation-using-selenium.html Eclipse Insta...
5 comments
Read more

Ad

Enter your email address:

Delivered by FeedBurner