Finding an Element With Webdriver- Part I

The most useful method of Webdriver is the findElement() method.  It can also be the most frustrating:  you can see the element you want on your webpage, but it's often difficult to figure out how to tell Webdriver to find it!

There are many different ways to find an element with findElement():

By.id
By.className
By.name
By.linkText
By.partialLinkText
By.tagName
By.cssSelector
By.xpath

I will include examples of these in this blog entry, and in the two entries following.  But first you need to know how to inspect an element in order to make the best choice about which By method to use.  Go to www.google.com, right-click in the search text field, and choose "Inspect Element".  A new window will open up at the bottom of the screen, and you will see the element highlighted:

<input id="lst-ib" class="gsfi" type="text" value="" autocomplete="off" name="q" style="border: medium none; padding: 0px; margin: 0px; height: auto…; width: 100%; background: url('" dir="ltr" spellcheck="false"></input>

Look at the id attribute:  id = "lst-ib".  This is what we will use for our first findElement() exercise.
(Note that the id for this element changes periodically.  Substitute whatever you see listed as the element id in the steps below.)

Return to myFirstTest in Eclipse and add the following text below the driver.get(URL) command:
driver.findElement(By.id("lst-ib")).sendKeys("Hello World");

This command tells Webdriver to:
1.  Find the element with the id "lst-ib"
2.  Type "Hello World" into the element

You will also need to add the following to the import section of your test:
import org.openqa.selenium.By;

Insert a breakpoint into your test so that you can see if the commands were executed correctly.  To do this, right-click in the left margin of the "driver.quit();" command and select "Insert Breakpoint".  Then to run the test, right-click on the test, and select Debug As->JUnit Test.  The test should run and will stop just after it has typed "Hello World" into the text field.  If this is what you see, then you have used findElement() correctly!  Click on the green arrow at the top of the screen to finish the test.

We now have an example of findElement(By.id()).  Now let's try By.className.  Look back at the html that describes the text field.  You should see the class attribute:  class="gsfi".  (Note that the class name for this element changes periodically.  Substitute whatever you see listed as the class in the steps below.)Let's change our test to find the element by className.  Replace the findElement command in your test with:
driver.findElement(By.className("gsfi")).sendKeys("Hello World");

Run the test in debug mode again, and you should again see that "Hello World" has been typed into the text field.  The result is the same, but this time the element was located by the class name instead of by the id! Click on the green arrow to finish the test.

Finally, let's try to find the element by its name.  Look at the html again and see the attribute name="q". Replace the findElement command in your test with:
driver.findElement(By.name("q")).sendKeys("Hello World");

Run the test in debug mode again, and you should see that once again, "Hello World" has been typed into the text field.  Click on the green arrow to finish the test.

You have successfully located a web element by using an id, a class name, and a name!  The next blog entry will discuss finding elements by link text, partial link text, and tag name.