Locating Web Elements in Selenium Webdriver PART 2

How to Locate Web Elements By Xpath?

In my last blog, we discussed about locating web elements using Id. But there was a condition, it can be done only if that particular element has Id.
So, we need some other ways like xpath/css selectors to locate the elements.

We already discussed about using Firebug to get the html text and there we found the Id of that particular Element.

Here is the same piece of html code.

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

Here we can write xpath like: “//input[@id='Email']”

So, the code will look like below.

driver.findElement(By.xpath("//input[@id='Email']"));

So, this is the manual way to write xpath. But there are several ways to get xpath as well.

Steps to Find Xpath:

Step 1: Install Firepath, which is an Add-on for firefox browser.

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

Step 3: Launch Firebug, go to Firepath tab and start inspecting elements.

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

Step 5: In Firepath, we can see the xpath for that particular field.

See the screen shot below.

Here we found xpath as “//*[@id='Email']”

* Note: Exclude the beginning dot(.) while copying the xpath.

Now our piece of code will look like below.

driver.findElement(By.xpath("//[@id='Email']"));

Here the xpath we found is partial xpath where as the earlier one what we have written manually is full xpath.

Another way of getting xpath: Through Firebug when we inspect element, we can get the html code.There we can right click and copy the xpath as well.

See the screen shot below.

So, now we can use our earlier xpath which we wrote manually above OR copied through Firebug OR found though Firepath .

Some times the generated xpath may not work, there we need to manually modify that. Also in some cases, if the locator is not detectable, then we can record the xpath from Selenium IDE (Firefox plugin) and put that in our code.

Steps to find Xpath using Selenium IDE:

1. Open Selenium IDE (Its a Firefox Plugin to record the scenario and run those testcases)

2. Enter the base URL (Say “https://gmail.com”)
3. Click on Record button and start browsing in firefox browser. (Open Gmail sign in page, Enter data in email field)
4. Now the same is recorded and viewed in IDE.
5. Select that row and go to the target drop-down.
6. In the target drop-down, we can see the id/xpath/css selectors etc. of that particular element.

See the screen shot below.

Now lets see the code to Enter Email/Password and click submit button in Gmail using xpath.

Public static void main(String[] args) {

WebDriver driver = new FirefoxDriver();

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

driver.findElement(By.xpath("//[@id='Email']")).sendKeys("Testuser");

driver.findElement(By.xpath("//[@id='Passwd']")).sendKeys("Testpassword");

driver.findElement(By.xpath("//[@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 'Xpath'.
Then though 'sendKeys', we entered values to Email/password fields and clicked on “SignIn” button. After that closed the browser.

In next blog, we will see for cssSelector and other locators as well.