Think Like a Tester: April 2015

Thursday, April 30, 2015

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>

</head>

<p>This is a paragraph</p>

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

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

Wednesday, April 29, 2015

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.