User and Social Experience Design
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.
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 \1313 is the ASCII code for the Enter key.
// purecaffeine.com is a user interaction and UX design, social media and Government 2.0 blog run by professional Canberra, Australia web user interaction designer Nathanael Boehm, licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License.
