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.

Posted in Programming | Tagged , , , , | Leave a comment

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.

Posted in Selenium IDE Plug-ins | Tagged , , , , , , , | 2 Comments

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/

Posted in Selenium Tips | Tagged , , , , , , | Leave a comment

The Selenium-IDE 1.x plugin API (Part 12) – Adding Locator Builders

With the new 1.0.8 release, Selenium IDE will introduce some more API features. This time with a new method addPluginProvidedIdeExtension(). As the name suggests, this method adds support for plugins to provide IDE extensions. It takes the chrome URL of the IDE extension as its only argument. An IDE extension? What’s that? An IDE extension can add Locator Builders, continue reading at my new blog http://blog.reallysimplethoughts.com/2010/10/11/the-selenium-ide-1-x-plugin-api-part-12-adding-locator-builders/

Posted in Selenium IDE Plug-ins | Tagged , , , , | 1 Comment

Creating CSS Locator Builders for Selenium IDE

The new CSS locator

Selenium IDE has a very powerful extension support. In this post I am going to show you how easy it is to extend Selenium IDE with new locator builders. A locator in Selenium is a means of identifying an element for the selenium command. Usually, it is the target part of the command. In a previous post, I wrote about how you can select alternate locators for the element in the Selenium IDE. A locator builder creates each of these locators for you. We will add a new locator builder that provide a locator using CSS. See the screen shot for what we are trying to achieve.

Create a new file named something like cssLocators.js and put the following in it.

LocatorBuilders.add('css:id', function(e) {
if (e.id) {
    return "css=#" + e.id;
}
return null;
});

Loading a Selenium IDE extension

Save it in a folder where you can find it easily. Now start up Selenium IDE and open the options. In the Selenium IDE extensions field, click on the browse button and specify the cssLocators.js file. Now restart the Selenium IDE. Follow the instructions in my previous post about alternate locators and you should now see the brand new css:id locator we just created generating css=#step1 which is the CSS selector for selecting an element by its id. Yeah!

How it Works

Locator builders need to register themselves using the LocatorBuilders.add() method. This method takes two arguments. The first argument is the name of the locator builder. It is also shown on the right side of the “target” drop down list. The second argument is a Javascript function called the builder function that will be provided with the element that the user has clicked on or is being recorded and should return either a locator string or a null. The builder function should return null if the locator it is trying to create is not applicable to the element. If the builder function can build a valid locator, it should return the locator string. Selenium IDE will check if the returned locator will actually find the same element and if so, add it to the drop down.

The css:id locator builder simply checks if the element passed in has an id and builds the correct CSS locator for it which is a # followed by the actual id of the element. The css= prefix identifies it as a CSS based locator.

In the future, I will post about how you can use your own locator builders in a Selenium IDE plugin.

Posted in Selenium Internals | Tagged , , , , , , , | 2 Comments

Learn Alternate Locators Using Selenium IDE

List of locators in Selenium IDE

A locator in Selenium is a means of identifying an element for the selenium command. Usually it is the target part of the command. Did you know that when recording with the Selenium IDE, sometimes the target textbox changes into a dropdown list? Go ahead and try it out.

  1. Start the Selenium IDE.
  2. Go to the http://seleniumhq.org/ page.
  3. Right-click on the first point saying “Begin: write and run tests in Firefox”.
  4. Then choose Show All Available Commands and then VerifyText Step1 1. Begin: write and …
  5. In the IDE, click on the VerifyText command just recorded and you will see the target textbox change to a dropdown list.
  6. Open the dropdown list to see all the available locators.

This is often a powerful tool to select alternate locators for elements in your Selenium commands. It can also be a training tool to learn new ways of selecting elements when you are still trying to learn XPATH and CSS selectors.

Posted in Selenium Tips | Tagged , , , , | 2 Comments

The Stored Variables Viewer Plugin for Selenium IDE v1.3 Released

The new version of my Stored Variables Viewer plugin for Selenium IDE has been uploaded to the Firefox addons site. This version bring user experience improvements, added functionality and internal improvements. Thanks to Paul Grandjean for helpful comments on the first version.

Once you install this plugin, a Stored-Vars button/tab will be available in Selenium IDE near the Log pane. See the screen shot for details. Click on this button to view the available stored variables and their values. Stored variables are usually available while the test is running. There are helpful messages that will tell you what the situation is.

Mini user guide for the plugin

  • Click on the Stored-Vars button/tab to view the stored variables.
  • Click on the Refresh button to refresh the variables shown.
  • Click on the Show default variables to show or hide the default variables provided by Selenium.

Other Thoughts

I usually try to release a new plugin or an update every two weeks, but sometimes I release more often! This release took a lot of time and lots of iterations, sixteen to be exact. Phew! If you have been reading my other post, you already know that I have been improving a lot of code internally, which contributed to most of the iterations. I am quite happy with this release. Some of the interesting things this time include trapping an event in an html page from the addon, making the toolbar button look and behave like a checkbox, making the toolbar button look like a tab which I already blogged about.

Until AMO approves the update, you need to get it manually using the all versions link on the Firefox addons website. As usual feel free to leave comments, improvements, advise, criticism, problems…

Posted in Selenium IDE Plug-ins | Tagged , , , , , , , | Leave a comment