Selenium and Canvas

I don’t need this yet, but will eventually so here are three different blips of information I’ve collected over the last month about using Selenium with the next generation of web applications. Or at least ones that use the Canvas tag. Crazy enough, they each involve Jason Huggins (who wrote Selenium originally); its like an interview, minus the whole interview part.

The first is a talk by at the May meeting of JS.Chi called The Future of Web App Testing and How to Stop It

  • As yourself how would blind users use your application? If you have made your application accessible, it has been made testable.
  • Canvas solutions will look amazingly like flash ones
  • Everything thing that someone can do to your canvas tag, expose it as a method in js
  • This generation of tool do typing and clicking. Next generation ones will have to do actions the way the application does

Up next is a log from irc (#selenium on the freenet) involving Jason and myself.

[2:58pm] <adamgoucher> hugs: did i see you say a couple weeks ago that you were trying to get selenium working with html5 canvas? did you ever solve it?
[2:59pm] <hugs> hi, adamgoucher… the moral of my story is that canvas-based apps are untestable by default… unless devs put in work to make them testable
[3:00pm] <adamgoucher> have any ideas on how to make them testable? am potentially going down the canvas route on something
[3:01pm] <hugs> so it was mostly a soapbox rant/speech to JS devs saying “think about testing!”… Because the DOM is no longer available (for free) inside the canvas tag, apps that live 100% inside the canvas tag will no longer be “accidentally” testable/recordable by tools like Selenium IDE
[3:01pm] <adamgoucher> ah. I (generally) don’t care about IDE :)
[3:02pm] <hugs> it’s not IDE per se… it’s the lack of the DOM inside of the canvas tag… that makes it an opaque black box
[3:03pm] <hugs> kinda like Flash, Silverlight, or Java applets…. from the point of view of a DOM-based testing approach that Selenium relies on
[3:03pm] <adamgoucher> ah. care about that aspect
[3:04pm] <hugs> the *solution* to testing a canvas-based app, which is very, very similar to how to test a Flash or Java Applet from Selenium… is to write and expose a JavaScript API to manipulate anything/everything of interest that is working/living inside that canvas tag
[3:04pm] <hugs> Selenium can then call methods on that API… and world order is thus restored

And lastly is another irc log with Jason about using flash and selenium together, but equally applies to html5.

[11:16am] <hugs> flash, java applets, silverlight, and all browser plugins (quicktime, etc)… are opaque black boxes to Selenium IDE…. because Selenium is implemented in JavaScript…
[11:18am] <hugs> the author of your specific flash application would need to code an actionscript<->javascript bridge to expose internal methods to javascript in the browser… *then* selenium could do things to the flash object… but *recording* those actions would still take more work
[11:19am] <hugs> other ‘competitors’ to Selenium IDE (like iMacros or Chickenfoot)… “cheat” by using native system libraries to click inside flash objects…. but because the opacity of those flash widgets, they’re still flying blind and can only really send clicks to absolute screen x,y coordinates and *hope* that they landed on the right button
[11:20am] <hugs> but, hey, at least that’s better what IDE can do! (So we hope to steal that feature someday!)

The moral of all these? If your developers are going to be using html and specifically the canvas tag, it is imperative that you work with them to get the testing hooks you need. And the earlier in the process the better.

Post a Comment

Your email is never published nor shared. Required fields are marked *