Selenium for Manual Testers

SELENIUM

FOR MANUAL TESTERS

Leonard Aye

Copyright © 2011- Leonard Aye

Table of Contents

PrefaceIntroduction

Application UI ElementsStatic UI elementsDynamic UI elementsNavigation elementsSummary

Site structureWhat’s behind the façade?

UI Element IdentificationID LocatorName LocatorLink locatorXPath Locator

What do we expect the automation tool to be able to do?Getting Started with Selenium IDE

InstallationSelenese commandsCapturing a scriptSetting up a test suiteDoing more with IDE

Using Parametrisation to improve usability and maintainabilityTriggering Selenese tests from command line

Limitations of IDEUse of explicit UI elementsEmbedding of test data in the scriptSequential execution

Part IISelenium RC

Setting up the PC for Selenium RCPart IIIAppendix

Programming BasicsObject-Oriented Programming BasicsAdditional Resources

Copyright © 2011- Leonard Aye

PrefaceThis article is aimed at all the seasoned manual testers who have gained a wealth of experience in software testing, accumulated over many years of working in the IT field and who are now feeling a little sidelined because of the recent strategic move by the companies and corporations towards Agile development and subsequently the increased reliance on Automated Testing. I myself was in that very same position, and for the last few years I always felt intimidated having to learn about test automation and it didn’t help by the fact that every 6 months or so someone would claim a new and fancy test automation framework or a new automation testing tool or automation tool programming language, each one supposedly better than the rest. In the end, I realised that it’s not the technical challenges that I have to overcome to be proficient in automation, rather partly it’s the lack of confidence in my own ability to learn something new and partly because test automation means having to learn to code again and partly because it means having to change the way I’ve always worked in the past. Being a tester for over 15 years and have met many like-minded people across various industries, I know that we all have similar trepidations of moving onto test automation and I hope that this article will not only guide you step by step in learning Selenium, but would encourage you to take up automation using Selenium, and come to regard it as one more device in your arsenal of tools to help, rather than hinder, your career and progress of being the best tester that you know you can be. There are many online resources, blogs and a few books available on learning and using Selenium, as well as forums and communities to share and exchange information on all things related to Selenium. The very fact that there are tons of information out there is one reason why I initially found learning Selenium intimidating, because there is an overload of information for you to filter and sieve through. There is already a very good book written by Alan Richardson and is available for purchase either as an e-book or the old-fashioned paper version from Amazon. Unlike this book and others, my aim here is not to dive right through into the details of Selenium, leading you from the front and you following the examples as best you can. My aim is to hold your hands as you make your through Selenium and answers questions that you may have along the way. So, what I’m doing is taking what’s available out there, and along with my own personal experience, present the information in a way that I myself would liked to be explained in an easily understandable and digestible form, for someone coming in cold from manual testing background. It goes without saying, of course, that learning Selenium means having to learn HTML and basic coding and I will be using Java as the primary programming language, but I will assume the reader has no prior knowledge of Java but would have an appreciation of an object-oriented programming language and their main concepts. Ultimately, any tool that you decide to use in aid in your testing must release you from the monotony of having to run the same tests over and over again, but it must also assist you in presenting the outcome of the tests in a timely manner. Tests may be automated and run whenever you wish but if generating the results is going to take you half a day each time then you’re not getting the full benefit of test automation.

Copyright © 2011- Leonard Aye

IntroductionThe section deals not with the Selenium tool itself but what the target application that we wish to use Selenium for. Selenium was designed for a very specific kind of testing, i.e. it was designed for testing of web-based application and nothing else. For this reason, we need to have a very good understanding of what it is that we are trying to test with the tool. In other words, what is a web application and what are the types of actions that a typical user might want to interact with the application via the web user interface (UI), and only then would we be able to fully appreciate how Selenium has been developed to drive these user actions and how to test the application through its web interface. What follows are 3 important aspects of a web application that one should be aware of:

● UI Elements● Site Structure● Code behind the application.

Application UI ElementsSo, let’s take a look at what we expect to see in a typical web application1? A web application may contain some or all of the following UI elements and I’ve grouped them into three categories for clarity:

● Static elements ● Dynamic elements, and● Navigation elements.

Static UI elementsThese are elements which do not change whilst the application is being used. However, they may and do change if the Developers decide to change the code (either in the next build or next release), but they are static in the sense that you know in advance that whilst you are running your scripts, the elements will remain the same during the time the tests are being run. Some of the common static elements are:

● Branding logo● Page header● Page footer● Textual links● Image links● Navigation buttons/links● Navigation pane● OK, Accept, Cancel, Search, Go buttons● Radio buttons and labels● Check boxes ● Static lists, e.g. list of States or Counties

1I use the word web application rather than a website because we want to test a site that is more than a set of static web pages. Web application, in contrast, consists of a series of screens in which the user interact with the application, and the application in turn performs the tasks set by the user and return a set of dynamic output pulled from it’s back-end database. Common web applications include e-commerce sites such as amazon, expedia, ebay, etc., information sites such as bbc.com, cnn.com, etc., online banking sites such as lloyds.co.uk, hsbc.co.uk, etc.

Copyright © 2011- Leonard Aye

● Table with fixed no. of elements.

Dynamic UI elementsIn contrast to the above, dynamic elements, as the name suggest, are those elements on the application which could not be predicted in advance, such as:

● Page title● Text entry field● Dynamic lists (i.e. lists whose content is updated based on user’s selection on

the same web page, e.g. in autotrader.co.uk site, the list for Model of car gets automatically updated if you select a particular make of a car in the Make list.

● Date selector● Table with dynamic content, i.e. search query results, e.g. list of products based on

user selection, e.g. Show Top 50 fictional novels, All sale products under £10, etc.● Dynamically updated (such as AJAX) page content, i.e. new content which gets

displayed on a page upon but without the whole page being refreshed. ● Media content, e.g. Flash animation or video.

You may be required to test for existence and/or correctness of some or all of these elements in your application.

Figure 1 - Example of UI controls

Navigation elementsOf course, no web application exist solely in a single web page. Usually a web application is composed of many (if not tens of) HTML pages. ‘Your Account’ pages of Amazon.com is a good example of a complex set of pages providing rich features all related to managing your account on Amazon.

Copyright © 2011- Leonard Aye

So, a typical web application consists of many web pages with both static and dynamic UI elements and navigating between these pages, either by moving forward or backward, or via opening a new window and switching between the man application window and its sub-windows. Typical navigation elements that might be found in a web application are:

● Buttons, e.g. Next, Accept or Continue ● Textual links● Graphical/image links

In most cases, the navigation elements can themselves be considered as static UI elements.

SummaryTo summarise, a typical web application consists of two parts:

● Static and Dynamic UI elements which the user interacts with, and● Navigation elements providing a way for the user to progress from one state of the

application to the next.The screen below shows a typical page with some of the elements discussed above.

Example showing static and dynamic UI elements

Site structureLet’s consider a typical e-commerce web application, such as Amazon.com or Expedia.com. Sites like these usually contain public and private (member) pages, i.e. public pages are those which any user can come and use without having to register or log in, but some of the more advanced features maybe unavailable to those who are casual users of the site. Most sites require that the user creates an account and log into the site to obtain all the features provided by the site to its members, e.g. being able to save personal information

Copyright © 2011- Leonard Aye

and site usage preferences, being able to order products, viewing previous visits, tracking/cancelling/updating orders, and the site in turn can provide the user with more focused and directed experience tailored to the user’s preferences and past usage.

Figure X: Typical site structure for commercial website

Copyright © 2011- Leonard Aye

What’s behind the façade?If you’ve been a tester and you’ve tested web applications at System or UAT level, where you’ve verified that the application works according to the specification by manually interacting with the application on the browser by way of clicking or selecting items and/or entering values into the various UI elements. But, if you want to automate your manual tests by telling a program to mimic your user actions, the program needs to know how a green button or a textual link you click on, or how a particular image or a piece of text on the page is represented, so that the program is able to correctly identify the UI elements in question. Because test automation primarily involves the following two key steps:

1. being able to click on an element or select some items from an element or enter some text/values into an element

2. being able to check for the existence or absence of some other element(s). It is for this reason that you need to understand (or at least have an appreciation of) the code behind the interface, because the underlying HTML codes are what Selenium is capturing and triggering when tests are run within Selenium.

UI Element IdentificationDepending on how the application has been developed, elements on a page can be identified in several ways. In Selenium terminology, these elements are called Locators. Selenium supports the following locator types. When learning about Selenium, this is the first thing that you need to know.

identifier=id Select the element with the specified @id attribute. If no match is found, select the first element whose @name attribute is id. (This is normally the default; see below.)

id=id Select the element with the specified @id attribute.id=accept_button

name=name Select the first element with the specified @name attribute.name=username.The name may optionally be followed by one or more element-filters, separated from the name by whitespace. If the filterType is not specified, value is assumed.name=day value=friday

dom=javascriptExpression Find an element by evaluating the specified string. This allows you to traverse the HTML Document Object Model using JavaScript. Note that you must not return a value in this string; simply make it the last expression in the block.dom=document.forms['myForm'].myDropdowndom=document.images[56]dom=function foo() { return document.links[1]; }; foo();

Copyright © 2011- Leonard Aye

xpath=xpathExpression Locate an element using an XPath expression.xpath=//img[@alt='The image alt text']xpath=//table[@id='table1']//tr[4]/td[2]xpath=//a[contains(@href,'#id1')]xpath=//input[@name='name2' and @value='yes']

link=textPattern Select the link (anchor) element which contains text matching the specified pattern.link=About Us

css=cssSelectorSyntax Select the element using css selectors. Refer to CSS2 selectors, CSS3 selectors for more information. You can also check the TestCssLocators test in the selenium test suite for an example of usage, which is included in the downloaded selenium core package.

● css=a[href="#id3"]

● css=span#firstChild + span

Table 1: Selenium Locator types

To understand how they are used to identify the UI elements, let’s consider the following HTML code snippet, which is used to generate the list of radio button group:

<html> <body>

<form id="fruits"> <p>Fruits</p> <input type="radio" id="orange_button">Orange</button><br> <input type="radio" id="lime_button">Lime</button><br> <input type="radio" id="lemon_button">Lemon</button><br> <input type="radio" id="lychees_button">Lychees</button><br> <input type="radio" id="coconut_button">Coconut</button><br> <input type="radio" id="durian_button">Durian</button><br>

</form> </body></html>

ID LocatorIn the above code example, each radio button has been assigned a unique ID, so in order to select a particular radio button, it is just a case of using the id, e.g. id = “lemon_button”, will select the third button in the group.

Copyright © 2011- Leonard Aye

Name LocatorHowever, in other applications, the developers have opted no to use ID, then we need to look and see if we can use something else to identify them, and the name tag is the next option available to us. Again, take a look at the code snippet below. Here, instead of the IDs, the developer has decided to use name and value tags in the code instead.

<html> <body>

<form id="fruits"> <p>Fruits</p> <input type="radio" name="citrus" value ="orange">Orange</button><br> <input type="radio" name="citrus" value ="lime">Lime</button><br> <input type="radio" name="citrus" value ="lemon">Lemon</button><br> <input type="radio" name="tropical" value ="lychees">Lychees</button><br> <input type="radio" name="tropical" value ="coconut">Coconut</button><br> <input type="radio" name="exotic" value ="durian">Durian</button><br>

</form> </body></html>

In order to select the button representing “lemon”, can we use name =”citrus” to correctly identify it? No, because there are 3 instances of UI elements with the name having “citrus”. Therefore, we need to use and additional filter of the value parameter to quality the required desired button, e.g. name = “citrus” value = “lemon”.Note that value is NOT a locator type, so even though the contents of the value parameter are unique, e.g. “lime”, “lychees”, “coconut”, etc. it can only be used as an extension to the locator type name. But, what if you want to locate the Durian button? Since there is only one instance of exotic fruit type, then it is possible to use simply the name locator without the value filter, e.g. name=”exotic”will correctly select the Durian button in the group. At this point, we should be aware that by choosing to use only the locator, name=”exotic”, it will correctly identify the desired button in the current application...as it stands today. But what if the application has to be extended so that more variety of exotic fruits are added next week or in the next release of the software? The new code may look like this:

<html> <body> <form id="fruits"> <p>Fruits</p> <input type="radio" name="citrus" value ="orange">Orange</button><br> <input type="radio" name="citrus" value ="lime">Lime</button><br> <input type="radio" name="citrus" value ="lemon">Lemon</button><br> <input type="radio" name="tropical" value ="lychees">Lychees</button><br> <input type="radio" name="tropical" value ="coconut">Coconut</button><br> <input type="radio" name="exotic" value ="durian">Durian</button><br>

<input type="radio" name="exotic" value ="mangosteen">Mangosteen</button><br></form>

</body></html>

Copyright © 2011- Leonard Aye

When this happens, the test will fail because Selenium can no longer determine which exotic fruit you are referring to by the statement name="exotic" since there are two instances of buttons both are called exotic. So, using name and value as much as possible to uniquely identify the

Link locatorThis locator is used exclusively for locating textual links on a web page. If the web page has several navigation links, such as shown below:-

<a class="menu" href="index.html">Home</a><a class="menu" href="about.html">About ABC Ltd</a><a class="menu" href="products.html">Products</a><a class="menu" href="contact.html">Contact Us</a>

the second link can be selected by the syntax link=”About ABC Ltd”. Note, the locator is the display text itself, rather than the html link in the href tag.

XPath LocatorXPath is not specific to Selenium, but rather a standard method for navigation and selecting elements in an XML document, and since HTML is a subset of XML then the same principles of XPath can be applied to a HTML page. When there are no ids or name locator exists then XPath is the next thing to try. I will describe briefly how XPath can be used to pick out a particular element in a HTML page but the reader should go to W3 XPath Tutorial for indepth explanation and usage of this. Firstly, the key notations of XPath are described below:

XPath Meaning Usage

/ From the root node

// From the current node

* Wild card character

@ attribute within a node //fruits[@id="banana"]

Again, let’s look our example HTML code:

<html><body> <form id="fruits"> <p>Fruits</p>

<input type="radio" name="citrus" value ="orange">Orange</button><br><input type="radio" name="citrus" value ="lime">Lime</button><br><input type="radio" name="citrus" value ="lemon">Lemon</button><br><input type="radio" name="tropical" value ="lychees">Lychees</button><br><input type="radio" name="tropical" value ="coconut">Coconut</button><br><input type="radio" name="exotic" value ="durian">Durian</button><br><input type="radio" name="exotic" value ="mangosteen">Mangosteen</button><br></form>

</body></html>

Copyright © 2011- Leonard Aye

//*[@id="sb_form_q"]//*[@id="sb_form_go"]

What do we expect the automation tool to be able to do?Now that we know what elements there are on web pages, how a user might interact and navigate between these pages and how the web pages themselves are coded/developed by Developers (either manually or through the use of development tools, like Eclipse or Visual Studio) we are ready to ask the question, ‘Can I use Selenium to capture all the elements and their properties and simulate all the user interactions and behaviours, given all the idiosyncrasies that Developers might have used to code the application?’ In other words, Selenium must be able to carry out the following user interactions:

● Clicking on a link or an image or a button● Clicking on radio buttons and check boxes● Entering text into a text box● Selecting item in a list, or Date Selector● etc.

The answer, of course, is Yes it can. The next step then is to see how exactly we do that, and this leads only the tool itself.

Copyright © 2011- Leonard Aye

Getting Started with Selenium IDEFor Part I, the only thing that you need to download and install on your PC is the Selenium IDE Add-on for Firefox. The Selenium IDE (S-IDE) is not a stand-alone application but simply a plug-in for Firefox browser. This means that any tests you develop have to be run within Firefox. The most recent version of the S-IDE now supports version 4.x of Firefox. To install the S-IDE, simply go to Selenium download page (http://seleniumhq.org/download/) and click on the

Installation<more to follow>

Selenese commandsThe scripts captured in the IDE are known as Selenese commands. A Selenese commmand consists of (up to) 3 component:

● Command● Target● Value.

The following set of Selenese commands opens the search engine bing.com and enters the word ‘harry potter’ in the search field and click on the search button, waits until the results to be displayed and checks that the result page exists.

Command Target Value

open www.bing.com

type sb_form_q harry potter

clickAndWait sb_form_go

assertTitle harry potter - Bing

The Selenese commands are always presented in a table with 3 columns and they are unlike any programming language notation. Most commonly used commands in SeleniumBefore we start capturing tests with the S-IDE, let us first familiar ourselves with a few of the most commonly used commands.

Copyright © 2011- Leonard Aye

Command Description

open

click

clickAndWait

verifyTitle

verifyTextPresent

verifyElementPresent

There are around XXX different commands in Selenium

Capturing a scriptThe above script was captured using Selenium IDE, but it’s useful for us to able to understand the components of the script so we’ll be able to read it and understand the test without having to run the script. So, let’s start with the Bing.com site. The main page consists of a text entry field and a search button (as shown below).

With the above page opened, click on Tools menu and select Selenium IDE. Then return to

Copyright © 2011- Leonard Aye

bing.com and enter ‘harry potter’ into the text entry field and click on the Search button.Now, switch back to the IDE window and you will see that the S-IDE has captured the script, as seen above.

Setting up verification pointsSelenium provides two main ways of verifying an element.<assert Vs verify><more to follow>

Setting up a test suiteAim: to test a web sitePreparing a test suiteHow to output logging of results to ConsoleRunning a batch of tests

Doing more with IDE

Using Parametrisation to improve usability and maintainability

Triggering Selenese tests from command lineOne of the little known features of S-IDE is the ability to trigger Selenese tests (i.e. those

Copyright © 2011- Leonard Aye

written in HTML code) directly from a command line (and by implication by any build tool such as ant or a continuous integration server, such as Hudson/Jenkins). For this to work, the stand-alone selenium server jar file is required. This can be downloaded from here: http://seleniumhq.org/download/.

The downloaded file will have the file name, similar to this (the version number may be different): selenium-server-standalone-2.0.0.jar. The format of the command to trigger the tests is as follows:java -jar <server.jar> -htmlSuite <browser> <path_to_test_scripts> <path_to_test_results>. Assume that we have downloaded the jar to c:\selenium folder and the test script my_tests.html are stored in c:\selenium\scripts, then in order to run the test. Then to command to start the test via command line would be:

c:\selenium>java -jar selenium-server-standalone-2.0.0.jar -htmlSuite “*firefox” “c:\selenium\scripts\my_test.html” “c:\selenium\results.html”

You will then see from the command prompt that the test has been initiated.

And subsequently, when it reaches the step ‘Launching Firefox...’ two new browser sessions will open; one containing the log of the tests (see below) and another for the application under test.

Copyright © 2011- Leonard Aye

A few things to note on this window:● The left side shows a list of tests in the test suite. The example shows 3 scripts

consisting of a login, ordering a product and a credit card payment scripts. The green colour indicator on the login_LA scripts indicate that the test has passed that particular script. The test order_product is in yellow indicating that the script is currently being executed.

● The middle part of the screen shows the actual steps within the currently running script (order_product).

● The right-hand side of the screen shows the controls (similar to that found in the S-IDE, pausing, stopping and starting the scripts) and a summary of the test so far.

Once the tests are completed, the test results can be viewed by opening the html file which we named in the command line step

Copyright © 2011- Leonard Aye

This page is very useful for reporting the results to the management

Limitations of IDEWhile the Selenium IDE is a simple and straightforward tool to use, providing a good introduction to test automation with little or no programming experience, there are limitations in the IDE which will become obvious once you starts using the tool for real . The most important restrictions or limitations being:

● embedding of test data in the script● sequential execution.

Use of explicit UI elementsIf element name or ID changes, then the tests which used that particular locator will fail and every instance of the element in every test case will require updating. Ideally, you want to be able to parameterise the element locators and use qualified names in place of the actual locators in the script.

Embedding of test data in the script

Copyright © 2011- Leonard Aye

If you want to search for 20 different words in Google, your script nceed to contain 20 repetitive scripts search words inside each of the script. This means, external data for test input could not be used with IDE. It is not possible to read an external file of search words to inject into the script.

Sequential executionIdeally, in a test script, you might want to control the flow of the test depending on the outcome of the response from the AUT, i.e. if the AUT respond in one way, you might want the test to proceed differently than if the AUT responded in another way. This calls for branching or decision making ability within the script and IDE has none. All scripts run step by step in the order captured/created. Likewise, you might want to repeat a set of test steps several times, either a fixed number of times, or repeat until some other condition in AUT becomes true. This calls for the ability to loop the same set of test steps x number of times. Again, IDE doesn’t have the capability to do this. So, how do we overcome these restriction?At this point, I’m sure you’re beginning to see that although IDE is good for running simple sequential tests, it is not suitable for large majority of the real-world test scenarios, where you need to be able to import external test data (either from CSV for Excel files) and inject these into the AUT, and the ability to perform looping and branching within the scripts. This then lead us nicely into Part II -- the Selenium RC.

Copyright © 2011- Leonard Aye

Part II

Selenium RCUnlike the IDE, using the Selenium RC is not in a single, complete package, but rather a set of services and applications all working together to offer a fully programmatic approach to test automation. The main components of the Selenium RC are:

● Remote Server● Client Server (for each language)● Selenium Core, and finally● Development environment for your chosen programming language.

In this book, we will be using Java as the programming language and to aid this task, an Open Source development environment called Eclipse will be used.

Setting up the PC for Selenium RC

Copyright © 2011- Leonard Aye

Part III

Copyright © 2011- Leonard Aye

Appendix

Programming BasicsIf you’ve never done any programming before, having to learn to write Java programming seems like a daunting task and it is. Programming is not something you can pick up in a few hours or a few days and to become proficient and it is beyond the scope of this book and my abilities to teach someone how to write programs from scratch. Instead what I will do here is to describe the key common features that all programming languages have and the principles behind these features so at least you’ll be able to read the code snippets shown in the examples and be able to understand what the code is doing and have the confidence to amend and change them to suit your own needs. First of all, we may not done any computer programming before but we all have created programs and have followed other people’s programs many times in our lives, except that we wouldn’t call it a program. But what is a program after all? A program is simply a set of instruction that tells something (or someone) how to do a particular task. If I were to ask you for a direction to your house from somewhere in the vicinity, say 20 miles away, you’d be able to tell me precisely the route to take without hesitation. Likewise, if I were to prepare a nice meal for dinner, I’d have no problem following a recipe from any of the celebrity chefs that are in vogue today. If you were to breakdown any recipe or any set of instructions you’d given to someone or someone given to you, they all boil down to just 3 different types of instructions:

● sequential steps● looping or repeating a set of steps● conditional or decision-making step.

There is nothing more and nothing less. If you look at all the programs that have been written since the time when the computers were first invented, through the last 50 years of computing to today’s programs and all programs that will ever be written in the future (well, as far as I could tell!) they all and will consist of only these 3 types. As an example, the direction to my house from my office could be described like this:From the house, turn right when the street joins the main road. Follow the road and go past 3 roundabouts and then take the first exit on the 4th roundabout and then join the motorway M3. Stay on the motorway for about 35 mins and take the exit to motoway 27...

Object-Oriented Programming BasicsIn this section, I will attempt to describe the basic ideas behind O-O programming, such as Class, Object, Methods, Inheritance and Polymorphism.

Copyright © 2011- Leonard Aye

Additional Resources LinkedIn Groups:

Copyright © 2011- Leonard Aye