From Brittle XPath to CSS-selector

Use of xPath has taught me something valuable.... it is brittle!

So, with WebDriver, there are a few better ways to getting to certain elements or texts on a page:

Following our example site, on the this page we want to return a certain text.
"Etsy is more than a marketplace"

Here is a way to take your xPath and turn it into a more programmatic approach.

xpath on its own

//p[@class = 'quiet loud" and contains (text(), Etsy is more than a marketplace")]

By.cssSelector and Java or Groovy

findElement(By.cssSelector("p.quiet").getText().equals("Etsy is more than a marketplace")

One of the ways of finding the cssSelector in the page is with firebug, when you click on the element that you are trying to target a panel on the top of firebug will display the cssSelector.

Xpath - relatives

Recently I wanted to use Xpath to verify two objects in the page exist. Without having to write a few lines of code, not saying that might be a better idea but for the sake of learning new tricks with Xpath here is how we verify two elements with a parent-child or ancestor-child relationship.

Two objects:

 1) vlad's shop
 2) PayPal and Credit Cards

Because the two elements we are looking for have different relationships in the node we have to use "AxisName" (ancestor\parent\child).

This xpath verifies that we are on "Vlad's Page" and the page contains the credit cards accepted image.

//img[@alt='PayPal and Credit Cards']/ancestor::* //a[contains(@href,"top_trail")]

Using Firebug to help solve xpath issues for Selenium 2.0

Of course, we should be avoiding xpath where we can, but here is what I have learned about Firebug while trying to click on tricky button is Selenium.

Firebug is a very useful tool when using Selenium 2.0 to click on elements on the page. We can use the similar example as we used in the previous post for Etsy.com, where we found the element of the "Sell" link and used xpath to click on it in Selenium 2.0.

Before we explore the world of Firebug and locating elements. What is an element?
Here is a great example from w3Schools.

Firebug on FireFox is yet another add-on that can easily be installed by going to Tool > Add-ons. Once you have installed it and restarted your browser you will see the Firebug icon on the bottom left corner. Click it.

Firefox will be split in two one will be the site that we are on (Etsy) and the other will be Firebug. We will get the element for the "Sell" link.

To do this click on the Element inspect icon on the top left corner of the Firebug window.

Then point and click on the "Sell" link on the Etsy website, and we will get this:

What does this mean to us? There is an id for an element which is the header of the page, under that header is a title which has a link "Sell on Etsy".

To click on this link using Selenium 2.0 + Groovy we will say:

findElement(By.xpath("//a[@title='Sell on Etsy']").click()

this will take us to the Sell page.

That is an example of using Firebug to find the element and then using Xpath to click on the element, how about we find an element that does not necessarily require us to use xpath?

When we want to click the search button on Etsy.com after we enter whatever that is we are looking for. Let us look for the element id for the search button so get out your Firebug and chose the inspect tool and click the search button, we will get this:

In this case we have an id for the element which lets us just go through and write our script without having to use Xpath. This is what we will say using Selenium 2.0 + Groovy:

findElement(By.id("search_submit").click() - findElement(By.xpath("//button[@id='search_submit']").click()

both of these will click the button but the first example is shorter and better since it goes right to the element using its ID - "search_submit" bypassing xpath which may change over time.

XPathChecker - a tool for Xpath newbies

XpathChecker on FireFox It is a add-on that can easily be installed by going to Tool > Add-ons. It is a great tool that I have come across to be very helpful while writing selenium tests. To show some interesting uses I will be attaching some screen shots of how I can utilize XpathChecker in Firefox to find elements on Etsy.com. If we want to test the 'Sell Page' on Etsy.com, we would want to go to the home page and Click the 'Sell' Link but that link does not have an element id.

Right Click in the Firefox browser select xpathChecker The Xpath Window will pop open where we will look to find the 'Sell' button and give a path something like this: //a[@title='Sell on Etsy']

That was a the basics of a tool that can take you a long way when looking for elements! There are quite a few different ways to find elements on a given webpage the tool that I use is FireBug. Which I will be talking about in the next post.

My Story

I am an experienced manual tester, with good knowledge of the tools used for automation traditionally (Quick Test Pro, Test Director, etc).

At the start of the year, I was offered a position at company that would involve a move further into the world of test automation using newer tools, languages and techniques. I will talk about these in forthcoming posts.

Hopefully it is going to be a fun and informative trip told from point of view of a being a seasoned manual tester. I can report one thing already to my former colleagues and friends...

... I'm not going back!