cfis : Category firefox, everything about firefox

Selenium and XHTML

Posted by Charlie Wed, 02 Aug 2006 06:09:00 GMT

Last month I blogged about Selenium, which is an open source project that let's you test web applications running in a variety of browser. Unfortunately, Selenium doesn't work out of the box with XHTML - any XPath expressions you use stop working.

I fixed this last month in my local copy, but I've noticed other people are starting to have the same issue. The problem is that Selenium does not implement a namespace resolver as described in the Mozilla XPath documentation. For html documents, XPath expressions look like this:

div/p[@id="foo"]

For XHTML documents, they must include a namespace prefix like this:

x:div/x:p[@id="foo"]

The choice of "x" is random, however, its what XPath Checker (a Firefox extension) uses.

Luckily, Selenium is easily extensible since JavaScript is a language that gets out of your way. The fix is to add the following code into your user-extensions.js file:

PageBot.prototype.namespaceResolver = 
function(prefix)
{
  if (prefix == 'html' ||
      prefix == 'xhtml' ||
      prefix == 'x')
  {
    return 'http://www.w3.org/1999/xhtml';
  }
  else if (prefix == 'mathml')
  {
    return 'http://www.w3.org/1998/Math/MathML'
  }
  else
  {
    throw new Error("Unknown namespace: " + prefix + ".")
  }
}

PageBot.prototype.findElementUsingFullXPath = 
function(xpath, inDocument) {
    if (browserVersion.isIE && !inDocument.evaluate) {
        addXPathSupport(inDocument);
    }

    // HUGE hack - remove namespace from xpath for IE
    if (browserVersion.isIE)
        xpath = xpath.replace(/x:/g,'')

    // Use document.evaluate() if it's available
    if (inDocument.evaluate) {
        // cfis
        //return inDocument.evaluate(xpath, 
              inDocument, null, 0, null).iterateNext();
        return inDocument.evaluate(xpath,
          inDocument, this.namespaceResolver, 0, null).iterateNext();
    }

    // If not, fall back to slower JavaScript implementation
    var context = new XPathContext();
    context.expressionContextNode = inDocument;
    var xpathResult = new XPathParser().parse(xpath).evaluate(context);
    if (xpathResult && xpathResult.toArray) {
        return xpathResult.toArray()[0];
    }
    return null;
};

There are two big hacks. First, the hard-coded "x" prefix. And second, Internet Explorer does not support XHTML so the code strips out any namespace prefixes.

Last, if you are using the Firefox Selenium IDE, make sure to point it at your updated user-extensions.js file (do this using the options menu).

Posted in Firefox, Tools, Web | no comments | no trackbacks

Selenium and XHTML

Posted by Charlie Wed, 02 Aug 2006 06:09:00 GMT

Last month I blogged about Selenium, which is an open source project that let's you test web applications running in a variety of browser. Unfortunately, Selenium doesn't work out of the box with XHTML - any XPath expressions you use stop working.

I fixed this last month in my local copy, but I've noticed other people are starting to have the same issue. The problem is that Selenium does not implement a namespace resolver as described in the Mozilla XPath documentation. For html documents, XPath expressions look like this:

div/p[@id="foo"]

For XHTML documents, they must include a namespace prefix like this:

x:div/x:p[@id="foo"]

The choice of "x" is random, however, its what XPath Checker (a Firefox extension) uses.

Luckily, Selenium is easily extensible since JavaScript is a language that gets out of your way. The fix is to add the following code into your user-extensions.js file:

PageBot.prototype.namespaceResolver = 
function(prefix)
{
  if (prefix == 'html' ||
      prefix == 'xhtml' ||
      prefix == 'x')
  {
    return 'http://www.w3.org/1999/xhtml';
  }
  else if (prefix == 'mathml')
  {
    return 'http://www.w3.org/1998/Math/MathML'
  }
  else
  {
    throw new Error("Unknown namespace: " + prefix + ".")
  }
}

PageBot.prototype.findElementUsingFullXPath = 
function(xpath, inDocument) {
    if (browserVersion.isIE && !inDocument.evaluate) {
        addXPathSupport(inDocument);
    }

    // HUGE hack - remove namespace from xpath for IE
    if (browserVersion.isIE)
        xpath = xpath.replace(/x:/g,'')

    // Use document.evaluate() if it's available
    if (inDocument.evaluate) {
        // cfis
        //return inDocument.evaluate(xpath, 
              inDocument, null, 0, null).iterateNext();
        return inDocument.evaluate(xpath,
          inDocument, this.namespaceResolver, 0, null).iterateNext();
    }

    // If not, fall back to slower JavaScript implementation
    var context = new XPathContext();
    context.expressionContextNode = inDocument;
    var xpathResult = new XPathParser().parse(xpath).evaluate(context);
    if (xpathResult && xpathResult.toArray) {
        return xpathResult.toArray()[0];
    }
    return null;
};

There are two big hacks. First, the hard-coded "x" prefix. And second, Internet Explorer does not support XHTML so the code strips out any namespace prefixes.

Last, if you are using the Firefox Selenium IDE, make sure to point it at your updated user-extensions.js file (do this using the options menu).

Posted in Firefox, Tools, Web | no comments | no trackbacks

Selenium

Posted by Charlie Tue, 11 Jul 2006 20:26:00 GMT

There are good tools for testing most parts of web applications. At the base level, almost every language has a unit testing framework. Above that, some web frameworks, like Rails, add functional tests.

Further out, there all sorts of tools you can use to send requests to your application and analyze the results. Some are quite sophisticated, and can identify the smallest changes (just one byte for example) in your application’s responses over time. Its great for regression tests and take almost no time once you’ve set up all your tests.

And of course there are lots of performance testing frameworks that try to stress your application to see how it performs under load.

One thing that has been difficult though is testing code that runs in a browser. Since what runs in the browser _is_ the application to users, you have to get it right. Complicating the effort are the myriad of differences between browsers, not to mention the differences in a single browser running on different operating systems.

Last time I was involved with a major web application, there really weren’t any tools, either open source or commercial, to test the client. Mercury hadn’t yet launched its web testing tools, and the rest of the commercial ones were only good at sending and recieving responses to a web application.

Happily, this has changed. My favorite is Selenium, which supports all major browser. There is even a Firefox extension that helps you quickly write tests by recording what you are doing in the browser. Tests are saved as HTML tables - which sounds weird, but works quite well.

Selenium will load your tests and then run them inside a browser. Its quite entertaining watching your browser do things without you typing or clicking any buttons.

One of the nice things about Selenium is how easy it is to extend. For example, we needed to have precise control over where mouse events happened on the screen (i.e., the x and y locations). Selenium doesn’t support this, but an hour later I had hacked together everything I needed.

If your interested, I’ve submitted the code back to the selenium project. Simply download it and paste it into your user-extensions.js file and you’re ready to go.

And if you’re using Rails, check out the selenium on rails project which nicely integrates selenium into your application (it also needed a couple of patches to suport Mongrel and to record test results, I’ll submit those also).

Posted in Firefox, Web | no comments | no trackbacks