Ionrock Dot Org

My Weblog

Testing if an Element Has a Class in Selenium

In Selenium tests tend to get brittle very quickly. This is a function of testing something like the DOM that is effectively like machine code for the browser. What happens is changing the DOM to support some new feature written in Javascript almost always radically changes the tests. These changes typically have two aspects.

1. Changing the locators needed to find different elements
2. Changing the verify/assert statements to test a new attribute, style, value or element

Changing locators is almost a given and while you can minimize the changes by selecting as close to the necessary element as possible and through using unique identifiers (either IDs or classes have worked for me), it is always something of a struggle. Likewise, changing the tests to effectively reflect what changed can be difficult as well, since the change might be as simple as adding or removing a new class.

All that in mind, I always wished there was a simple way to test whether an element as a class. For example, if you had a div that needed an image as the background, testing for something like a 'button-bg' class or something similar seems really helpful. It seemed simple enough to implement, so I went about creating a 'assertElementHasClass' function.

First off, Selenium supports adding new functionality via user-extensions.js. This is just a file that will be included and in turn made available in your tests. My first cut at getting the required functionality was to have a helper function and eval the result. This was easy enough, but somewhat undesireable since it effectively masked what was being tested. That said it was a really easy way to get started.

The "correct" way to add your own functionality is to add a prototype to the Selenium object. There are a few guidelines listed in an example user-extensions.js, so I'd suggest taking a close look at that. It can also be somewhat helpful to check out the selenium-api.js which is where all the typical selenese commands are.

In the end here is what I came up with:

Selenium.prototype.assertElementHasClass = function (locator, cls) {     var element = this.page().findElement(locator);     var cls_name = element.className;     var clses = cls_name.split(' ');     var actual = false;     for (var i=0; i < clses.length; i++) {         if (clses[i] == cls) {             actual = true;         }     }     var expected = true;     return actual == expected; };

One thing to note is that the assert functions want you to return either true or false. Other examples I looked at used an Assert.match function for comparisons. I'm not really sure what the difference is at this point, but as I couldnt' get the Assert.match to work, it seems safe to avoid it.

Hope this helps someone!