Advanced Selenium IDE usage tutorial

May 25, 2013  |  Automation, QA, Selenium

As a followup to our last post, Selenium IDE Tutorial, we’re going to explore how to create some advanced tests utilizing the IDE. We currently have a test where we go to Google and search for SeleniumHQ. After we search for SeleniumHQ,  we verify that the query for SeleniumHQ is still present in the search field. Let’s modify our test case so that we can verify that ANY query will have the same result. That is to say, regardless of what we search, the query should still be in the search text field. To do this, we’re going to use the popular programming language JavaScript to help us add some custom functionality as well as some Selenium IDE commands that we haven’t come across yet.

Instead of making a brand new test, let’s modify the one we made from the previous example. (The following screenshot actually has 1 extra step where we click the search button. See if you can figure out how to do it!)

SeleniumIDEcompleteTest2

We need to be able to search for any term, not just SeleniumHQ. Let’s break down what we need to modify in order to make this test robust.

  1. We need some way to store this new query.
  2. We need some way to create this new query.
  3. We need some way to retrieve this new query.

In our case, our new query is going to be something that is different every time we run this test. Let’s tackle our problems one by one.

Storing a new query

To store a new query, we actually need to use a new Selenium IDE command. This command is called ‘store’ and it works a little differently then the other commands that we’ve used so far.

First, let’s add the store command to our test case. To do this, right-click the open command to bring up the context menu and click Insert New Command. A new blank command should appear above the open command. Now click the blank command and in the ‘Command’ argument field under the test case table, type store (it should auto suggest the store command as you type so you can also click that). In the value field, let’s type the word ‘query’. This tells the ‘store’ command that we’re going to name a variable (a variable is a container for data) searchQuery. We need this later when we retrieve the query.

Creating a new query

Now that we have a command to store a variable, we’re need to create the searchQuery. We do this using JavaScript. JavaScript is one of the most popular web programming it is and it’s immensely helpful as a QA Engineer to be familiar with it. We’re going to get our first taste on why it’s useful for a QA Engineer to understand and know JavaScript right now.

In the ‘store’ command in the IDE, we’re need to actually create the value to store. So in the ‘Target’ text field, we’re going to type the following:

javascript{“Test” + Math.floor(Math.random() * 100);}

SeleniumIDEJavaScript

 

What this tells Selenium IDE is run this following bit of JavaScript code and store it in the searchQuery variable.

Our JavaScript snippet creates a random phrase which is composed of the word Test and a random number from 0-99. If we wanted to search for something different, we’re have to change the JavaScript code (feel free to do so! This is just a simple example of how we can use JavaScript in Selenium IDE).

Now our ‘store’ command will create a query and store it inside the searchQuery variable.

Retrieving the new query

This where we edit our old test command. To retrieve the value, all we need to do is wrap the searchQuery value in between two brackets with a dollar sign in front, like this: ${searchQuery}. This tells the Selenium IDE to use the value of whatever searchQuery ends up being. Let’s modify our ‘type’ and ‘verifyValue’ commands to accept this. Delete the current SeleniumHQ value and replace it with ${searchQuery}.

 

SeleniumIDEretrievevalue

 

We’re all done! Now, run the test by clicking Play entire test suite and it should pass as before (unless Google is broken!). Run it again and again and again, and each time, the searchQuery will be different!

Congratulations, we’ve taken a very specific and simple automated test and added a lot of functionality to it. Now, we can be sure that any term will still pass and not just a single term like SeleniumHQ, which is a stronger test case then we had previously. I encourage you to experiment with other commands in the Selenium IDE to start off your automated testing journey, especially if you’re currently in QA and are only doing manual testing. Not only will you improve your productivity, but you’ll improve your testing skills and breadth of knowledge.

If you’d like to learn more about JavaScript, there are many resources on the web available. One of my favorites is Eloquent JavaScript if you want to learn more about the language itself. It’s definitely a very valuable and desirable skill set to know and understand JavaScript if you’re working on the web.

In our next installment, we’re going to show how we can use even more features of the Selenium IDE to build WebDriver tests. We will also build our first WebDriver test and learn the differences between Selenium IDE and Selenium WebDriver using first hand experience.