Finding an Element With Webdriver: Part III

Today we will tackle the most difficult ways to find an element: by css and xpath.  These are the most difficult because it's so easy to miss a slash or a period in the description.  They are also the most difficult because they are so brittle- every time a developer makes a change to the webpage structure, the navigation path will change and your findElement command will no longer work.

However, finding an Element by css or xpath is often very needed, because developers often don't take the time to give their elements easy and unique ids or names.  I would recommend using these strategies as a last resort to find the element you need, and I would try css first before resorting to xpath.

First, let's find an element with css.  Take a look at the table that was described in the last blog post:

<table border="2">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

Let's say you want to find the td element that is in the first column of the second row.  The html doesn't give you much to work with.  You can't just do a findElement by tagName, because there are four different elements with the td tag name.  CSS selectors give you a way to navigate to the precise element you want.

In this example, we first want to select the correct row.  We can do this using the nth-of-type descriptor.  Nth-of-type finds a child element where there are more than one child elements in a parent.  In this case, the parent element is the table, and the child element is the row (the tr).  Because the second row is the second tr type in the table, we can describe this second row as tr:nth-of-type(2).
Next, we'll want to find the first td element in that row.  Because it is the first td element in the row, we can just refer to it as td.  (If we needed the second element, we could describe it as td:nth-of-type(2).)

Now we'll put these two descriptions together:
findElement(By.css("tr:nth-of-type(2) td"));

This instruction tells Webdriver to first find a tr element that is the second tr child of its parent, and then within that element, to look for the first td element.

Another way to use css is to find classes.  Let's say for example that the row we are looking for has this in it: class="rowwewant".  We can find classes with css by using a period:
findElement(By.css(".rowwewant td");

This instruction tells Webdriver to first find the element with the class name "rowwewant" and then within that element, to look for the first td element.

Now let's find the same element with xpath.  In order to find the element, we will need to traverse through the DOM to get there.  First we will find the table, then find the second row, then find the first td element:

findElement(By.xpath("//table/tr[2]/td[1]");

First the table will be located, then the second row within the table, then the first td element within the row.

The two slashes at the beginning of the xpath indicate that is a relative xpath- the element will be found near the test's current location.  If this is not effective, an xpath can be created from the root element (see the previous blog for the html for the entire webpage):

findElement(By.xpath("/html/table/tr[2]/td[1]");

There are many more ways that findElement by css or xpath can be used, but hopefully this will provide a jumping-off point for finding elements that can't be found by easier means.

Understanding the DOM

In order to find and use web elements using By.cssSelector or By.xpath, it is very helpful to understand the DOM.  The DOM (Document Object Model) is simply the interface that is used to interact with HTML and XML documents.  When a JavaScript program manipulates elements on a page, it finds them using the DOM.  If you already understand HTML, it will be very easy to understand how the DOM is organized.  Rather than explaining the differences between the DOM and HMTL source code, I'll simply direct you to this very helpful webpage:  

https://css-tricks.com/dom.  

If you have little knowledge of HTML, here's an example of how web elements are organized on a page:

<html>

<head>

<title>My Web Page</title>

</head>

<h1>My Web Page</h1>

<p>This is a paragraph</p>

<a href="http://www.google.com" >Here's a link to Google</a>

<table border="2">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</html>

If you'd like to see what this webpage would look like, you can simply copy and paste this html code into a notepad file and save it with the .html extension.  Then find the file in the folder where you've saved it and double-click on it.  It should open up as a webpage.  

Now let's take a look at the various elements on the page.  Note that each element has a beginning and ending tag.  For example, the line that says "This is a paragraph" has a <p> tag to indicate the beginning of the paragraph and a </p> tag to indicate the end of the paragraph. Similarly, the title of the page has a beginning tag: <title> and an ending tag: </title>.  

Notice that elements can be nested within each other.  Look at the <table> tag, and then find the </table> tag several lines below it.  In between the tags, you will see row tags (<tr>) and table data tags (<td>).  Everything in between the <table> and </table> tags is part of the table.  Now look at the first <tr> tag and the first </tr> tag.  Notice that there are two pairs of <td></td> tags in between. Everything between the first <tr> tag and the first </tr> tag is a row of the table.  The <td></td> pairs in the row are elements of data in the row.

Now imagine that this data is organized into tree form:

If you were going to traverse the DOM in order to get at the data in Row 1, Column 1, you'd start by finding the <table> element, then by finding the first <row> element, then you'd find the first <data> element.  This is how we will use css selectors and the xpath to find elements in the next blog post.

If you'd like to find out more about HTML and CSS, I highly recommend the w3schools website.  

Finding an Element With Webdriver: Part II

In my last post, I discussed how to find an element with Webdriver using the element id, class name, or name.  In this post, I will discuss how to find an element using link text, partial link text, or tag name.

Return to www.google.com, and look at the links on the bottom of the page.  Right-click on the link that says "Advertising" and select "Inspect Element".  You should see something like this:
<a class="_Gs" href="//www.google.com/intl/en/ads/?fg=1">Advertising</a>

The link text is what is found between the >reverse brackets<.  In this case, the link text is "Advertising".

Return to myFirstTest in Eclipse and replace the findElement command in your test with:
driver.findElement(By.linkText("Advertising")).click();

This command tells Webdriver to:
1.  Find the element with the link text "Advertising"
2.  Click on the link

If you followed the instructions in the last post, you should still have a breakpoint set in your test. If not, right-click in the left margin of the "driver.quit();" command and select "Insert Breakpoint". Then run the test by right-clicking on the test and selecting Debug As->JUnit Test.  The test should run and will stop just after it clicks on the Advertising link.  If the test has run correctly, you should now be on the Google Ads page.  Click on the green arrow to finish the test.  

Now we will find an element using a partial link text.  Return to www.google.com, right-click on the link at the bottom of the page that says "Business", and select "Inspect Element".  You should see something like this: 
<a class="_Gs" href="//www.google.com/services/?fg=1">Business</a>
The link text is "Business".  We will find this link using just a portion of the text: "ness".  

Return to myFirstTest in Eclipse and replace the findElement command in your test with:
driver.findElement(By.partialLinkText("ness")).click();

Run the test by right-clicking on the test and selecting Debug As->JUnit Test.  The test should run and will stop just after it clicks on the Business link.  If the test has run correctly, you should now be on the Google Business Solutions page.  Click on the green arrow to finish the test.  

Now we will find an element using a tag name.  Go to www.pinterest.com, right-click on the button that says "Continue with Facebook" and select "Inspect Element".  You should see something like this:
<button class="Button Module btn hasText large rounded unAuthFacebookConnect registerLoginButton unauthHomeRegisterButton multiStepRedesign" type="button">    

Note that the first word that appears after the "<" is "button".  This is the tag name of the element.

Return to myFirstTest in Eclipse and replace the String URL line with:
String URL = 'http://www.pinterest.com'
Next, replace the findElement command in your test with:
driver.findElement(By.tagName("button")).click();

This command tells Webdriver to:
1.  Find the element with the tag name "button"
2.  Click on the button

Run the test by right-clicking on the test and selecting Debug As->JUnit Test.  The test should run and will stop just after clicking on the button.  If the test has run correctly, you will see a popup prompting you to log in with Facebook.  Click on the green arrow to finish the test.

You have successfully located a web element by using an link text, a partial link text, and a tag name! Before we proceed to finding a web element by css and xpath, it is first necessary to understand the DOM.  This will be the topic of my next blog post.  

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.

Installing Webdriver

Webdriver is an API that enables testers to find and use web elements in their automated tests.  To get set up, you will need to find out what the latest version of Webdriver is.  Navigate to this link:  http://docs.seleniumhq.org/download and in the section called Selenium Client and Webdriver Language Bindings, find the Java entry and make a note of the latest client version.

Next, you will need to add this text to your project's POM file:
<dependency>
   <groupId>org.seleniumhq.selenium</groupId>
   <artifactId>selenium-java</artifactId>
   <version>2.39.0</version>  //replace the version number here with the most current version number
 </dependency>

Add the text after the JUnit dependency, so that the dependencies section now looks like this:

<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.8.1</version>
    </dependency>
    <dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>2.39.0</version>
</dependency>
  </dependencies>

In the command line, navigate to your project folder.  Then type:
clean install
This will download all of the dependencies needed to run Webdriver in your project.

Let's set up a new test using Webdriver:

1. Right-click on the myFirstTests package and select New->Class
2. Give the class a name of secondTest
3. The SecondTest class should open in the center pane, and should look like this:
package myFirstTests;
public class SecondTest {
}

4. In between the brackets, add the following:
@Test
public void test() {
}

5. Add the following to the import section:
import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

6.  In between the brackets following test(), add this code:
driver = (WebDriver) new FirefoxDriver();
String URL = "http://www.google.com";
driver.get(URL);
driver.quit();

7.  Right-click on the test name secondTest and choose Run As-> JUnit Test.  You should see a Firefox browser open, navigate to Google, and close again, and on the JUnit tab of Eclipse, you should see that the test has passed.

Congratulations!  You are now all set up to begin writing your own automated Webdriver tests!  In my next post, I will discuss the Webdriver syntax.

Understanding the POM

A POM file is necessary for any automated testing with Maven.  It can seem daunting at first, especially if you don't usually work with XML files, but it's actually very simple.  

POM stands for "Project Object Model".  It contains instructions about where to look for the source code for your tests, and what versions of JUnit, Maven, and Webdriver to use.  

Here is an example of a POM file, which should look very similar to the file you created for your First Java Project:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>MyFirstJavaProject</groupId>

  <artifactId>MyFirstJavaProject</artifactId>

  <version>0.0.1-SNAPSHOT</version>

  <build>

    <sourceDirectory>src</sourceDirectory>

    <plugins>

      <plugin>

        <artifactId>maven-compiler-plugin</artifactId>

        <version>2.3.2</version>

        <configuration>

          <source>1.7</source>

          <target>1.7</target>

        </configuration>

      </plugin>

    </plugins>

  </build>

  <dependencies>

    <dependency>

      <groupId>junit</groupId>

      <artifactId>junit</artifactId>

      <version>4.8.1</version>

    </dependency>

    <dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>2.32.0</version>

</dependency>

  </dependencies>

</project>

Let's look at the file one section at a time:  

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

</project>

This is information that describes the schema for the Maven project.  This will be automatically generated for you.

 <modelVersion>4.0.0</modelVersion>

 <groupId>MyFirstJavaProject</groupId>

 <artifactId>MyFirstJavaProject</artifactId>

 <version>0.0.1-SNAPSHOT</version>

This is required information for every POM file-

The version number of Maven

The groupId (can be any name you like)

The artifactId (should match the name of your project)

The version number of your project (can be any number you like, and it's easy to just leave it at the default of 0.0.1-SNAPSHOT)

<build>

    <sourceDirectory>src</sourceDirectory>

    <plugins>

    </plugins>

</build>

The build section defines what will be necessary to build the project-

The sourceDirectory defines where Maven should look for your source files.  If you ever have trouble with a build, check to make sure this value is correct.  In this case, the source files will be found in the src folder.

The plugins section defines what plugins are necessary in order for your tests to run.

<plugin>

        <artifactId>maven-compiler-plugin</artifactId>

        <version>2.3.2</version>

        <configuration>

          <source>1.7</source>

          <target>1.7</target>

        </configuration>

</plugin>

The plugin that is needed in this case is the Maven compiler plugin.  The compiler version is specified, and the source and target Java versions are specified.  

<dependencies>

    <dependency>

      <groupId>junit</groupId>

      <artifactId>junit</artifactId>

      <version>4.8.1</version>

    </dependency>

    <dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>2.32.0</version>

     </dependency>

  </dependencies>

Finally we need the dependencies; any extra software that the code needs in order to run properly.  In the case of this example, we need JUnit and Selenium to run our tests.  

As you become adept at test automation, you will probably run into situations where a test that ran without difficulty suddenly won't run at all.  This is often because of browser/Selenium incompatibility; for instance, a new version of Firefox may have been released, and you will need the latest version of Selenium in order for your tests to run in the new browser.  Rather than downloading and replacing files yourself, all you need to do is alter the version number of Selenium in your POM file, and the next time you do a Maven build, the project will fetch and download the new files for you!  

This is far from an exhaustive list of all the information that a POM file can contain; it is merely a brief description to help demystify what the file does and how it can be used.  For more information, see these helpful links:

http://maven.apache.org/pom.html#Build_Settings

http://maven.apache.org/guides/introduction/introduction-to-the-pom.html

  

Setting up Maven

In order to use Webdriver, you will need to have Maven installed and set up.  Fortunately, the helpful people at Apache Software have created an excellent tutorial about how to set up Maven:

http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html

It probably won't take you five minutes as advertised, but it will take you less than a day.  Don't worry too much about what you are doing as you are running these commands; once Maven is set up, we only have to think about the commands we need to run our automated tests.

Now let's return to Eclipse.  The last time we were in Eclipse we created a project called MyFirstJavaProject.  Right-click on this project and select "Configure-> Convert to Maven project".  A popup window will appear.   Click "Finish" on the window, and wait for the configuration to complete.  When it's done, you'll notice that your project icon now has a little M next to the J.  You'll also notice that you have a pom.xml file in your project folder.  We'll learn more about the POM in a future blog post.

Let's create a JUnit test.  First we'll run it from Eclipse, then we'll run it from the command line using Maven.

1. Right-click on the MyFirstJavaProject and select New->Source Folder
2. Give the new folder a name of src/test/java (click the "Update exclusion filters" checkbox if needed)
3 Right-click on the new folder and select New->Package
4. Give the package a name of myFirstTests
5. Now right-click on the myFirstTests package and select New->Class
6. Give the class a name of FirstTest
7. The FirstTest class should open in the center pane, and should look like this:
package myFirstTests;
public class FirstTest {
}
8. In between the brackets, add the following:
@Test
public void test() {
int x = 2;
int y = 3;
int total = x+y;
assertEquals(total, 5);
}
9. Right-click on the Project name (MyFirstJavaProject) and choose Build Path->Add Libraries
10. Select JUnit
11. Choose JUnit 4 and click Finish
12. Look again at the lines of code you added to the FirstTest class.  There will be two lightbulb icons on the left side of the code.
13. Right-click on the one next to "@Test" and choose Add JUnit4 to Build Path
14. Right-click on the one next to "assertEquals(total,5)" and choose Import org.junit.Assert;
15. Now near the top of the page, you will see
import static org.junit.Assert.*;
import org.junit.Test;
16. Save your changes by clicking on the disk icon in the toolbar
17. Right-click on the FirstTest.java file in the left pane, and choose Run As-> JUnit Test
18. Your test should run, and a new tab named JUnit should appear in the left pane
19. Click on the left tab and notice that the window displays what test has been run, and that there is a green bar across the pane indicating that the test has passed

Now let's try running the test from the command line. First we'll need to make a change to the pom.xml file:

1. Double-click on the pom.xml file to open it in the center pane
2. Click the tab at the bottom of the pane that says pom.xml
3. You should now be viewing the file in xml format
4. Add this text to the xml file, right underneath </build>:
<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.8.1</version>
    </dependency>
  </dependencies>
5. Save your changes
6. Now open the command window
7. Change directories until you are in your project folder (MyFirstJavaProject)
8. Run this command:
mvn clean test
9. Your project should build, your test should run from the command line, and you should be notified that the build is successful

Congratulations!  You have run your first test from Maven!