Testing is Rocket Science Not Brain Surgery

Almost all of the World's Greatest Accomplishments Were The Result of Great Planning!

Testing is Rocket Science Not Brain Surgery header image 2

Getting Started with Selenium Part Two by Bobby Washington

April 10th, 2012 · 1 Comment · Functional Test Automation

In part one of this two part series we focused on creating a test script via the Selenium IDE and the Selenese commands that I find myself regularly using.  In this blog I plan to speak about how to actually locate various controls on a page specifically using CSS locators.  I will also demonstrate how we can use the Firefox add-in tool “FireBug” to assist us in this endeavor.  First and foremost I believe most Selenium users would agree that the ability to locate webpage elements/objects is a concept and skill that one must have a firm grasp of in order to be successful in any automation effort.  Most of your mainstream automation tools provide some record/playback feature.  However,  it has been firmly established that this approach, while valuable in the right context, does not produce scripts that are flexible or dynamic and as a result do not provide the longevity necessary for the ROI to be realized.  I liken the understanding and practice of object location to the concept and practice of correlation to a LoadRunner user.  As many LoadRunner users will tell you, the understanding and application of correlation is absolutely essential to successful script development and the same holds true for object location to a Selenium user.

So what exactly is object location?  My personal definition is that it is “The ability to programmatically select/locate an object or element with the goal of applying some action and or modification to it.”  Typical actions performed against objects on a webpage consist of:

–          Clicking a link, button, or image

–          Typing a value in a text box

–          Selecting an option from a drop-down box

These are essentially the types of actions that are routinely performed when interacting with a web-page.  In addition, many test automation tools provide intuitive commands or methods that represent these types of actions.  For example:

btnObject = Button.new

btnObject.click

txtBox = Input.new

txtBox.type(“Text to type”)

However, the question that you will quickly ask yourself is: How do I programmatically tell my script which button should be clicked or in which text box the value should be typed?  Without some mechanism for object selection/identification your script cannot determine where to apply these actions or modifications.  Using our examples above, incorporating a mechanism for object selection/identification could possibly yield:

btnObject = Button.new

btnObject.click(“css=Submitbtn”)

txtBox = Input.new

txtBox.type(“css=username”, “Text to type”)

Selenium, being the great tool that it is, offers many different mechanisms for locating an object

Element/object id

Element/object name

Xpath

Hyperlink via link text

DOM

CSS

and javascript in rare occasions

As you can see there are many location strategies available in Selenium.  However, the reason I chose CSS is because well…it is the recommended approach by the Selenium community.  It has been determined that CSS locators are a much more consistent and efficient approach for element location.  Take a look at this blog posted by SauceLabs for additional information.  I will say from my personal experience, I too have found that the CSS locators are much more consistent when locating objects than Xpath.  While every browser can chose not to adhere to the recommendations proposed by the W3C group, this seems to be more apparent with Xpath than CSS.  Now that we have a better understanding of object location/identification, why it is essential for script development, and the various location strategies provided by Selenium, let’s get started with some real world examples.

At this point you should have both the Selenium IDE and the Firebug Firefox add-ins installed.  I will also assume you are now familiar with recording actions via the Selenium IDE.  The first thing we need is a site to practice against.  I can think of no better site than the testrocket.org site.  Let’s record the simple action of typing a value into the “search” box.  Your Selenium IDE should match the screen shot below:

Figure 1

As expected, the Selenium IDE captured our typed value.  What is even cooler is the fact that if you notice, the Target value is actually a drop-down menu.  Let’s see what happens when we view these options:

Figure 2

We can see that not only did Selenium record our text entry, but it also captured the various selectors available to locate our search text box object.  As a side note the default selector used by Selenium is simply an element’s “id”.  Since our focus is on CSS selectors and Selenium was so gracious as to provide this to us let’s just select the “css=#s” selector from the drop-down.   Now let’s pause for a minute.  According to the W3C group’s recommendation for CSS locators, the syntax for selecting an object/element via its id is simply the pound/number sign (#) and the id value.  Ex: #myidvalue.  In addition to this syntactical rule, all css locations used in Selenium must begin with “css=”.  This, as you might have guessed, helps Selenium distinguish which locator strategy is being used.  Once you have selected the css locator I would like to call you attention to the Find button.  This is a fantastic feature because it allows you to test out your selectors.  To demonstrate what I’m talking about click the Find button several times.  What you will notice is that a yellow border will surround the text box indicating that the object/element has been located by the selector you defined.  Now this approach is fine, but as you become more experienced you may find it rather tedious to specify your locators by first recording the step and then selecting it from the Target drop-down box.  This is especially true in cases where Selenium is unable to provide the css locator for you.  This is where you can use the Firebug Firefox add-in.  This powerful add-in allows you to inspect an element to view its surrounding HTML.  There is also a console that allows you test your css selectors as well!  With that said, I believe it is time for another demo.  Let’s launch the Firebug add-in tool.

Once Firebug is up and running click the inspect button,   and click within the [Select Category] drop-down box.  The HTML surrounding this particular element should be displayed in the Firebug window as shown below:

Figure 3

Now if you want to locate this element using the CSS locators with “id” pattern matching we need to locate the actual id value for context element.  In our example the id value is “cat”.  Now that we have identified the id value associated with our object/element let’s construct the CSS locator and test it.  From the Firebug add-in, click the [Console] tab.

Figure 4

Locate the console command-line.  The command line prompt is “>>>”.  According to the Firebug command line api wiki, the syntax for specifying CSS selectors is $$(selector).  As previously stated, the W3C group CSS recommendation syntax for CSS id pattern matching is pound/number sign (#) and the id value.  Let’s combine these syntactical rules to construct and test our CSS locator.  At the Firebug command prompt, “>>>”, let’s type the following:

$$(“#cat”)

Note the quotes surrounding the CSS selector #cat are necessary for proper formatting and processing.  Now all that is left is to press the [Enter] key to execute this command.  If your CSS selector is properly formatted and the element exists, then an array of all elements that match your selector should be returned.   According to the W3C recommendation for HTML document structure, the id value should be unique.  So if the command returns more than one value you may need to modify your selector approach to ensure you explicitly locate the correct element/object.  Again this will give you greater confidence that your CSS selector actually locates your context element before you write a line of code.

Figure 5

Now all that is left is to add this CSS selector to you automation script.  So if we want to select the “Performance Testing” category our script may look something like this:

selenium.Open(“/Blog/”);

selenium.Select(“css=#cat“, “label=regexp:Performance Testing\\s+\\(12\\)”);

selenium.WaitForPageToLoad(“30000”);

There you have it, with some practice you will be well on your way using CSS selectors for element identification/location.  In this blog the primary focus is on the CSS location strategy specifically using object id pattern matching.  This is by far the most common approach that I use personally.  There are many other ways to construct more powerful pattern matches with CSS detailed in the W3C CSS Selector recommendation.  You may even need to combine these selectors with some sort of parameterization in the unlikely event you have dynamic values to contend with…This sounds like a future blog.  So if you are working on a new project and test automation will be used, get in early with the development group and have a conversation about how they can build “hooks” into their code to aid in an automation effort.  What I hope you see is that object location/identification is absolutely essential when developing robust test automation.  The great thing is that once you understand this concept, it will carry over into other test automation tools. You can also use it as part of your evaluation of other testing tools your organization may consider.

 

Tags: ········

One Comment so far ↓

  • Ellen

    I think this is one of the most significant information for me.
    And i’m glad reading your article. But want to remark on some general things,
    The website style is ideal, the articles is really excellent : D.
    Good job, cheers

Leave a Comment