Locating Web Elements in Selenium Webdriver PART 1

How to locate elements in Selenium Webdriver ?

Locating elements is very important part in webdriver as while coding in most of the places we need to use locators to find elements and that can be anything like a text field, text area, button, link, image etc.

Basically while we need to perform some action, we need to locate that element first.

There are various ways of locating elements. We can locate element by id, xpath, cssSelector, Name, Link etc.. In my last blog, I had written one line of code.

driver.findElement(By.id("q")).sendKeys("Webdriver");

Here we can see, I have located the element through id.

Lets take a look at below screen shot. Here we can see, in Eclipse window, while writing code, after 'By', when we put dot(.) and wait, it will show all the locators available there.

Now we will see, how actually we will locate elements. Lets starts how to locate an web element by Id.

Locate elements by Id in Selenium Webdriver

First of all we need need Firebug to get installed in firefox browser. Its and Add-on.

Using firebug, we can verify whether the particular element has Id or not. Else we need to use some other element like xpath/css selector etc.

Step 1: Open the testing site in Firefox (say we have opened “https:// www.gmail.com”)

Step 2: Lauch Firebug and start inspecting elements. (Fire bug is a developer tool and add-on for firefox)

Step 3: Move mouse to the field/button/link for which you want to locate and click (say 'Email' field)

Step 4: It will show the html view, there we can see the id for that particular element.

See the screen shot below.

Here the highlighted html code is:

<input id="Email" class="" type="email" spellcheck="false" value="" placeholder="Email" name="Email">

Here we can see the id is “Email”
Now in Eclipse IDE, we can write code to find this Email field. And the code will look like below.

driver.findElement(By.id("Email"));
In the same way we can find other elements like 'Password'/ 'Submit' button etc. for this Gmail sign in page.

In chrome/IE browser also, we can directly open developer tool(Shortcut Key: F12) and follow the same process to identify and locate web elements.

Let see a piece of code to Enter Email/Password and click submit button in Gmail.

public static void main(String[] args) {

     WebDriver driver = new FirefoxDriver();

     driver.get("https://www.gmail.com/");

     driver.findElement(By.id("Email")).sendKeys("Testuser");

     driver.findElement(By.id("Passwd")).sendKeys("Testpassword");    

     driver.findElement(By.id("signIn")).click();
     driver.close();

     driver.quit(); 

 }

In the above code, we opened Gmail sign in page in Firefox browser.
Then located the Email/Password fields through locator 'Id'.
Then though 'sendKeys', we entered values to Email/password fields and clicked on “SignIn” button. After that closed the browser.

In next blogs, we will see how to locate element using xpath, css Selector etc..

Get Started with Selenium Webdriver Using Java

What is Selenium Webdriver ?

Selenium is a browser automation tool, which automate the control of a browser so that repetitive tasks can be automated.

The earlier versions of Selenium were Selenium Core & Selenium RC etc. and there were some limitations. So, Webdriver came into action and replaced both of them. Those earlier versions were using selenium server for running the test where as Selenium WebDriver do not require selenium server for running test.

So, basically Webdriver in Selenium is an Interface, which is designed to accurately simulate the way that a user will interact with a web application.
Selenium Webdriver supports most of the browsers to run your test cases and many programming languages like C#, Java, Python, Ruby, .Net, Perl, PHP, etc.. Selenium Webdriver is also know as Selenium 2.0. And to go ahead with this Selenium Webdriver, we need to have decent knowledge on any of the mentioned languages above. Lets see this with Java.

For learning java(Core Java/ Java Basics), you can refer to these sites mentioned below. You may find some other sites as well from google.

http://javabeginnerstutorial.com/core-java/
http://www.tutorialspoint.com/java/

http://www.studytonight.com/java/

How to configure Selenium webdriver ?

1. Download and install Java.
   
2. Download Eclipse and extract to a folder, no need to install. To open Eclipse, click the 'eclipse.exe' file only. Eclipse is an IDE to write java code and run.
   
3. Download Webdriver Jar files as shown in below screen shot. The client version may change as per time and release date, use the latest file.
   
   
   
   
   
   
   
   
   
   
   
   
   
4. The downloaded file will be in Zip format, extract and save those.
   
5. Now Start Eclipse, double click on 'eclipse.exe' file to open. Then select one Workspace folder( Create one folder in a drive and select that).

6. Now Create new java project from File > New > Project > Java Project and enter a Name there.
   It can also be done in different way. File > New > Java Project and then enter a Name for Project(say 'Webdriver_First_Project'). Click finish to create that project and same will be appeared on the screen.

7. After creating project, it will look like below.
   
   
   

8. Now Create Package.
   Right click on project 'Webdriver_First_Project' > New > Package . Say Package we gave is 'Test'. After creating package, it will look like below.
   
9. Now Create Class.
   Right click on package 'Test' > New > Class. Say class name is 'FirstWebdriverProgram'.
   Also you can check the check box 'public static void main(String[] args)', so on clicking finish, it will show the Main function in default. After creating, it will look like below.
   
   
10. In step 3, you have downloaded the jar file and in steps 4, you have saved those files. Now we will be adding those to build path.
    
    Right click on project 'Webdriver_First_Project' > Select Properties > Select Java Build Path > Libraries Tab > Click On Add External Libraries button .
    Now choose those two jar files present on the folder 'selenium-2.43.0'
    
    Again click on 'Add External Libraries' button and select jar field from folder 'selenium-2.43.0/libs'.
    
    *Note: Build path can be added in other way also.

Right click on project 'Webdriver_First_Project' > Build Path > Configure Build Path > Click On Add External Libraries button

Now all required jar files are added and can be seen under 'Referenced Libraries' folder.

                                     

Now we are ready to write our first program.

Simple java code to browse a website, type and click a button.

package Test;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.firefox.FirefoxDriver;

public class FirstWebdriverProgram {

public static void main(String[] args) {

WebDriver driver = new FirefoxDriver(); // Here we initialize the Firefox driver

driver.get("http://www.seleniumhq.org/"); // Here It will open page in Firefox browser

driver.findElement(By.id("q")).sendKeys("Webdriver"); // Here it will find the search field and enter  the  phrase  'Webdriver'

driver.findElement(By.id("submit")).click(); // Here after entering the text, it will click Go button.

driver.close(); // It will close the current window

driver.quit(); // It will quit the driver and close all associated windows

}

}

In this above code, beside each line, its work is mentioned. We will get into details further.
For now, Want to share few more things.

When you initialize the driver “ WebDriver driver = new FirefoxDriver(); ”, there you will get some error. So, there we need to mouse hover on Webdriver, it will ask to import the package. Same for FirefoxDriver.

For importing related package, we can use shortcut “Shift + Ctrl + O ”. It will import everything which is required in that java file.

Here we have used some web driver methods like get, findElement, close & Quit. Apart from these, there are so many other methods also.
While typing, after driver. , hold on for a second, it will show all methods as suggestions there.

Anyways, we will be seeing all these later on in next blogs.