Taking the pain out of testing forms.
Populatr will populate any form with pre-defined data so you don't have to keep filling in forms during testing. Take a look below and see how it works.
Browser support: IE8+ and other major browsers. No library required.
Populatr supports the following inputs:
Behind the scenes:
Populatr.init(true, {
'#demo-form': {
'text': 'Some text...',
'email': '[email protected]',
'password': 'Top secret password',
'tel': '123456789',
'number': '40',
'url': 'http://markgoodyear.com',
'search': 'value',
'checkbox': 'true',
'radiogroup': 'option2',
'color': '#BADA55',
'date': '2013-09-01',
'month': '2013-09',
'range': '3',
'time': '17:39',
'select': 'option2',
'multi': ['option1', 'option3']
},
});Simply add populatr.js to the footer:
<script src="populatr.js"></script>Populatr hooks onto the input's name attrbute. The form is specified by either an ID or class.
Example form:<form id="demo-form">
<input name="first-name" type="text">
<input name="last-name" type="text">
<input name="email" type="email">
</form>
Populatr.init(true, { // Initiate Populatr. Set false to quickly disable.
'#demo-form': { // CSS selecor to match form markup
'first-name': 'Mark', // 'Input name': 'Input value'
'last-name': 'Goodyear',
'email': '[email protected]'
}
});Multiple forms are very simple to set up:
Populatr.init(true, {
'#form-one': {
// Form one inputs...
},
'#form-two': {
// Form two inputs...
},
'#form-three': {
// Form three inputs...
}
});Rather than define all form data within the page, you can specify to use an external JSON file. This can be useful incase you have large amounts of form data.
Initiate Populatr with JSON:Populatr.init(true, 'populatr.json'); // Filename can be anything{
"#demo-form": {
"first-name": "Mark",
"last-name": "Goodyear",
"email": "[email protected]"
}
}Remember to use double quotes for JSON files.
If you have any issues, feedback or suggestions, please log an issue on GitHub or find me on Twitter: @markgdyr.