Selenium Expert is Here!

I have released a new Selenium IDE Plugin – The Selenium Expert! Read about it on my new blog http://blog.reallysimplethoughts.com/.

I Have Moved to blog.reallysimplethoughts.com

I have migrated all the content to my new host. Check it out at blog.reallysimplethoughts.com. If you cannot find some of your comments, you may have to post them again. Let me know if you find something wrong.

Moving to a new place soon

WordPress.com has been a good host for my blog. I feel that I have outgrown the features provided and would soon be moving to a new place. Any more comments on this blog may get lost in the moving process. See you on the new host soon.

The Power Debugger Plugin v1.0 for Selenium IDE Released

The pause on fail tool button added to Selenium IDE

This plugin for Selenium-IDE improves debugging and troubleshooting issues with scripts. This plugin adds the pause on fail tool to the Selenium IDE toolbar. When pause on fail is turned on, Selenium IDE would pause the execution of the test case when there is an error or a command failure, allowing you to troubleshoot the problem. Get it from the Firefox addons site.

Once you install this plugin, a pause on fail tool button will be available in Selenium IDE toolbar. See the screen shot for details.

Mini user guide for the plugin

• Click on the pause on fail tool button to turn the pause on fail on.
• Click on the pause on fail tool button again to turn the pause on fail off.
• You can turn pause on fail on or off any time, including when the test is running.
• Once the test case pauses due to pause on fail, you can use the usual resume/step buttons to continue the test execution.

Known Issues

• The test case will not be paused if the failure is on the last command of any test case.

To use this plugin, you will need to install Selenium IDE extension of at least version 1.0.4 first. Only in English for now, more languages will be added on requests.

Other Thoughts

I have been really busy, was not able to release any plugins or updates on the schedule I wanted. This plugin was one of the oldest changes I made to Selenium IDE. I think it was Selenium IDE v1.0b2 at that time. This was one single change that saved me a huge amount of time. Releasing this as a plugin was tricky and I have been delaying it for several months. I am still not happy with the code, but it has been relatively stable so you can go ahead, give it a try, if things break completely, you can always uninstall it

As usual feel free to leave comments, improvements, advise, criticism, problems…

My Selenium IDE Plugins compatibility with Selenium IDE v1.0.8

Selenium IDE v1.0.8 was released on Friday last week. I have finished testing and I am happy to say that all plugins are working as expected. There is no need of any updates due to compatibility reasons. Thanks to Dave for confirming the same.

Using the Findbar in Your Firefox Add-ons – Part 3/3

Abracadabra! Close Button Gone!

This is the last post of a three part series that details my experiences with the findbar widget which is available in Firefox and also provides a bit of information on XBL and anonymous ids.

Getting Rid of the Close Button Altogether

The solution I provided in the previous post fixes the colour problem with the close button. I wanted to remove the close button altogether. As I mentioned earlier, lets take a little detour first to cover some widget internals, viz., XBL and Anonymous IDs before we make the close button disappear.

The XML Binding Language

XBL or Extensible Bindings Language or XML Bindings Language as it is sometimes called, is the secret glue that most widgets in Firefox use. As the Mozilla page about it says,

XBL is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the bound element, acquires the new behavior specified by the binding. Bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted underneath the bound element.

Basically, you can do a lot of stuff with XBL. Many widgets provided by Firefox have been implemented using XBL. The findbar widget is also implemented using XBL. So if you want to take a look at all the gory details of how the findbar widget has been created, you need to look at the underlying XBL implementation.

Get the Findbar Source Code Using Chrome URL

Another interesting thing to know is that you can view the source code residing inside Firefox using chrome URLs. Chrome URLs are URLs starting with chrome:. Firefox understands these special chrome URLs for accessing some resources that have been installed in Firefox. Take a look at the Chrome URL page on Mozilla development center for more information on these URLs. You can access the source code of the findbar widget that is inside your Firefox by accessing its chrome URL. You can open this link chrome:global/content/bindings/findbar.xml (Firefox only) and see for yourself. This will show the real code that is powering the findbar in your Firefox browser right now! I had to take a look into it to figure out how to solve the close button issue.

Sub-widgets and Javascript

Some widgets, for example, the Findbar widget are composed of other widgets. I call these internal widgets as sub-widgets. Usually you will not need to access these sub-widgets at all. Sometime, it may be necessary to do so, like in this case of hiding the close button. The first thing is to find out what is the type of these sub-widgets and what their IDs are. The way I usually do this is by looking through the XBL source code. The sub-widgets cannot be accessed by the usual means like the getElementById() function. Like normal elements can have an id, these sub-widgets do not have an id, but have another slightly different attribute known as an anonymous id called anonid. There is a function getAnonymousElementByAttribute() to get elements using their anonid. The function takes three parameters, viz., the widget you want to get the sub widgets from, the attribute name – “anonid” in our case, and the actual anonid of the sub-widget. Here is how you use it through an example of hiding the close button using Javascript.

document.getAnonymousElementByAttribute(
    document.getElementById("FindToolbar"),
    "anonid",
    "find-closebutton"
).hidden = "true";

Once I found the anonid for the close button was ‘find-closebutton’ using the XBL source code in findbar.xml. It was a simple matter of getting the close button sub-widget and using normal Javascript to hide it.

Styling Sub-widgets Using CSS

Another power method is to apply CSS rules directly to these sub-widgets. You have already seen an example in my previous post to fix the background colour of the close button. You can specify the CSS rule using the usual attribute selector with anonid as the attribute name, i.e., [anonid="PutActualAnonIdHere"]. Here is an example of how to hide the close button using this technique.

#FindToolbar *[anonid="find-closebutton"] {
 display: none !important;
}

Poof! Its gone!!!

Using the Findbar in Your Firefox Add-ons – Part 2/3

The Close Button Issue

This is the second post of a three part series that details my experiences with the findbar widget which is available in Firefox and also provides a bit of information on XBL and anonymous ids.

Controlling the Findbar Visibility

The findbar created as shown in the examples in my part 1 will initially be hidden. Though it is tempting to simply add a hidden=”false” attribute to make it visible, don’t do it. As this would appear to work on the first glance, but problems will soon surface. I discovered that the localised messages and labels did not work as expected. Using the open([mode]) method or the startFind(mode) method is required to make the findbar visible.

document.getElementById("FindToolbar").open(0);

or

document.getElementById("FindToolbar").startFind(0);

A close method is available to hide the findbar. While I suspect that setting the hidden=”true” attribute should work, I did not try using it.

document.getElementById("FindToolbar").close();

Once the findbar has been linked to a browser widget and made visible, it is ready to be used! As the users type text into the Find textbox, the search will be carried out in the linked browser widget and the buttons on the findbar will be active allowing the user to navigate through the matching occurrences of the search term. Further, some shortcut keys like single apostrophe (‘), slash (/), function key 3 (F3), escape (Esc) will also be made available.

A Small Problem Surfaces

There is a small problem with this, sometimes it just does not work! Even if you enter text in the find textbox, the buttons remain greyed out and no search is carried out. I have another post detailing my investigation about this issue. The conclusion is that some versions of Firefox wrongly have the bindings for the find textbox in the theme style sheet. The solution is simple and all you need to do is include the correct style sheet in your xul file with the following line near the top of the file.

<?xml-stylesheet href="chrome://global/skin/findBar.css"
    type="text/css"?>

The Close Button Issue

By now all works mostly fine. I discovered another small issue with the close button. When you move your mouse over the close button, the area around the close button is not consistent with the rest of the find toolbar. I am sure that there is a simpler solution somewhere out there. To resolve this issue, I had to explicitly provide the style for the close button. This meant digging into the internals of findbar which I have detailed later. Here is the style I applied to get it working.

#FindToolbar *[anonid="find-closebutton"]:hover {
 background-color: -moz-Dialog !important;
}
#FindToolbar *[anonid="find-closebutton"]:hover:active {
 background-color: -moz-Dialog !important;
}

Now, you have a working findbar. In the next part we will see how to dig deeper into widgets to identify individual elements that the widget is composed of and apply styles to them.

Using the Findbar in Your Firefox Add-ons – Part 1/3

The Findbar Widget

This is the first post of a three part series that details my experiences with the findbar widget which is available in Firefox and also provides a bit of information on XBL and anonymous ids.

Firefox is my primary browser. Not because I love open source stuff (which I do) or that it is cross-platform (which I like) or that it is marketed as secure (no comment). But because of the tremendous power it provides to its add-ons. Some time ago I was experimenting with the findbar widget. The findbar widget is the same “find toolbar” introduced in the Firefox 1.0 preview release. I remember that I liked it at the first sight. To me, this was a good example of a non-intrusive user interface design philosophy that I prefer. The findbar widget was made available to Firefox add-ons starting from Firefox 3. Did you know that Firefox will open a quickfind bar if you type a single apostophe (‘) or a slash (/) and you can enable or disable it using the option accessibility.accesskeycausesactivation in about:config?

Available information on the findbar widget is sparse even today. The only page I could find easily is the one on the Mozilla website at https://developer.mozilla.org/En/XUL/Findbar.

Putting the findbar widget into a Firefox add-on turned out to be a really simple task. As simple as adding a findbar tag in the XUL file. For example, using a line like this.

<findbar id="FindToolbar"/>

It seems that the findbar widget only works with a browser widget and will automatically perform the search in the linked browser widget. So you also need to link the findbar to a browser widget. For example, if your browser widget has the id mybrowser, you can define the findbar as follows.

<findbar id="FindToolbar" browserid="mybrowser"/>

The browserid attribute only works when the findbar widget is being created. Changing the browserid later will not work. If you need to change the linked browser later, you need to use the browser property, using some Javascript code like:-

document.getElementById("FindToolbar").browser =
    document.getElementById("MyNewBrowser");

The iframe widget is another widget that is similar to the browser widget. The iframe widget can also display an html page inside it. My assumption is that the browser widget is a bit heavyweight than the iframe widget as the browser widget maintains the page history which may not always be necessary. Hence, the iframe widget can sometimes be a better lightweight option. I tried to use an iframe widget instead of the browser widget as browserid without much success. So you need to stick with using a browser widget.

The findbar created like this will be hidden. In the next part, I will show you how to make the find bar visible properly and the problems that I faced and how I solved them.

The File Logging Plugin for Selenium IDE v1.7 Released

The new menu with integrated status

The version 1.7 of my File Logging plugin for Selenium IDE is now available on the Firefox addons site. This version brings a bunch of user experience improvements and major internal improvements. This version saves the current log level for the log pane as well. You will get the update automatically once it is approved by the Mozilla team. If you cannot wait to get your hands on this release, you can get it now from the versions page.

For more usage details see my blog post for v1.6 release.

Some of the interesting things this time include using the reusable module I had created earlier and major refactoring of the way the plugin works. I prefer to keep file logging at info level and pane logging at warn level. Since Selenium IDE does not save the logging level from the logging pane, every time I opened Selenium IDE I had to set the pane logging level to warn. Finally, I decided to do something about it and added this feature into this release as well. I also integrated the status of the file logging into the menu itself, so it is immediately obvious and you save one click to check the status.

A Quick Introduction to CSS Locators in Selenium

While writing my recent posts on alternate locators, locator builders and Seleninum plugin API, I skipped over a truely basic question. What is a CSS locator in Selenium? It seems that some people are still looking for the answer(tm)!

Continue reading at my new blog http://blog.reallysimplethoughts.com/2010/10/12/a-quick-introduction-to-css-locators-in-selenium/