Selenium-IDE & JavaScript: Abstracting Out Locators

One of the disadvantages of using Selenium-IDE to record HTML tests is that one winds up with a lot of repetitive, hard-to-maintain code. However, the generated code can be cleaned up in a variety of ways to increase its maintainability. One of these clean-up methods is abstracting out the locators to a JavaScript extensions file.

Let’s look at a trivial example: three recorded tests, each a negative test of Yahoo’s login page.

no-password
open /
type username stumbleuponqualityassurance
type passwd
click .save
verifyText //div[@class=’yregertxt’] Please enter your password
no-userid
open /
type username
type passwd correctpassword
click .save
verifyText //div[@class=’yregertxt’] Please verify your Yahoo! ID
wrong-password
open /
type username stumbleuponqualityassurance
type passwd wrongpassword
clickAndWait .save
verifyText //div[@class=’yregertxt’] regexp:Please try again using your full Yahoo! ID..*

What’s wrong with these tests? They were easy to create, they run correctly, and they do what they’re supposed to–test scenarios in which the Yahoo! user makes mistakes attempting to login. What’s wrong is that the four locators – username, passwd, .save, and //div[@class=’yregertxt’] – are all repeated in each test. What if the source of the login page changes so that a different locator is needed for one of the fields? The test developer will have to change all three tests to use the new locator. What if there are thirty tests that use that locator instead of three?!?

One solution is to abstract out the locators to a JavaScript extensions file, such as locators.js:

var yLoginLocators = {
username : "username",
password :"passwd",
signin : ".save",
errormsg : "//div[@class='yregertxt']"
};

In the tiny code fragment above, a record named yLoginLocators is declared, with four fields, one easy-to-remember identifier per locator. The value of each field is the actual locator. This locators.js file, like all JavaScript extension files, needs to be installed in Selenium-IDE via Options=>Options=>Selenium Core Extensions; then Selenium-IDE must be restarted. Once this has been done, the “okay” tests above can be revised to use the four field names instead of the actual locators, thusly:

no-password
open /
type javascript{yLoginLocators.username} stumbleuponqualityassurance
type javascript{yLoginLocators.password}
click javascript{yLoginLocators.signin}
verifyText javascript{yLoginLocators.errormsg} Please enter your password
no-userid
open /
type javascript{yLoginLocators.username}
type javascript{yLoginLocators.password} correctpassword
click javascript{yLoginLocators.signin}
verifyText javascript{yLoginLocators.errormsg} Please verify your Yahoo! ID
wrong-password
open /
type javascript{yLoginLocators.username} stumbleuponqualityassurance
type javascript{yLoginLocators.password} wrongpassword
clickAndWait javascript{yLoginLocators.signin}
verifyText javascript{yLoginLocators.errormsg} regexp:Please try again using your full Yahoo! ID..*

Voilà! With this scheme, whether there are 3 or 30 tests that use these four locators, the test developer will only have one location in which to modify them–locators.js.

Advertisements

About Mary Ann May-Pumphrey

I'm a software QA automation engineer, focusing primarily on Selenium/Webdriver automation of the front end of web apps. View all posts by Mary Ann May-Pumphrey

3 responses to “Selenium-IDE & JavaScript: Abstracting Out Locators

  • Pawan

    I guess only one .js file could be installed with IDE.

    • Mary Ann May-Pumphrey

      No, Selenium IDE can have multiple .js (extensions) files installed. The Options=>Options=>Selenium Core extensions field has a “Browse” button to the right of it that will build a comma-separated list of extension files.

      However, the -userExtensions option for the Selenium RC server only takes one extensions file AND it must be named user-extensions.js. This means that one has to “glue” together (end-to-end) the multiple extensions files a Selenium IDE test suite might need in order to run that same suite with the Selenium RC server and -userExtensions.

      Yes, this is a pain, but not unworkable.

  • Luke

    What about when you need to export these files into jUnit?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: