Prefill Your Own Forms in Dev

CSS-Tricks

Prefill Your Own Forms in Dev

There is a good chance there is a bunch of forms on the websites you work on. Login and signup forms, payment forms, contact forms, comment forms, etc. It's a good idea to test these forms. Certainly automated tests are a good idea. Backend tests that process the form data and test the results. Frontend tests that test the functions there are doing what you expect.

But then there is manual testing. Like, I want to test this with my eyeballs and my keyboard and mouse and emotions and stuff. That's probably the most common type of testing for designers. Certainly just filling out the forms by hand is a good idea, but doing that over and over gets so tedious you (gasp) might just not do it very often.

Perhaps we can just toss a little bit of code on our sites to prefill them when we need.

Prefill from the Template

One possibility is to prefill all the time from the template itself. For instance, you could check if you're on the development domain and then prefill the value. Like:

<?php
if ($_SERVER['HTTP_HOST'] == "mysite.dev") {
   $prefill = true;
}
?>

<input type="text"
       name="name"
       id="name"
       <?php if ($prefill) { ?>
       value="Chris Coyier"
       <?php } else { ?>
       value=""
       <?php } ?>
>

Or the Rails-y way:

<input type="text" 
  name="name" 
  id="name" 
  <% if Rails.env.development? %>
  value="Chris Coyier"
  <% else %>
  value=""
  <% end %>
>

The problem with this is that you always see the form filled in on development, which isn't how your users encounter it. I prefer to leave the form how the users see it, then optionally fill it in on-demand.

Prefilling with JavaScript

Using the same test-if-development stuff as above, we can insert a new script onto the page to do the prefilling.

<?php if ($_SERVER['HTTP_HOST'] == "mysite.dev") { ?>
  <script src="/assets/development/form-prefiller.js"></script>
<?php } ?>

There are a couple of ways you could go about it:

• Automatically prefill fields it finds


• Insert some buttons to prefill


• Just have some public functions you can manually call from the console

There isn't much advantages to using JavaScript if you're going to auto-prefill. For the purposes of this demo, I'll make buttons. In reality, I just leave it to the console.

A very simple version of the script might be like:

var PrefillMachine = {
  
  prefillCorrectly: function() {
    $("#name").val("Chris Coyier");
  }

}

Then anytime you're on the page with the form, you just open the console and type:

PrefillMachine.prefillCorrectly();

Or if you had some buttons on the page:

var PrefillMachine = {
  
  init: function() {
    this.bindUIActions();
  },
  
  bindUIActions: function() {
    // Probably even best to insert this button with JS
    $("#prefill-correct").on("click", this.prefillCorrectly);
  },
  
  prefillCorrectly: function() {
    $("#name").val("Chris Coyier");
  }

}

PrefillMachine.init();

Prefill Values and Types

It's one thing to just prefill some set values, but you might want to randomize it a bit. For instance, it doesn't help much to prefill the same username over and over on a signup form, because your system will likely reject it as a duplicate. So let's randomize a bit!

In our PrefillMachine object, we can make a function to give us a random string:

_makeId: function()  {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i=0; i < 5; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
},

When we call that, it will give us stuff like eQthY, Jv1ea, or Cmy4g. Pretty unlikely to repeat.

So if we're prefilling a name and username, for instance, we might make our prefilling function be like:

prefillCorrectly: function() {

  var id = this._makeId();

  $("#name").val("name_" + id);
  $("#username").val("username_" + id);

  ...

We're just prefixing those randomized values so they would be easy to find in a database if we wanted to wipe them out or something.

Testing an email address? Perhaps use that randomized value as an extension to a gmail address. That way it's unique, but you'll still get the email.

$("#email").val("chriscoyier+" + id + "@gmail.com");

What about checkboxes, radios, and selects? Might be nice to randomize the choices there. We can make a super quick random number generator:

_rand: function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Then say there was a radio button group with two choices, we could turn them both off, select one at random, and turn it back on:

$("input[name='radio-choice']")
 .prop("checked", false)
 .eq(this._rand(0, 1))
 .prop("checked", true);

Similarly easy with a select:

$("#select-choice")
  .find("option")
  .prop("selected", false)
  .eq(this._rand(0, 2))
  .prop("selected", true);

Randomize a street address?

$("#address").val(this._rand(1000, 9000) + " Super St.");

You get the picture.

Prefilling Incorrectly

Perhaps just as useful as prefilling a form correctly, you can test error states by prefilling incorrectly. Just make another function for doing that:

prefillIncorrectly: function() {

  // Empty should be invalid
  $("#name").val("");
  $("#username").val("");

  // Space should make invalid
  $("#email").val("jim @jim.com");

  // Force them not to match AND one is blank.
  $("#pw").val("123");
  $("#pw-repeat").val("");

  // Turn both off.
  $("input[name='radio-choice']")
   .prop("checked", false);

  // Not enough numbers
  $("#cc").val("424242424242");
  // Values are wrong
  $("#exp-1").val("50");
  $("#exp-2").val("02");
  $("#cvv").val("abc");

  // Left unchecked
  $("#agree-terms").prop("checked", false);

},

Then call it as you will. Then you can submit and see if your error-handling system is working properly.

You could probably even use all this as part of an end-to-end testing kinda thing, but I'll leave that for smarter folk.

Demo

Here's an example of everything:

See the Pen pzKtx by Chris Coyier (@chriscoyier) on CodePen.

---

Thanks to Tim Sabat for introducting me to this idea. He came up with it and implemented it on CodePen for us to make testing for all of us easier.

---

Prefill Your Own Forms in Dev is a post from CSS-Tricks

more info...