Es muy probable que haya varios formularios en los sitios web en los que trabaja. Formularios de inicio de sesión y registro, formularios de pago, formularios de contacto, formularios de comentarios, etc. Es una buena idea probar estos formularios. Ciertamente, las pruebas automatizadas son una buena idea. Pruebas de backend que procesan los datos del formulario y prueban los resultados. Las pruebas frontend que prueban las funciones están haciendo lo que esperas.
Pero luego está la prueba manual. Quiero probar esto con mis ojos y mi teclado y mouse y emociones y esas cosas. Ese es probablemente el tipo de prueba más común para los diseñadores. Ciertamente, completar los formularios a mano es una buena idea, pero hacerlo una y otra vez se vuelve tan tedioso que (jadeo) puede que no lo haga con mucha frecuencia.
Quizás podamos lanzar un poco de código en nuestros sitios para rellenarlos cuando lo necesitemos.
Rellenar previamente desde la plantilla
Una posibilidad es rellenar todo el tiempo desde la propia plantilla. Por ejemplo, puede verificar si está en el dominio de desarrollo y luego rellenar previamente el valor. Me gusta:
<?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 } ?>
>O al estilo Rails-y:
<input type="text"
name="name"
id="name"
<% if Rails.env.development? %>
value="Chris Coyier"
<% else %>
value=""
<% end %>
>El problema con esto es que siempre ves el formulario completado en el desarrollo, que no es como lo encuentran tus usuarios. Prefiero dejar el formulario como lo ven los usuarios y luego, opcionalmente, completarlo a pedido.
Llenado previo con JavaScript
Usando el mismo material de prueba-si-desarrollo que arriba, podemos insertar una nueva secuencia de comandos en la página para realizar el llenado previo.
<?php if ($_SERVER['HTTP_HOST'] == "mysite.dev") { ?>
<script src="https://css-tricks.com/assets/development/form-prefiller.js"></script>
<?php } ?>Hay un par de formas de hacerlo:
- Rellenar automáticamente los campos que encuentre
- Inserte algunos botones para rellenar previamente
- Solo tiene algunas funciones públicas a las que puede llamar manualmente desde la consola
No hay muchas ventajas en usar JavaScript si va a autocompletar. Para los propósitos de esta demostración, crearé botones. En realidad, se lo dejo a la consola.
Una versión muy simple del script podría ser como:
var PrefillMachine = {
prefillCorrectly: function() {
$("#name").val("Chris Coyier");
}
}Luego, cada vez que esté en la página con el formulario, simplemente abra la consola y escriba:
PrefillMachine.prefillCorrectly();O si tuvieras algunos botones en la página:
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();Valores y tipos de llenado previo
Una cosa es rellenar previamente algunos valores establecidos, pero es posible que desee aleatorizarlos un poco. Por ejemplo, no ayuda mucho rellenar previamente el mismo nombre de usuario una y otra vez en un formulario de registro, porque su sistema probablemente lo rechazará como un duplicado. ¡Así que aleatoricemos un poco!
En nuestro objeto PrefillMachine, podemos hacer una función para darnos una cadena aleatoria:
_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;
},Cuando lo llamemos así, nos dará cosas como eQthY, Jv1ea o Cmy4g. Es bastante improbable que se repita.
Entonces, si prellenamos un nombre y un nombre de usuario, por ejemplo, podríamos hacer que nuestra función de prellenado sea como:
prefillCorrectly: function() {
var id = this._makeId();
$("#name").val("name_" + id);
$("#username").val("username_" + id);
...Solo estamos prefijando esos valores aleatorios para que sean fáciles de encontrar en una base de datos si quisiéramos eliminarlos o algo así.
¿Probar una dirección de correo electrónico? Quizás use ese valor aleatorio como una extensión de una dirección de Gmail. De esa manera, es único, pero seguirá recibiendo el correo electrónico.
$("#email").val("chriscoyier+" + id + "@gmail.com");¿Qué pasa con las casillas de verificación, las radios y las selecciones? Sería bueno aleatorizar las opciones allí. Podemos hacer un generador de números aleatorios súper rápido:
_rand: function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}Luego, digamos que había un grupo de botones de opción con dos opciones, podríamos apagarlos, seleccionar uno al azar y volver a encenderlo:
$("input[name="radio-choice"]")
.prop("checked", false)
.eq(this._rand(0, 1))
.prop("checked", true);Similarmente fácil con una selección:
$("#select-choice")
.find("option")
.prop("selected", false)
.eq(this._rand(0, 2))
.prop("selected", true);¿Aleatorizar una dirección postal?
$("#address").val(this._rand(1000, 9000) + " Super St.");Te dan la imagen.
Llenado previo incorrecto
Quizás tan útil como rellenar previamente un formulario correctamente, puede probar los estados de error rellenando previamente incorrectamente. Solo crea otra función para hacer eso:
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);
},Entonces llámalo como quieras. Luego, puede enviar y ver si su sistema de manejo de errores está funcionando correctamente.
Probablemente incluso podrías usar todo esto como parte de una especie de prueba de extremo a extremo, pero eso se lo dejo a las personas más inteligentes.
Manifestación
Aquí tienes un ejemplo de todo:
Vea el Pen pzKtx de Chris Coyier (@chriscoyier) en CodePen.
Gracias a Tim Sabat por presentarme esta idea. Se le ocurrió y lo implementó en CodePen para que nos facilitara las pruebas a todos.