If you would like to learn more about the practical side of test automation, but you are not quite sure where to start Selenium IDE might be the answer. The goal of the following post, which I've structured as a mini-tutorial, is to provide an overview of the basic functions of Selenium IDE, its possibilities and limitations.
Installation
To be able to work with Selenium IDE you will need the Firefox browser. After it is installed, you will need to download the Selenium IDE installer from:
http://seleniumhq.org/download/. When Selenium IDE is installed, it is then available as a Firefox plugin.
Test Recording
The easiest way to see what Selenium IDE provides is to use it for the purpose it was created for: to record a test.
We will execute and record a simple test: using Google we will search for
kainos.pl page and then open the page and make sure this action was successful.
We need to start Selenium IDE and then press the round red button - this will start recording of our test. Next, in the new window of the Firefox browser we go to
www.google.pl and put the phrase that we are going to look for 'kainos.pl' into the search form, and then press the Search button.
When the above steps are executed, we should see search results similar to the ones below:
Let's get back to the Selenium IDE window. You should see the actions we have just performed were saved and also 'translated' into the commands that Selenium IDE is able to understand (Selenium commands are in a language called Selenesse). The Base URL field has also been filled in automatically.
The
open command opens the
URL address specified with the
Target parameter. In this case the value of
/ means the Base URL address will be used. The
type command is then used to type the value specified with the
Value parameter into the form field specified with the
Target parameter.
More details on the particular Selenesse commands can be found under the
Reference tab of Selenium IDE.
Identifying the UI elements
While the value of the
type command's
Value parameter is rather obvious (it simply specifies the text we want to put into the input field of the searching form), the
Target parameter's value is not so obvious.
In case of the methods interacting with the web page elements (such as
type or
click), the Target parameter identifies the page's element for which the given action should be executed.
In our case we used the
id identifier to identify the page's elements. The natural question here is where this value is taken from. To be able to answer it, we will need to take a closer look into the source code of the web page. The
Inspect Element option available in the newer versions of Firefox will be extremely helpful here.
Clicking the right mouse button on the search field of the Google page, we choose the Inspect Element option. As the result, the information on the chosen element will be displayed. We will also be able to preview the source code containing the element we clicked.
The text marked with green in the above picture is the
id attribute of the form's input field that we have been looking for (the text marked with blue is the value of
class attribute). The mentioned attributes can also be found directly in the source code of the page.
Finding elements using the
id attribute value is not the only available option the Selenium IDE can handle. What is more, in case of the pages where the
id value is generated automatically and differs each time the page is loaded, this way of element identification may be insufficient.
Other popular ways of element identification are:
- name=nameAttributeValue finds the first element with the given name attribute's value (in the case of our form the Target parameter value would be name=q).
- xpath=xPathExpression locates an element using the XPath expression (in our case the XPath expression value could be xpath=//tbody/tr/td/div/input[@name='q']).
- link=textPattern selects the link (anchor) element which contains text matching the specified pattern.
Extending the test
Selenium IDE does not only allow you to record the steps you are performing during your test execution, but also lets you extend the already recorded test with additional steps in a very convenient way, using the context menu.
So far our test is executing the following steps:
- Open the Google.pl search page
- Fill in the search form input field with the kainos.pl phrase
- Click the Search button
We will now make sure that the searching results are as expected, so that the kainos.pl site is displayed within the searching results.
Right-clicking on the kainos.pl site link we will gain an access to the Selenium IDE context menu. Thanks to this menu we will be able to choose from the list of Selenium commands that are the most suitable for the element we clicked. Selenium IDE will suggest which commands are the most appropriate ones, but we still have the ability to choose from all of the other available commands using the
Show All Available Commands option, so we have a full control on what is actually put in our test.
From the list of commands suggested by Selenium IDE we choose
verifyTextPresent(...) and we add it as a subsequent step of our test. Next we run the test using the
Play Current Test Case button.
The test fails. At first glance, this may seem a bit strange especially that looking into the browser's window just after our test execution is finished we can see the link we were expecting to see is actually there. The problem here is the speed of execution of the subsequent steps of our test.
At the moment, verifying of the presence of the link we are looking for takes place before the searching results are fully loaded. Consequently the test fails because Selenium IDE is not able to find the element it is looking for. Let's then try to reduce the speed of the test execution to find out if that is going to change the test execution result. To do so let's move the speed switch into the
Slow position and then run the test again.
As you can see, changing the speed of the test execution has caused the test to pass and all the steps to be executed successfully search results were loaded before the verification step execution.
The major shortcoming of this approach is however the fact that it slows down the execution of all the steps (so it significantly increases the time needed for test execution), while we only want the test execution to be paused for a moment, just before we verify the text element presence, allowing the searching results to be fully loaded.
We will use the
pause command to achieve that. In the Selenium IDE window, right-click on the
verifyTextPresent(?��) command and then choose the
Insert New Command option. A new command will be inserted just before the command we have clicked on.
From the drop-down list of commands choose
pause. Into the
Target field put 1000 (this is the value of the delay given in milliseconds). Move the speed switch back into the Fast position and then run the test again. As you can see all the steps are executed successfully.
Another approach that allows getting the similar effect is to replace the click command with
clickAndWait or to extend the test with
waitForPageToLoad command just before the step that verifies the text element presence.
Unfortunately, in the considered case where only the part of the page is reloaded those two commands won't work. This is because the load new page event Selenium IDE is waiting for won't appear here, so
clickAndWait and
waitForPageToLoad command with fail with a timeout error.
The last stage of our test will be to go to the
kainos.pl site and assure the operation was successful. To achieve that, we will add the
click command to the test (just after the
verifyTextPresent command). As the Target parameter for
click we use:
link=Kainos | EDRM, Document Management & Records Management. If we run the test now, we will notice that after the searching is executed we are then redirected to the Kainos.pl site.
One last thing will be to add the step that verifies the newly opened page is the one we expected to see. After the
click command we add the
verifyTitle command. As a
Target parameter for this newly added command we use:
Kainos | EDRM, Document Management & Records Management (so the title of the page defined with the HTML tag title in source code of the page).
If we run the test now, it will appear the recently added step is failing. The reason for that is the same as in the previous case we considered the page didn't manage to fully load before the verification step was executed.
To resolve this problem we will replace the
click command with the previously mentioned
clickAndWait command. This will cause Selenium IDE to wait for the page to fully load (after the click command is executed) before executing any further steps.
This time the test is executed successfully. All the steps passed.
Saving the tests
Naturally, after the test is created it is good to have it saved somehow. By default, the Selenium IDE tests are saved in HTML format. The tests saved in this way can then be run again using Selenium IDE.
The previously created tests can also be exported in a form of a source code, which allows the integration with the existing test frameworks based on the popular programming languages, like Ruby, Python, C# or Java.
Summary
As you can see the first steps with test automation do not really need to be a struggle. Thanks to tools like Selenium IDE, we can start automating our tests even if we are not experts in test automation and thanks to the comprehensive and straightforward written documentation, dedicated web pages, discussion groups and Internet forums we can expand our knowledge progressively.
