Untitled Document
Chapter - 5 - Locating GUI Elements

Our webpage contains different elements like - Forms, Text , Links , Image, Radio button, check boxes etc.We need to locate these elements inorder to perform some operations like clicking on submit button , Sending text in text areas , selecting check boxes etc.Lets try to locate these elements using webdriver classes .

To locate the GUI / Web Elements we use findElement(By.locator()) class . There are various methods available for locating GUI elements , lets see the methods one by one .
1. Find The WebElement by id

This is the most common method of finding the web element . Each web element has an unique id on the webpage and we can pass this id to locator class.Lets try to locate the text area of the gmail login page . Here is the sample code for it . If you don't know HTML tags No worries web browser has special keys which will help us to find the web elements Click Here to Learn More

In the Below code we are trying to locate the username text area of the Gmail Login page and then we will send the values to the text area . To locate the webelement we have used the below selenium class

To locate the web element use mybrowser.findElement(By.id(""))

Now to send the values ( Keys ) inside the text area we have to use below method

To send the keys inside text area use .sendkeys("")

Now combine the above two methods and run the below code . It will open new browser window -> Navigate to Gmail Login Page -> Then it will send the keys ( username) inside the username text area.

package MySelenium;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class GmailLogin {

	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");
		WebDriver mybrowser= new ChromeDriver();
		
		mybrowser.get("https://www.google.com/gmail/");
		
		// maximize the window 
		
		mybrowser.manage().window().maximize();
			
		mybrowser.findElement(By.id("Email")).sendKeys("mangeshmpande1987@gmail.com");
  }
}
2. Find The WebElement by Class Name

The Below sample code prints the Banner of the Gmail Login page , where we have identified the web element by class name . Run the sample code and it will print the Banner Title on Eclipse console .

To find the web element by classname mybrowser.findElement(By.className(""))

Now to get the text of the web element we have used below method along with findElement

To get the text use method - .getText("")

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Test {

	static String Banner;
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");
		WebDriver mybrowser= new ChromeDriver();
		
		mybrowser.get("https://www.google.com/gmail/");
		
		// maximize the window 
		
		mybrowser.manage().window().maximize();
		
		 Banner = mybrowser.findElement(By.className("banner")).getText();
		 System.out.println(Banner);
	}
} 
    
3. Find The WebElement by Link Text

On web pages we find there are some text which has hyperlinks and if we click on it then it redirects us to some other page or page contet .Inorder to get those hyperlinks we have to use Link Text method . Lets run the below sampe code which opens managdaku web page and then it locates the Info Link text and click on it .

To find the web element by link Text mybrowser.findElement(By.linkText(""))

To click on the hypelink use the below mthod with LinkText

To Click on HyperLink .click()

Sample Code

  package MySelenium;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class LinkText {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
WebDriver mybrowser= new ChromeDriver();
		
		mybrowser.get("https://www.mangadaku.com");
		mybrowser.findElement(By.linkText("Info")).click();
	}

}
  
4. Find The WebElement by Name

This method is similar to finding an element by id . Instead of using id we will use the name of the web element. Lets run the same gmail login page program which we have used in finding elements by id .

To find a web elemnt by name use mybrowser.findElement(By.name(""))

Lets run the below sample code which find the web element by name

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class FindElementByName {


		public static void main(String[] args) {
			// TODO Auto-generated method stub
			System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
	WebDriver mybrowser= new ChromeDriver();
			
			mybrowser.get("https://www.google.com/gmail/");

			mybrowser.findElement(By.name("Email")).sendKeys("mangeshmpande1987@gmail.com");
			mybrowser.findElement(By.name("signIn")).click();
	}

}

  
5. Find The WebElement by Class Name

This method is similar to finding an element by id and name. In HTML tags we have different class names assigned with it .To locate the elements we can use this class name. Lets run the below eample program which fetches the text inside the class.IN below sample we are fetching the Mangdaku webapge header line from page-header class . On successful execution you should get the header line in Eclipse console

To find a web elemnt by class name use mybrowser.findElement(By.className(""))

Sample Code :

 package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class FindElementByclassName {
 static String Text;
	public static void main(String[] args) {
		

				// TODO Auto-generated method stub
System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
	WebDriver mybrowser= new ChromeDriver();
			
			mybrowser.get("https://www.mangadaku.com");
	        Text = mybrowser.findElement(By.className("page-header")).getText();
			System.out.println(Text);
	}

}

  
6. Find The WebElement by Tag Name

The HTML web page has different tags like <div> ,<p>, <td>. <,tr>, <table>, <form> etc. To locate these tags webdriver provides the method of finding the webelement insdie this tag . Lets run the below sample code where we are trying to get the contents from the nav bar inside <ul> tag .

To find a web elemnt by tag name use mybrowser.findElement(By.tagName(""))

 package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class FindElementByclassName {
 static String Text;
	public static void main(String[] args) {
		

				// TODO Auto-generated method stub
	System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
	WebDriver mybrowser= new ChromeDriver();
			
			mybrowser.get("https://www.mangadaku.com");
Text = mybrowser.findElement(By.tagName("ul")).getText();
			System.out.println(Text);
	}

}

 
7. Find The WebElement by Pratial Text

This method is similar to Link Text method , in Link text method we used to give Complete Text of Hyperlink like Click Here so now instead of complete text give partial text Click and selenium will pick the rest .

To find a web elemnt by tag name use mybrowser.findElement(By.partialLinkText(""))

8. Find The WebElement by CSS Selector

To find a web elemnt by tag name use mybrowser.findElement(By.cssSelector(""))

Command Function
<webdriver_name>.get("url"); will open the URL in browser
<webdriver_name>.manage().window().maximize(); Will maximize the window size of browser
<webdriver_name>.findElementById(" "); Will search the web element by id ( e.g text area , check box etc)
<webdriver_name>.findElement(By.id(" ")); same as above
<webdriver_name>.findElementById(" ").sendKeys(" "); will send the keys or values to the text area on web page
<webdriver_name>.findElement(By.id(" ")).click(); will click on the web element (e.g submit button , search button etc)
<webdriver_name>.quit(" "); will quit your browser session

Summary -

Lets summarise the topics that we have learnt so far -

  • we have open the firefoxbrowser using and passed the url to it using .get("url");
  • Then we have maximize the browser window .manage().window().maximize();
  • We have searched the word selenium in search bar of webapge using .findElementById(" ").sendKeys(" "); and clicked search button .findElement(By.id(" ")).click();
  • We have logged in to your gmail accound by finding the username and password text area and sent the values to it using .findElementById(" ").sendKeys(" ");
  • We have clicked on submit button using - .findElement(By.id(" ")).click();
  • and finally quit the browser session using - .quit(" ");

So far we have opened the webapges in firefox browser , Selenium by deafult has property to open webpages in firefox , if we want to open the webpages in chrome or IE we need to install the set up in selenium . In our next chapter we will see how to configure chrome and IE browsers and we will open same webpages on these browsers .

Untitled Document