Monday, June 25. 2007
Automated Web Developer Tests using Selenium, Emacs, and MozRepl
One of the biggest hassles with web development is the lack of any real test harness. I have lamented about this before, especially when it comes to testing such ephemerals as an elements height, width, etc. So far the best tests I have run into are your two eyes, which is fine when you are working and testing on one discreet component... but web sites, especially the ones I work on, tend to be more then just 1 or two discreet components.
Enter Selenium IDE. The Selenium IDE provides you with a method to record and execute automated tests of your website. It is easy to use, and hella cool. It can test things like the existence of an element, the text contained inside of an element, its width, height, position, etc. Using selenium, you can build yourself unit tests. This is especially useful and powerful if you happen to be one of the unlucky bastards faced with writing code in JSTL, SMARTY, or some other templating-language-that-needs-to-die. Now you finally have unit tests.
Using Selenium, the testing process is a little more automated. More importantly, you can build a series of regression tests, to ensure the stability of your web application.
There is another piece of the web-development puzzle here, and that is the Moz Repl. An REPL is a Read Eval Print Loop, basically an interactive command interpreter that you can feed commands to, and experiment with. the Moz REPL is a javascript version, that lets you inspect and modify any Javascript object in the browser. This REPL is telnet enabled, in fact, there is even a way to make Emacs talk to this REPL, so you can poke around the browser from within your text editor. This is amazingly powerful in two regards:
So the final piece of the puzzle is something I call Selenemacs. It is a global emacs minor mode, in conjunction with some simple javascript that will script selenium, and provide you with feedback on whether or not its tests pass or fail.
Update 2007-07-09: new versions (Version 0.2) added
Here are the two files:
Here is how you use them:
First, download the MozREPL and Selenium IDE extensions for firefox
Edit selenemacs.el to make sure that the variable selenemacs-js-file points to selenemacs.js
Enable the MozRepl (Tools->MozLab->StartREPL)
Load up selenemacs.el inside emacs (load-file "path/to/selenemacs.el") works
Enable the minor mode selenemacs-minor-mode
Record your test in SeleniumIDE
Use the emacs command selenemacs-execute-test to launch the test, its shortcut is C-c C-s C-e
Emacs tells you if the test passed or failed.
The idea here is that you write your test, and stop using your eyes to test the results of your coding to the browser, but instead use Selenium. This is especially good if you are doing multi-stage and repetitive like testing logins, searches, etc. You can code and test right inside emacs, and only have to switch to the browser to verify that your tests actually passed.
These files also show an interesting way to script mozilla through emacs. The next step of course is to get emacs to start interacting with Firebug.
Enter Selenium IDE. The Selenium IDE provides you with a method to record and execute automated tests of your website. It is easy to use, and hella cool. It can test things like the existence of an element, the text contained inside of an element, its width, height, position, etc. Using selenium, you can build yourself unit tests. This is especially useful and powerful if you happen to be one of the unlucky bastards faced with writing code in JSTL, SMARTY, or some other templating-language-that-needs-to-die. Now you finally have unit tests.
Using Selenium, the testing process is a little more automated. More importantly, you can build a series of regression tests, to ensure the stability of your web application.
There is another piece of the web-development puzzle here, and that is the Moz Repl. An REPL is a Read Eval Print Loop, basically an interactive command interpreter that you can feed commands to, and experiment with. the Moz REPL is a javascript version, that lets you inspect and modify any Javascript object in the browser. This REPL is telnet enabled, in fact, there is even a way to make Emacs talk to this REPL, so you can poke around the browser from within your text editor. This is amazingly powerful in two regards:
- you can script your browser from emacs
- you can edit code inside emacs, and send it right to the javascript interpreter for testing, and evn install it on the current page
So the final piece of the puzzle is something I call Selenemacs. It is a global emacs minor mode, in conjunction with some simple javascript that will script selenium, and provide you with feedback on whether or not its tests pass or fail.
Update 2007-07-09: new versions (Version 0.2) added
Here are the two files:
Here is how you use them:
First, download the MozREPL and Selenium IDE extensions for firefox
Edit selenemacs.el to make sure that the variable selenemacs-js-file points to selenemacs.js
Enable the MozRepl (Tools->MozLab->StartREPL)
Load up selenemacs.el inside emacs (load-file "path/to/selenemacs.el") works
Enable the minor mode selenemacs-minor-mode
Record your test in SeleniumIDE
Use the emacs command selenemacs-execute-test to launch the test, its shortcut is C-c C-s C-e
Emacs tells you if the test passed or failed.
The idea here is that you write your test, and stop using your eyes to test the results of your coding to the browser, but instead use Selenium. This is especially good if you are doing multi-stage and repetitive like testing logins, searches, etc. You can code and test right inside emacs, and only have to switch to the browser to verify that your tests actually passed.
These files also show an interesting way to script mozilla through emacs. The next step of course is to get emacs to start interacting with Firebug.





In my previous entry, I described how one could set up selenium to runs tests from emacs, via the Moz REPL. The most painful part of all of that is setting up the REPL to run. After every firefox startup, you have to manually go to tools menu, and manua
Tracked: Jul 03, 21:46
New Selenemacs packages are here:selenemacs.jsselenemacs.elI fixed some of the more obvious and glaring bugs. For now the Selenemacs main page will be Here. If/when there is more interest, I'll put up a proper SVN repository and a page on bunnywiki.
Tracked: Jul 09, 22:22