JavaScript - Blogs at Near Infinity

Selenium Mojo : Protoype Bindings in Selenium

Sat, 24 Apr 2010 14:00:36 -0500

Introduction

On my current project we have been involved in converting some of the hundreds of manual tests that are run by our Test Team every release into a suite of automated Selenium RC tests.

During the course of this adventure my crew found several instances where XPath and native JavaScript were not sufficiently expressive to find elements in some of our more complicated interfaces.

Since our web app uses the Prototype/Scriptaculous JavaScript framework we wanted to find a way to make the locating power of Prototype available within Selenium RC.

We developed approaches for both Selenium 0.9.2 and Selenium 1.0.3 (which had better programmatic support for adding JavaScript user extensions to Selenium).

Selenium 0.9.2

Selenium RC provides the capability to add "user extensions" to augment its JavaScript core.

See http://seleniumhq.org/docs/08_user_extensions.html for detailed information on how to set this up.

We wrote the following user-extension.js file:

Selenium.prototype.setupProtoypeJS = function() {
    id = selenium.browserbot.getCurrentWindow().$;
    css = selenium.browserbot.getCurrentWindow().$$;
}

In our code we have a base class for all our test cases. To this we added our own waitForPage() method:

public void waitForPage() {
    selenium.waitForPage('60000')
    proc.doCommand('setupPrototypeJS', [])
}

Thus every time the page reloads (which clears the JavaScript context) we call waitForPage() and this command is re-executed. It creates two global variables (id and css) and binds them to Prototype's $ and $$ functions respectively.

Note: The reason we choose id and css instead of $ and $$ was that Groovy considers $ in Strings to be a special character and we would have had to escape it each time it was used.

The Prototype selectors can now be used in Selenium RC like this:

selenium.click("dom=id('foo')")
selenium.click("dom=css('.bar')")
selenium.click("dom=css('span.foo a.baz')")

Note: You still have to specify the dom locator type so Selenium RC will know to execute your locator string as JavaScript.

Selenium 1.0.3

In more recent version of Selenium RC the project added the setExtensionJs() method. This allows you to set extension JavaScript programmatically prior to starting the selenium client:

selenium = new DefaultSelenium(...)
selenium.setExtensionJs('...')
selenium.start()

This made it much easier to implement our Prototype bindings. The only trick was that the JavaScript seems to be executed prior to having access to a page context and is also only executed once. This required us to take a different approach.

We created id and css as global functions instead of variables. This allowed us to defer accessing the current window until the functions were actually invoked.

selenium.setExtensionJs('''
        id = function(value) {
            return selenium.browserbot.getCurrentWindow().$(value);
        } 

        css = function(value) {
            return selenium.browserbot.getCurrentWindow().$$(value);
        }
''');

Note: The above code snippet is written in Groovy which allows multiline Strings.

The Prototype selectors are used in Selenium RC like before:

selenium.click("dom=id('foo')")
selenium.click("dom=css('.bar')")
selenium.click("dom=css('span.foo a.baz')")

I would be interested in hearing feedback from anyone who has a chance to use this technique!

JavaScript Particle Engine in Canvas

Tue, 23 Sep 2008 19:24:23 -0500

The most popular entry I've written at Near Infinity has been the JavaScript Particle Engine. It had limitations because I used transparent images and only made one color -- black. I recreated the fire demo for a talk -- Advanced Web Graphics with Canvas -- that I gave at the Rich Web Experience. I'll post the slides, sample code, and some more demos in upcoming entries.

JavaScript Obscured (How to confuse coworkers)

Thu, 05 Jun 2008 20:19:44 -0500

I was reading a blog entry at Web Reflection that outlined some obscure solutions to common JavaScript patterns.

I thought that entry was interesting, but I'm not sure I'd use them because of code readability and maintenance. It did get me thinking of some other ways to obscure simple tasks.

Server-side JavaScript and Jaxer

Wed, 23 Jan 2008 13:36:15 -0500

The web community has been buzzing about the new Ajax server, Jaxer, from Aptana. If you haven't heard see John's, or Dion's Ajaxian posts about it.

Now, overall, I am really excited about the future in this project. The problem I had is all their examples use synchronous XMLHttpRequests. We already know why this is unfriendly to users.

JavaScript Security Slides from No Fluff Just Stuff

Thu, 08 Nov 2007 19:38:27 -0500

I spoke at the Reston, VA No Fluff Just Stuff conference again this past weekend. The talk was on JavaScript security covering topics including:

Cross-site scripting (XSS)
Cross-site-request forgery (CSRF)
JSON Hi-jacking
JavaScript portscanning
JavaScript and CSS History "Go Fish"

Testing JavaScript Objects with Function.prototype.call

Thu, 11 Oct 2007 18:33:31 -0500

This is a short tip that I found useful for testing complex JavaScript objects using crosscheck. For more information on crosscheck see my article on JavaScript Unit Testing with Crosscheck.

Testing instance methods can be a pain if the functions use instance variables and the object is heavyweight. In my case the constructor did a lot with the DOM that I didn't want to mock. Instead of invoking the function through an instance of an object, I called it statically.

JavaScript Unit Testing with Crosscheck

Mon, 08 Oct 2007 15:08:12 -0500

Here we are, a couple years since Ajax was coined, JavaScript has become a language that people actually respect. The code being written now is better than ever before. Object-orientation, name-spacing, object detection, and correct scoping are prevalent now. The libraries available (prototype, jquery, yui, dojo) are very well written. What is the next step to improve code quality? If you want my opinion, it's Testing. Otherwise, here's the door. :)

Prototype.js Documentation Site Launched

Thu, 18 Jan 2007 17:37:44 -0500

It seems that Encytemedia was successful in their "Call for Prototype Documentation" blog posted in the old year.

The site lives at prototypejs.org and should help new and experienced users alike master the popular JavaScript library.

Features

API of all extended and new objects with examples
Tips/Tutorials section that includes how prototype works
Easy method for users to contribute

Good work guys!

Firebug 1.0 Features announced

Thu, 16 Nov 2006 11:09:47 -0500

Looks like Joe Hewitt has been busy.

Firebug now has it's own site at getfirebug.com. The new site shows the features for Firebug 1.0 which seem like a giant leap in functionality from the current 0.4.1. My favorites look to be the new profiler and the network activity view (shown right).

The catch? According to Hewitt's blog, it might not be free. I know I would pay $15-$25, what about you?

Javascript Particle Engine

Tue, 07 Nov 2006 23:28:54 -0500

Updated: Particle Engine using Canvas

I was at the No Fluff Just Stuff Software Symposium in Reston, VA this past weekend and had some time in between sessions to work on something. As most of the people I work with know, I rarely code things that might actually be useful to someone in my spare time. So, I had no reason to attempt to rationalize the use for a particle engine in Javascript.

I think I've written a particle engine in almost every language I've used for an extended period of time. This includes python, java, objective-c, and c. What's surprising is that it has taken me this long to write a particle engine in the language I probably spend the most time coding in -- Javascript.

By the way, this is probably the worst particle engine ever created (TM), but it is written in Javascript, so give me a break. It doesn't support colors yet as I couldn't think of an efficient way to change the color of a png. I've only tested it in Firefox and Safari because I'm on a Powerbook. It's also pretty slow, in that it can handle only a dozen or so particles.

Javascript Puzzler

Fri, 04 Aug 2006 19:38:09 -0500

Here's an interesting bug in Internet Explorer I ran across today:

When using window.location to go to a named anchor inside of an iframe, using a String object versus a string primitive produces different results.

Okay, it's pretty hard to explain, let's look at a demo. We need two source html files, a main outer page, and a page for the iframe.

Firebug without Firefox

Sun, 25 Jun 2006 15:52:09 -0500

The problem..

If I had been allocated one Firefox extension to use, without hesitation it would be Joe Hewitt's Firebug. But, eventually, I have to test my code in IE (and Safari¹), and need to debug some DOM or css scripting. Many times I would use the url field to execute Javascript in the page using this method...

javascript:function(){ /* some code */ }()

Wrapping the code in a function will prevent variable name collisions. The problem is that this method can get messy and time consuming when trying to inspect elements nested deep within the DOM.