Formulare selbst vorbelegen in der Entwicklung

Es ist gut möglich, dass es viele Formulare auf den von Ihnen bearbeiteten Websites gibt. Anmelde- und Registrierungsformulare, Zahlungsformulare, Kontaktformulare, Kommentarformulare usw. Es ist eine gute Idee, diese Formulare zu testen. Automatisierte Tests sind sicherlich eine gute Idee. Backend-Tests, die die Formulardaten verarbeiten und die Ergebnisse testen. Frontend-Tests, die testen, ob die Funktionen das tun, was Sie erwarten.

Aber dann gibt es noch manuelles Testen. Zum Beispiel: Ich möchte das mit meinen Augen, meiner Tastatur und Maus und meinen Emotionen testen. Das ist wahrscheinlich die häufigste Art des Testens für Designer. Sicherlich ist das Ausfüllen der Formulare von Hand eine gute Idee, aber das immer und immer wieder zu tun, wird so mühsam, dass Sie (Schrecken!) es vielleicht gar nicht mehr so oft tun.

Vielleicht können wir einfach ein kleines bisschen Code auf unsere Websites werfen, um sie bei Bedarf vorab auszufüllen.

Vorausfüllen aus der Vorlage

Eine Möglichkeit besteht darin, die Vorlage selbst ständig vorab auszufüllen. Sie könnten zum Beispiel prüfen, ob Sie sich auf der Entwicklungsdomäne befinden, und dann den Wert vorbelegen. So:

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

Oder der Rails-Weg

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

Das Problem dabei ist, dass Sie das Formular in der Entwicklung immer ausgefüllt sehen, was nicht die Art und Weise ist, wie Ihre Benutzer es vorfinden. Ich ziehe es vor, das Formular so zu belassen, wie die Benutzer es sehen, und es dann optional bei Bedarf auszufüllen.

Vorausfüllen mit JavaScript

Mit denselben Test-ob-Entwicklungs-Sachen wie oben können wir ein neues Skript auf die Seite einfügen, um das Vorausfüllen durchzuführen.

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

Es gibt ein paar Möglichkeiten, wie Sie vorgehen könnten

• Felder automatisch vorbelegen, die gefunden werden
• Schaltflächen zum Vorabfüllen einfügen
• Nur einige öffentliche Funktionen haben, die Sie manuell aus der Konsole aufrufen können

Es gibt nicht viele Vorteile bei der Verwendung von JavaScript, wenn Sie automatisch vorbelegen wollen. Für die Zwecke dieser Demo werde ich Schaltflächen erstellen. In Wirklichkeit überlasse ich es einfach der Konsole.

Eine sehr einfache Version des Skripts könnte so aussehen

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

}

Dann, wann immer Sie auf der Seite mit dem Formular sind, öffnen Sie einfach die Konsole und tippen Sie

PrefillMachine.prefillCorrectly();

Oder wenn Sie einige Schaltflächen auf der Seite hätten

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

Vorausfüllen von Werten und Typen

Es ist eine Sache, einfach einige festgelegte Werte vorab einzufüllen, aber Sie möchten es vielleicht ein wenig randomisieren. Zum Beispiel hilft es nicht viel, bei einem Registrierungsformular immer wieder denselben Benutzernamen vorab einzufüllen, da Ihr System ihn wahrscheinlich als Duplikat ablehnen wird. Lassen Sie uns also ein wenig randomisieren!

In unserem PrefillMachine-Objekt können wir eine Funktion erstellen, die uns einen zufälligen String liefert

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

Wenn wir das aufrufen, erhalten wir Dinge wie eQthY, Jv1ea oder Cmy4g. Ziemlich unwahrscheinlich, dass es sich wiederholt.

Wenn wir also zum Beispiel einen Namen und Benutzernamen vorbelegen, könnten wir unsere Vorausfüllfunktion so gestalten

prefillCorrectly: function() {

  var id = this._makeId();

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

  ...

Wir stellen diesen randomisierten Werten einfach ein Präfix voran, damit sie leicht in einer Datenbank zu finden sind, falls wir sie löschen oder so etwas wollen.

Testen Sie eine E-Mail-Adresse? Verwenden Sie vielleicht diesen randomisierten Wert als Erweiterung für eine Gmail-Adresse. Auf diese Weise ist sie eindeutig, aber Sie erhalten trotzdem die E-Mail.

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

Was ist mit Kontrollkästchen, Radiobuttons und Auswahllisten? Es könnte schön sein, die Optionen dort zu randomisieren. Wir können einen super schnellen Zufallszahlengenerator erstellen

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

Sagen wir, es gäbe eine Gruppe von Radiobuttons mit zwei Optionen, wir könnten beide deaktivieren, eine zufällig auswählen und sie wieder aktivieren

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

Ähnlich einfach mit einer Auswahlliste

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

Eine Straßenadresse randomisieren?

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

Sie haben die Idee verstanden.

Fehlerhaftes Vorausfüllen

Vielleicht ist es genauso nützlich, Formularfehlerzustände zu testen, indem man sie falsch vorbelegt, wie ein Formular korrekt vorab auszufüllen. Erstellen Sie einfach eine weitere Funktion dafür

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

},

Rufen Sie sie dann nach Belieben auf. Dann können Sie absenden und sehen, ob Ihr Fehlerbehandlungssystem ordnungsgemäß funktioniert.

Sie könnten all dies wahrscheinlich sogar als Teil eines End-to-End-Test-Systems verwenden, aber das überlasse ich klügeren Leuten.

Demo

Hier ist ein Beispiel für alles

Sehen Sie den Pen pzKtx von Chris Coyier (@chriscoyier) auf CodePen.

---

Danke an Tim Sabat, der mich mit dieser Idee vertraut gemacht hat. Er hat sie sich ausgedacht und für uns auf CodePen implementiert, um das Testen für uns alle einfacher zu machen.