使用自定义书签填充表单

以下是 Adam Lichtenstein 的客座文章。 Adam 在 Wufoo 工作，Wufoo 是一款用于构建网页表单的 Web 应用程序，因此您可以想象，测试表单的需求至少是我们其他人的两倍。 Adam 采取了与 我 不同的路线，所以我让他来分享。

像大多数开发人员一样，我花了很多时间手动测试我工作的网站上的用户体验。 单元测试和集成测试很棒，但没有比重复一千次更容易找到网站上的痛点的方法了。

对于表单来说，这会很快变得很乏味。

几个月前，当我们在 Wufoo 的结账货币中添加英镑时，我发现自己陷入了这种境地。 我有多个字段需要填写，包括姓名、电子邮件、地址、信用卡。 无论你想填什么。 当然，很多数据必须是唯一的。

所以我构建了一个 JavaScript 书签，以帮助团队快速填写我们的结账表单进行测试。

我选择书签是因为

1. 我可以快速轻松地分发它
2. 我可以推送更新，而无需用户执行任何操作
3. 我可以在任何环境中运行它们，而无需更改代码

您可以通过在 CodePen 上创建一个 Pen 并将此代码段添加到 href 中来非常快速地构建和分发 JavaScript 书签

<a href="javascript: **js goes here** "></a>

您的用户只需要将链接拖到他们的书签栏中。 然后，只要他们想在浏览器中当前页面上运行该代码，就可以点击它。

对于这个项目，我将依赖 jQuery 来保持代码简洁且跨浏览器友好。 如果有人想要一个普通版本，请在评论中告诉我，我很乐意整理一下。

我还想为大多数字段插入随机数据，所以我将使用一个很棒的库，叫做 Faker。 我们将在这里使用 JavaScript 实现。

构建书签

我们可以将代码直接放入代码段中。 但是除了更干净、更易于维护之外，我们还希望能够更新代码，而无需被迫更新实际书签。 所以相反，让我们引用一个外部文件。

我们将从我们的代码段代码开始

<a href="javascript:
(function(d) {
  var body = d.getElementsByTagName('body')[0],
      script = d.createElement('script');
      script.src = '//.com/pathtomyfile.js';
      body.appendChild(script);
}(window.document));
">My Javascript Bookmarklet</a>

我们正在使用 JavaScript 将一个 script 标签附加到 body 中，并在其中添加我们文件的路径。 如果您正在 https 安全页面上进行测试，您需要确保您的脚本也是 https。 否则，某些浏览器会抛出安全错误。

注意：在开发过程中，您可能需要使用文件的本地主机版本，并在准备好分享时将其替换为生产版本。

预填充脚本

现在我们已经准备好了书签，可以加载我们选择的脚本文件。 让我们制作那个脚本文件。

确保自己的代码不会与原始页面的任何内容冲突或破坏任何内容非常重要。 所以我们将把所有内容包装在一个 自执行匿名函数 中。 这将使用作用域来确保我们的变量不会更改页面上的其他任何内容。

(function(win, doc, $, undefined) {
    'use strict';
    
    // Don't run if jQuery isn't loaded
    if (typeof window.jQuery === 'undefined') {
      return;
    }
    
    // Our code will go here.

  }(window, window.document, window.jQuery));

我喜欢 Chris 从 原始文章 中的随机函数。 让我们在需要时使用它来快速生成随机数。

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

接下来，让我们加载 FakerJS 脚本。 由于我们已经决定将 jQuery 作为依赖项，我们可以使用 $.getScript，它将在完成时返回一个 promise。

$.getScript('//cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker.js')
    .done(function() {
      // run our functions from here
    })
    .fail(function() {
      win.console.error('ERROR: FakerJS not loaded!');
    });

现在我们已经可以使用 Faker 了，我们可以使用它的方法来生成各种假名字、电子邮件、地址等。

我们将创建一个构造函数来加载这些数据，以便我们可以在将来重复使用它们。

var FormData = function(faker) {

    this.faker     = faker;
    
    this.randomWord = faker.Internet.domainWord();

    this.username  = 'fake_' + this.randomWord;
    this.username  += _rand(100,9999);

    // set this value to your password specifications
    this.password  = 'pass1234';

    this.name      = faker.Name.findName();

    this.address1  = faker.Address.streetAddress();
    this.city      = faker.Address.city();
    this.state     = faker.random.br_state_abbr();
    this.zip       = faker.Address.zipCode();

    // Chris' actual credit card number
    this.cc        = '4242 4242 4242 4242';
    this.exp1      = _rand(1,12);
    this.exp2      = _rand(14,22);
    this.cvv       = _rand(100,999);

};

我想让某些字段类型（如复选框和下拉列表）随机化。 因此，让我们扩展 FormData 对象，添加一些函数。

// Randomly select dropdown
 FormData.prototype.randomizeSelect = function(el) {
    var $el  = $(el),
        len  = $el.find('option').length - 1;

    $el.children('option')
      .prop('selected', false)
      .eq( _rand( 1,len + 1 ) )
      .prop('selected', true);
  };

  // Randomly select radio button
  FormData.prototype.randomizeRadio = function(radios) {
    radios  = radios.not('[type="hidden"]');
    var len = radios.length;

    radios
      .prop('checked', false)
      .eq( _rand( 0, len - 1 ) )
      .prop('checked', true);
  };

  // Add some lorem text for textareas
  FormData.prototype.randomizeParagraph = function(el) {
    $(el).val(this.faker.Lorem.sentence(5));
  };

  // Randomize all checkbox fields
  FormData.prototype.randomizeCheckbox = function(el) {
    var $el  = $(el);

    $el.prop('checked', false);

    if (_rand( 0,1 ) === 0) {
      $el.prop('checked', true);
    }
  };

  FormData.prototype.randomizeEmail = function(el) {
    // if we want different emails for all email fields, we can modify this
    $(el).val('chriscoyier+' + this.randomWord + '@gmail.com');
  };

最后，我们只需要将数据绑定到表单上的字段。 我们将使用 jQuery 获取每个字段，或我们可以获取的字段类型，并用数据对象替换该值。 这使我们在创建数据和填充数据之间实现了很好的分离。

var fillForm = function() {
    data = new FormData(window.Faker);

    $('#name').val(data.name);
    $('#username').val(data.username);
    $('#cc').val(data.cc);
    $('#exp-1').val(data.exp1);
    $('#exp-2').val(data.exp2);
    $('#cvv').val(data.cvv);
    $('#address').val(data.address1);
    $('#city').val(data.city);
    $('#state').val(data.state);
    $('#zip').val(data.zip);
    $('#pw').val(data.password);
    $('#pw-repeat').val(data.password);

    data.randomizeRadio($('[name="radio-choice"]'));

    // Randomize all select boxes
    $('select').each(function() {
      data.randomizeSelect(this);
    });

    // Randomize all checkboxes
    $('input[type="checkbox"').each(function() {
      data.randomizeCheckbox(this);
    });

    // Randomize all textareas
    $('textarea').each(function() {
      data.randomizeParagraph(this);
    });
    
    // Randomize all emails
    $('input[type="email"').each(function() {
      data.randomizeEmail(this);
    });
    
  };

您也可以在最后调用表单的 submit，以便在需要时自动发送数据。 这只是一个偏好问题。

$('#form').submit();

结论

这就是在 JavaScript 书签中获得快速简陋的随机数据表单填充器所需的全部内容。

我们肯定还有很多方法可以改进它。 但是当您时间紧迫时，它绝对可以派上用场。

如果您想查看我为 SurveyMonkey 设计团队开源的另一个 JavaScript 书签，请查看 内联副本编辑器。

希望这对某人有所帮助。 如果您有任何疑问，请随时与我联系。

演示

查看 seethroughtrees 的 CodePen 上的 Pen 2cde9271cbfbeb48532c2041dbea9c5c (@seethroughtrees)。