Organizing Java Integration Tests

In this post, I'll be switching gears from discussing automated tests with Webdriver to discussing integration tests that are included as part of an application's back-end Java code. 

In my new Software Engineer in Test position, I have been writing integration tests to test every API call we have.  This means that I have dozens of test classes, and over a thousand possible individual tests.  Today I'm sharing with you the strategy I came up with for organizing the tests. 

I sorted out the tests into four test types: 

Resource Tests:  these are the "Happy Path" tests- the tests where you expect things to work correctly.  Examples include:  POST requests with valid parameters, GET requests where the correct object is returned,  PUT requests where the new parameters are valid , and DELETE requests where the correct object is deleted.

Security Tests:  this is where I put all the tests that should fail because the user is not logged in.  For every method that is tested in the Resource Tests, there should be a similar test where the method is called, but the user is not logged in.

Validation Tests:  this is where I put all the tests that should fail because a value being sent is invalid.  Examples include: sending an null value where a value is required, sending an empty value where a value is required, sending a value with invalid characters (such as letters in a numeric field), and sending a value with too many or too few characters.  It's important to include tests for both Create and Update requests. 

Conflict Tests:  this is where I put tests that should fail because the request has been incorrectly formed.  Examples include: 
any POST, GET, PUT, or DELETE request where the required id is null
any POST, GET, PUT, or DELETE request where the required id is non-existent
any POST request where an id of the object about to be created is included
any PUT request where the id in the request does not match the id of the existing object

I created a package for each of these test types.  Then for each domain object, I created four test classes: one for each package.  For example, our code has a domain object called Phone.  Here are the test classes I created:

PhoneResourceTest- verifies that it is possible to add, get, edit, and delete a phone number

PhoneSecurityTest- verifies that it is not possible to add, get, edit, or delete a phone number if the user is not logged in

PhoneValidationTest- verifies that the phone number being added or edited is in a valid format (ten digits, no letters, etc.)

PhoneConflictTest- verifies that it is not possible to add or edit a phone number if the id of the associated contact is missing or incorrect, that it is not possible to add a phone number if there is a phone number id in the request, that it is not possible to edit a phone number if the phone number id in the request does not match the id of the phone number being edited, etc.

I hope this post will help you think about how to best organize your own integration tests!

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.