Essential Tools for Writing Selenium Tests – FireBug & FirePath

In our previous blog posts we have talked a lot about getting Selenium itself installed and looked at some of the other external dependencies that we need for our automation testing. However, we have yet to write any meaningful tests beyond opening a web page and checking that the title is correct. That is going to change very soon, but before we move on there are a couple more (closely related) tools that we need to get our hands on. Both of them are extensions to the Firefox browser called ‘FireBug‘ and ‘FirePath‘.

FireBug is a tool that allows us to easily look up the HTML / CSS of any element on a webpage. Why is this important? Well when we are writing our Selenium tests, we will constantly be interacting with elements on the page. In order to do this interaction, we need to give Selenium some code that tells it where that element is. For example, say that we have a login button on our webpage, and we want to click that button. In order for Selenium to perform the click, it needs to know how to find the login button. In the upcoming posts, we are going to look at a variety of ways that we can find any element on the webpage.

As for FirePath, this tool is actually an extension for FireBug! What it does is adds an extension to FireBug that will generate CSS selectors and XPath expressions automatically for us. If you don’t know what CSS selectors or XPath expressions are at this stage, fear not, as it will become clear over the course of the next few posts. FirePath will be of particular benefit to you if you don’t know much or anything about CSS selectors / XPath.

Let’s go ahead and grab FireBug. Head on over to the FireBug downloads page (here) and download the latest stable release (at the time of writing, 2.0.7):

blogpost2_1

Go ahead and click on ‘Download’ and then click the green ‘Add to Firefox’ button:

blogpost2_2

Follow all of the on-screen instructions as normal, and FireBug should be installed on your system. To verify that it is working, you should see an icon such as the one in the screenshot at the top right corner of your Firefox browser:

blogpost2_3

Before we go on, let’s go ahead and install FirePath as well. Navigate to the FirePath downloads page (here) and again click ‘Add to Firefox’. Follow the instructions on-screen once again, and you should have FirePath installed:

blogpost2_4

We should now have everything that we need installed, so let’s try it out. Go ahead and open a new private Firefox browser window (to open a private window, right click on the Firefox icon in the Taskbar and choose ‘New Private Window’). The reason for using a private window is so that you don’t have any existing session or login data for any of the sites that you are visiting to automate – I find this is a good practice to get into. Go ahead and navigate to Facebook (https://www.facebook.com/). Once the browser has loaded the page, click on the Firebug icon in the top right corner of the browser. The firebug window should appear as below:

blogpost2_5

For this initial demonstration we are going to keep things very simple. All that we want to do in our Selenium test is click on the ‘Log in’ button in the top right corner:

blogpost2_6

To do that, we need to find the HTML code on the webpage that refers to that element. To do that, first click on the ‘Firepath’ tab. Also make sure that ‘CSS: (X)‘ is selected from the dropdown menu:

blogpost2_65
Next click on the ‘Inspect’ button in Firebug:

blogpost2_7

Now hover the cursor over the ‘Log in’ button, you should see a blue border appear around the button. When you click on the button, you should see the following appear in FireBug:

blogpost2_8

FireBug and FirePath have found the HTML code for the login button on the page. The element has an ID of ‘loginButton’. The CSS selector for this is ‘#loginButton‘, as shown in FirePath. We will explore CSS selectors in more detail later, but the ‘#’ in a CSS selector stands for the ID. Now that we know the ID of the button, we can write a simple Selenium test that will open the Facebook page and click on the login button.

Back in Intellij, right click on your ‘test > java’ folder and click ‘New > Java Class’. Call the class ‘FacebookTest’ and click OK:

blogpost2_9

Add the following code to the new class:

public class FacebookTest {

    public static FirefoxDriver driver;

    @BeforeClass
    public static void setupDriver()
    {
        driver = new FirefoxDriver();
    }

    @Test
    public void clickLoginButtonOnFacebook()
    {
        driver.get("https://www.facebook.com/");

        WebElement loginButton = driver.findElement(By.id("loginbutton"));

        loginButton.click();
    }

    @AfterClass
    public static void quitDriver()
    {
        driver.quit();
    }

Go ahead and run the test. You should see a Firefox browser open and Facebook should load in the browser. Selenium will click on the Login button, and the browser will close. There are only two new bits of code here, let’s look at the first bit:

WebElement loginButton = driver.findElement(By.id("loginbutton"));

This line of code creates a new WebElement object called ‘loginButton’. That webelement is assigned to the login button on the Facebook page by calling the ‘findElement’ method of the driver button. We then pass in the method ‘By’ and call the ‘id’ method for ‘By’. Finally we add the actual ID of the login button, which is just the string ‘loginbutton’. Now for the second new line:

loginButton.click();

This line simply takes the loginButton webelement, and calls the ‘click()’ method on it, which performs a click on the Facebook button.
You should have a rough idea of what the code above is doing, even if you don’t yet understand it completely. Keep pushing on and practicing, and I promise that in time all of this will become second nature to you.

To recap this post, we learnt how to use Firebug to find the HTML code for elements on the webpage and then wrote a very simply test to show how we can interact with that element. We are making good progress in our journey, but the example in this post has a major problem… can you guess what it is?

Imagine that we are on a slow or unreliable connection, and the Facebook page is taking a while to load (perhaps this even happened to you in this exercise!). You might find that Selenium tries to click on the ‘Login’ button before it has even rendered on the page, which would throw an error in the test (even though the application didn’t actually do anything wrong). Failures such as this in our automation testing are a disaster for us. Because the failure is with the automation test, rather than the application itself, it is an indication to others that the automation tests cannot be trusted and dangerous assumptions are made that any failures are as a result of bad automation tests rather than actual problems in the application itself. As an automation tester, it is very important to avoid these failures as much as possible, and we are going to learn in future posts exactly how to do that.

Another problem with this test is that after Selenium clicked on the Login button, nothing happened and the test finished as passed. We didn’t actually check what happened on the next page after we clicked Login. Did a new page load? Was there an error? We need to add some sort of check here to look for the expected behaviour, called an ‘assertion’. Whether or not this assertion passes or fails is how we determine whether the test passes or not. We will explore how to do that as well in future posts.

But that is all for another day! Let’s end on an upbeat note. If at the start of this post you didn’t know much about FireBug or how to look up elements on a webpage, then you should have learnt a ton from this post! You now have an idea of how you can actually interact with the pages you are automating, and you are starting to add genuinely useful knowledge to your automation testing skillset.

  • Pingback: Using Assertions in your Selenium Tests | James Willett - Technical Testing()

  • Pingback: Testing Bits – 5/31/15 – 6/6/15 | Testing Curator Blog()

  • Pawel

    Hi James,

    Firstly let me say, fantastic tutorials. Material is clearly explained and very useful.

    The below is just in case someone experiences a similar issue. I had gone through the above tutorial using IE, hence I had to use additional code to point at the IE web driver and introduce flakiness to bypass the enable protected mode issue, but the main problem that I encountered was NoSuchElementException thrown when trying to find a loginbutton id. I’d spent good few hours reading articles, watching YouTube videos and browsing forums in order to find a solution. I was trying different things such as using CSS/XPath instead of Id, introducing explicit and implicit waits to wait for a button to render and even trying different versions of IEWebDriver, just to find out that I had to run IntelliJ in the admin mode in order to solve the issue.

    Regards.