Autofill.js

Autofill.js is a tiny JavaScript library that autofills forms inputs with specific or random values. It might help you during development and form testing.

Quickest start

If you already have a HTML form you just need to add the snippet below

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/autofill.min.js"></script>
<script>autofill()</script>

Zero Config example

Quick Start

1. Include script from jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/autofill.min.js"></script>

2. Get a simple HTML form

<form>
  <input type="text" name="username">
  <input type="email" name="email">
  <input type="password" name="password">

  <select name="selectMultiple" multiple>
    <option value="">Choose locations</option>
    <option value="UKNW">Unknown</option>
    <option value="OCN">Ocean</option>
    <option value="MTN">Mountain</option>
    <option value="PLCE">Place</option>
  </select>

  <input type="checkbox" name="checkboxes[opt1]" value="option1">
  <input type="checkbox" name="checkboxes[opt2]" value="option2">
  <input type="checkbox" name="checkboxes[opt3]" value="option3">
</form>

3. Init Autofill.js

This should generates random or/and preset value for every form(s) inputs present in the HTML DOM

<script>
  (async() => {
    await autofill()

    console.log('form inputs filled')
  })()
</script>

You might also specify arbitrary values

autofill({
  inputs: {
    // username: 'jdoe', // input is not defined so it lets it empty
    email: '[email protected]',
    selectMultiple: ['UKNW', 'PLCE'],
    checkboxes: ['option1', 'option2'], // as for selectMultiple you can check inputs by values
    // checkboxes: [0, 1], // or by index position (result is the same as above)
  }
})

Configuration

Below the default Autofill.js config

defaultConfig = {
  // enable autofill
  enable: true,

  // display an overlay with config infos & reset/autofill buttons
  overlay: false,

  // JSON config file url
  url: false,

  // form query selector
  formsSelectors: ['form'],

  // generated value must be valid according to inputs attributes
  validateInputAttributes: ['minlength', 'maxlength'],

  // emit submit event after form's inputs filling
  autosubmit: false,

  // e.g. allow input property 'inputName' to handle 'input-name' or 'input_name'
  camelize: false,

  // trigger events after value set
  events: ['input', 'change'],

  // generate random value where an input's value is formatted as follow {{ password|len?:16 }}
  generate: false,

  // input key attributes targets ordered from the highest priority to the lowest
  inputAttributes: ['data-autofill', 'name', 'id', 'class'],

  // skip autofilling when input has specific attribute. e.g. 'disabled' or 'readonly',
  inputAttributesSkip: [],

  // skip autofilling when input has specific type
  inputTypesSkip: [],

  // inputs support
  inputsSelectors: ['input', 'textarea', 'select', 'progress', 'meter'],

  // override already defined input value
  override: false,

  // if an input value is not defined it fills with a random value
  random: false,

  // if random === true && randomPreset === true then it tries to find a significant preset
  randomPreset: false,

  // handle value in html attribute
  valueAttribute: true,
}

If you need to set specific value (e.g. old input error handling), you might switch override to false

Examples

• Handle specific forms

autofill({
  // display an overlay with config infos & reset/autofill buttons
  overlay: true,

  // will generate random values for every undefined input
  random: true,

  // generate string based on definition {{ password|len:16 }} => w{Ck.-FcUvg5!,-@
  generate: true,
  forms: {
    'form#formId, form.formClasses': {
      inputs: {
        email: '[email protected]',
        password: '{{ password|len:16 }}'
      }
    }
  }
})

• Multiple forms independently

autofill({
  generate: true,
  forms: {
    '#formId': {
      autosubmit: true, // it will autosubmit this form after autofilling
      generate: false,
      inputs: {
        email: '[email protected]',
        password: '{{ password|len:16 }}' // display raw text as generate === false for this specific form
      },
    },
    'form.formClasses': {
      email: '[email protected]',
      password: '{{ password|len:100 }}' // generates a password
    }
  }
})

• Events dispatch

autofill({
  events: ['change', 'input'], // dispatch events once input value set
  inputs: {
    username: 'jdoe', // trigger 'change' & 'input'
    email: {
      events: ['click'],
      value: '[email protected]' // trigger only 'click'
    },
    password: 'S3cUrEd', // trigger 'change' & 'input'
  }
})

• JSON Configuration

autofill({ url: 'https://link.to/file.json' })

JSON Config example

Sandbox

You can try out Autofill.js on CodePen

License

MIT