Form auto-completion tool on your own

jQuery

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:

(function( window ) {
    var document = window.document,
        fieldValueMap = {
              'title' : 'Ms.'
            , 'name' : 'JonSnow'
            , 'fillname' : 'Jon Snow'
            , 'firstname' : 'Jon'
            , 'lastname'  : 'Snow'
            , 'email'     : '[email protected]'
            , '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'
            , 'how' : 'other (Please specify)'
            , 'specified' : 'This is a test data. Please, ignore it.'
        };

    Object.keys( fieldValueMap ).forEach(function( name ){
        var input = document.querySelector( "form input[name=" + name + "]" )
            || document.querySelector( "form textarea[name=" + name + "]" );
        input %26%26 ( input.value = fieldValueMap[ name ] );
    });

})( window );

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/autofill.js';})();">AutoFill</a>
Filling-out a form by the bookmaklet

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.