Web Testing with Selenium Webdriver Part 1: Start with basic tests

The beginning of our journey | Photo by Jeremy Bishop on Unsplash

Websites, online platforms, and connected services rule almost everything around us nowadays. While a huge amount of development effort has gone into all of them, it’s easy to forget that an equal, if not bigger amount of testing has also been poured into these things.

That’s why I’ve decided to start a series of practical web testing articles, powered by Selenium Webdriver, one of the most popular and versatile frameworks designed for testing out web sites.

Why Selenium?

Simply put: versatility, popularity, and flexibility.

Selenium, more specifically Selenium Webdriver, is capable of handling many different situations and is constantly getting updated with new tricks. Some of you may have interacted with the framework through the wonky but still decent Selenium IDE extension that was made for Firefox. It allowed for basic recording and replay of actions you performed on a website.

The Webdriver, however, is a powerful and flexible library that can be used through different programming languages to perform all sorts of actions, checks, and tests on any online service.

For this series, I will be using Selenium with the Java programming language and the TestNG library, which will make our efforts easier and more organized. I will tackle, in the future, using Selenium with JavaScript, in order to help those not familiar with the old Java ecosystem. My IDE of choice is IntelliJ Idea.

As such, make sure you have installed on your machine: a Java Development Kit (JDK 1.8 preferably), Maven, and IntelliJ Idea.

Setting things up

I’ve already made an article about getting started with Selenium:

How to Set Up Selenium WebDriver in Eclipse with External JAR Files or Maven

In brief, and for those using IntelliJ Idea: the simplest way to get started is to start a new project and, in the New Project window, choose Maven, check the Create from archetype box, and then Next. Fill in your chosen GroupId and ArtifactId, then hit Next to complete the process.

You should then see your new pom.xml file. This, for those unfamiliar with Maven, contains all your project’s dependencies, settings, and much more. We then have to add the Selenium and TestNG dependencies, just like in the example below.

Once Maven and IntelliJ update the dependencies and download the necessary things, everything should be good to go.

Creating an Utils class

To make things easier for us, we can create an utilities class that will be used to simply instantiate a WebDriver object that actually contains our chosen browser. In this case, I’m using the ChromeDriver, for which I’ve put the .exe file in the root of my project.

I first set my system property to point to the executable, I create the static driver variable of type WebDriver and point it towards the new ChromeDriver object .

I also set the implicit wait of this browser. Basically, an implicit wait means that, if a command cannot be executed, Selenium will keep retrying for the specified amount of time until it throws an exception. If a link has not appear on the site, due to loading time or some other thing, it will keep checking for 10 seconds, in my case, before saying that it cannot find it.

Finally, I navigate to the main page of my portfolio and then return the driver object, so that it can be used by other classes in my project.

Creating a main class with tests

Once we have a class that produces our driver, it’s time to actually use it for testing. To achieve this, create a new class, in my case called Portfolio.

I have populated it with two methods that use TestNG-specific annotations, to complete my setup and teardown processes, which starts and closes the browser before every test method. This avoids having to constantly do this in every test. Also make note that I have imported the driver object from Utils as a static element.

Then, I’ve starting writing some of my tests, in the form of methods marked by the @Test annotation.

Some of the test case I used include: accessing the correct page, getting the correct functionality, and being able to navigate away from a project page back to the main portfolio.

These cases were all tested by me by hand every time I made an update to my portfolio. It’s no use to make great things if they don’t work when you showcase theme or visitors have can’t navigate to or away from them.

The steps of the first test are straightforward:

• The driver object, which controls the instance of the Chrome browser instantiated back in the Utils class, is already loaded at the beginning of a test to the portfolio page, thanks to the setup method that is marked to run before any test method.
• I then call on the driver object the findElement method, supplied by Selenium. This allows us to find elements on a web page through different ways, such as supplying the CSS id or class, the full or partial link text, and other things. For my case, I have used it to identify my intended div using the absolute Xpath. I will talk about these ways of identifying web elements in a future article.
• I click the identified element by using the aptly named click() method.
• Finally, I make an Assertion, which is basically a check between what I expected and what happened. In my case, I check that the title of the newly loaded page is equal to the intended one. For this, I use an Assert object, supplied by TestNG, and the assertEquals method. To get the title, I run the getTitle method on the driver object. If the two things are equal, the assertion returns true and the test passes. If not, it returns false and fails the test. In this case, TestNG also shows you what the actual content was versus what you expected, to help debugging.

For the second test, I have explored a negative, to ensure that the correct page is accessed and not one with a random title. It is not necessary, but it does showcase the assertNotEquals method, which can also be called on an Assertion and basically acts like the opposite, returning true when the expected, thus passing the test, and actual are different, and false, thus failing the test, when they are equal.

For the third test, I check to see that visitors of the page can use their browser’s Back button to return to the main portfolio page. To do this, I call the navigate method and then the back method on the driver object. Then, I assert that the title of the page is the same as the actual portfolio.

Running the tests

You have multiple ways of running the tests from the file above. You can:

• Right-click on any Test annotation and choose to Run the method.
• Click on the green play button in IntelliJ, right next to the line number of any test, and choose to Run the method.
• Right-click on the name of the whole class and choose to Run it, thereby running all the test methods inside it.
• Use an .XML suite, specifying the things you want to run, such as one or more methods, classes, packages, or groups.

You will then see the Run process in the bottom of the IntelliJ IDE, depicting the steps it’s going through and, with any luck, the actual Chrome instance starting and performing the test steps you have specified.

In summary

The article above focuses mostly on setup and contains a brief demonstration of things Selenium can do. Stay tuned for some more advanced examples and, if you are feeling adventurous, you can check out the GitHub repository with my current tests.