typeKey() for modern browsers (w/ jQuery)

With new versions of Firefox Selenium's typeKey method stopped working,
and most people had downgrade back to Firefox 7.

Especially in our case where we need to test weird autocomplete plugin with lazy loaded components.

So I decided to create temporally workaround until we get new version of Selenium.

Since we're using jQuery everywhere, it was pretty easy just solution – just to call all keyboard related triggers in a loop.

Here is function:

function typeKey(glob, field, sequence, callback)
{
 var nextChar = 0;

 // make glob optional
 if (!callback && (typeof glob == 'string' || glob.jquery))
 {
 callback = sequence;
 sequence = field;
 field = glob;
 glob = window;
 }

 if (!callback) callback = function(){};

 // --- start with actual stuff

 // jquerytize field
 if (typeof field == 'string') field = glob.jQuery(field);

 // make it an array
 sequence = sequence.split('');

 // trigger the whole thing
 setTimeout(function()
 {
 // focus
 field.focus();
 // and start looping
 looping();
 }, 0);

 // --- subroutines

 // do looping
 function looping()
 {
 // check if we done
 if (!sequence[nextChar]) return callback(null);

 // type and continue looping
 type(field, sequence[nextChar], looping);
 // increment pointer
 nextChar++;
 }

 // do typing
 function type($field, char, cb)
 {
 var nextEvent = 0
 , fireSquad =
 [
 // 1. keydown
 function() { $field.trigger(keyEvent('keydown', char)); },
 // 2. enter char
 function() { $field.val($field.val() + char); },
 // 3. keyup
 function() { $field.trigger(keyEvent('keyup', char)); },
 // 4. keypress
 function() { $field.trigger(keyEvent('keypress', char)); },
 // 5. done – callback
 function() { if (typeof callback == 'function') cb(); }
 ]
 ;

 // start firing events in 300ms
 setTimeout(fire, 300);

 // -- sub-subroutines
 function fire()
 {
 fireSquad[nextEvent]();
 nextEvent++;
 // look for next and fire on next tick
 if (fireSquad[nextEvent]) setTimeout(fire, 0);
 }
 }

 // create keyEvent
 function keyEvent(event, key)
 {
 var code = key.charCodeAt(0);
 return glob.jQuery.Event(event, {which: code, keyCode: code});
 }
};

And that's how you use it:

typeKey('#search_location', 'Palo Alto, CA');

There are two optional params:

– callback, which get called after last character is typed.

– glob, window object, used when called from Selenium.

typeKey([window], field_obj_or_selector, sequence, [callback]);