在开发中预填充您自己的表单

您所工作的网站上很可能有一堆表单。登录和注册表单、付款表单、联系表单、评论表单等。测试这些表单是个好主意。当然，自动化测试是个好主意。处理表单数据并测试结果的后端测试。测试前端功能是否按预期执行的前端测试。

但还有手动测试。比如，我想用我的眼睛、键盘、鼠标和情感等等来测试它。这可能是设计师最常见的测试类型。当然，仅仅手动填写表单是个好主意，但一遍遍地这样做会变得非常乏味，以至于您（倒吸一口冷气）可能不会经常这样做。

也许我们可以在我们的网站上添加一小段代码，以便在我们需要时预填充它们。

从模板中预填充

一种可能性是从模板本身一直预填充。例如，您可以检查您是否在开发域上，然后预填充值。比如

<?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 } ?>
>

或者 Rails 式的方法

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

这样做的问题在于，您始终会在开发环境中看到表单已填充，但这与用户遇到的情况不同。我更倾向于保留用户看到的表单，然后根据需要选择性地填充它。

使用 JavaScript 预填充

使用与上面相同的测试-如果-开发内容，我们可以将新的脚本插入页面以进行预填充。

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

您可以采用几种方法

• 自动预填充找到的字段
• 插入一些按钮以进行预填充
• 只需提供一些可以在控制台中手动调用的公共函数

如果您要自动预填充，使用 JavaScript 没有太多优势。出于此演示的目的，我将创建按钮。实际上，我只是将其留给控制台。

脚本的一个非常简单的版本可能是这样的

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

}

然后，无论何时您在包含表单的页面上，只需打开控制台并键入

PrefillMachine.prefillCorrectly();

或者如果您页面上有一些按钮

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();

预填充值和类型

预填充一些设置值是一回事，但您可能希望对其进行一些随机化。例如，在注册表单上反复预填充相同的用户名并没有多大帮助，因为您的系统可能会将其拒绝为重复项。因此，让我们进行一些随机化！

在我们的 PrefillMachine 对象中，我们可以创建一个函数来为我们提供随机字符串

_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;
},

当我们调用它时，它会给我们提供诸如 eQthY、Jv1ea 或 Cmy4g 之类的内容。重复的可能性很小。

因此，如果我们正在预填充姓名和用户名，例如，我们可能会使我们的预填充函数如下所示

prefillCorrectly: function() {

  var id = this._makeId();

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

  ...

我们只是在这些随机值前面添加前缀，以便如果我们想将它们删除或执行其他操作，可以在数据库中轻松找到它们。

测试电子邮件地址？也许使用该随机值作为 Gmail 地址的扩展名。这样它就是唯一的，但您仍然会收到电子邮件。

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

复选框、单选按钮和选择框怎么办？随机选择这些选项可能很好。我们可以做一个超级快速的随机数生成器

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

然后假设有一个有两个选项的单选按钮组，我们可以将它们都关闭，随机选择一个，然后将其重新打开

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

选择类似地也很容易

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

随机化街道地址？

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

您明白了。

错误地预填充

也许与正确预填充表单一样有用的是，您可以通过错误地预填充来测试错误状态。只需为执行此操作创建另一个函数即可

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);

},

然后根据需要调用它。然后您可以提交并查看您的错误处理系统是否正常工作。

您甚至可能将所有这些用作端到端测试之类内容的一部分，但我将将其留给更聪明的人。

演示

这是一个所有内容的示例

查看 Chris Coyier 在 CodePen 上的笔 pzKtx（@chriscoyier）。

---

感谢 Tim Sabat 向我介绍了这个想法。他想出了这个主意并在 CodePen 上实现了它，以便使我们所有人的测试变得更容易。