Form auto-completion tool on your own

07 October 2011

When testing a web-site, nevermind who you are developer or QA-engineer, it happens to you pretty often to fill-in form fields again and again. Boring, stupid work, but how to make sure the form does still work as intended? Some fields added, CAPTCHA was attached, whatever else done –you have to run the test again. Besides, it will be repeated on different browsers. Browser form auto-completion feature helps a bit, but that is not the same as when you have various sets of test-data always ready to apply on a form, isn’t it?

Well, what I propose is a very simple tool which you can use anywhere for form testing. You need to take this JS code and fill it once with your own test data:

jquery.autofill.js:

(function($) {
    var FORMNODES = "form";
    (function() {
        var _private = {
            map : {
                'title' : 'Ms.'
                , 'firstname' : 'Jon'
                , 'lastname'  : 'Snow'
                , 'email'     : 'jon.snow@winterfell.we'
                , 'username' : 'Stark'
                , 'password' : 'wintercomes'
                , 'confirmation' : 'wintercomes'
                , 'position' : 'Lord Commander'
                , 'zipcode' : 'wintercomes'
                , 'country' : 'Westeros'
                , 'city' : 'The Wall'
                , 'company' : 'Night Watch'
                , 'address' : 'The Black Tower'
                , 'phone' : 777777
                , 'nationality' : 'Westerosi'
                , 'comment' : 'This is a test data. Please, ignore it.'
                , 'jobtitle' : 'Crow'
                , 'experiance' : 'Veteran (5+)'
                , 'site_link' : 'jon.winterfell.we'
            }
        }

          $.each(_private.map, function(fname, fval) {
              var node = $(FORMNODES).find(":input[name=" + fname +"]");
              if (node.length) {
                  node.val(fval);
              }
          });

    })();
    
})(jQuery);

As you see here, _private.map contains pairs field name : field value. The script runs throughout all the forms on the page (well, you can specify particular form via selector in FORMNODES) and checks the form controls against _private.map. When a field name is found, it fills the control with the taken value.

Ok, it’s all clear now with the script, but how can one use it? Let’s make a bookmaklet out of it. Create an HTML file and put there the link:

<a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://your-site.com/jquery.autofill.js';})();">jQuery.AutoFill</a>

Now, you open the HTML file in different browsers and make a bookmark of the link in each of them. It is better to move the link on the bookmark toolbar and you will have the fill-in button always right next to you. Let’s test it. Open the form you want to fill out and click the bookmark button. Easy, isn’t it?

If you want different sets of test-data, you can keep several such scripts with the corresponding buttons.