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..