Keyboard navigation testing with Selenium IDE

How to use keyPress, keyDown and keyUp in Selenium IDE including sample script with Mozilla Firefox to test keyboard controls and navigation with web user interfaces.

by Nathanael Boehm on 3 October, 2009

Following on from Jodie Miners’ presentation at the Sydney Business and Technology User Group (SBTUG) meeting earlier this week, I’ve been playing around with Selenium IDE, an add-on for Mozilla Firefox that provides an easy way to record, modify and execute web user interface tests.

As I implement semantic, W3C-compliant HTML interfaces I was particularly interested in how I could use Selenium IDE to test keyboard navigation of interfaces – and it turned out to be a little tricky.

To simulate key presses using Selenium IDE do not use keyPress. It is not a shortcut way of combining keyDown and keyUp.

If you want to test say autocomplete or smart lists on a text input field then record the typeKeys command (type won’t trigger the autocomplete), throw in a pause and then use keyDown and keyUp pairs to move down the list.

Set the Target/locator of each key event to the input field … you do not need to change focus to the div that contains the list elements.

Set the Value of your key events to the respective ASCII key code, so for down arrow that’s \40. Selenium IDE will store it with two backslashes as JavaScript requires the backslash to be escaped.

So for example, if you have a text field with the id “add-text” (like in Remember the Milk):

typeKeys  add-text   New task ^to
pause     500
keyDown   add-text   \40
keyUp     add-text   \40
keyDown   add-text   \40
keyUp     add-text   \40
keyDown   add-text   \13
keyUp     add-text   \13

13 is the ASCII code for the Enter key.

Post to Twitter Post to Delicious Post to Facebook

// purecaffeine.com, UX, design, social media and Gov 2.0 blog by designer Nathanael Boehm, Canberra, Australia. Licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License.

Related posts:

{ 1 trackback }

Selenium Locator Tips « JodieM.com.au
22 March, 2010 at 3:46 pm

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: