Auditar formularios y rellenar datos de prueba
Usa el rol Developer para auditar los campos visibles de un formulario, revisar los valores de prueba de la IA y rellenarlos solo tras confirmar.
El rol Developer (desarrollador) de WTFAA tiene dos acciones para formularios. Form Audit (auditoría del formulario) revisa la estructura de los formularios de la página actual. Fill Test Data (rellenar datos de prueba) propone valores ficticios para los campos visibles y solo los escribe en la página cuando tú lo confirmas.
La interfaz de WTFAA no está disponible en español, así que esta guía nombra los botones con su etiqueta en inglés, tal como aparecen en la extensión. Aquí verás qué leen ambas acciones de la página, qué devuelven y qué no hace el paso de relleno. Si todavía no has configurado WTFAA, empieza por Primeros pasos. Para una visión general de los tres roles, consulta Roles Reader, Designer y Developer.
Qué lee WTFAA del formulario
Ambas acciones leen la estructura del formulario de forma local, desde la pestaña activa:
- Solo se recogen elementos
<form>con al menos dos controles. Los formularios ocultos mediante un estilo inline se omiten, y los campos que no están dentro de un elemento<form>no se incluyen. - De cada formulario: su encabezado o leyenda, el texto que contiene y la URL de acción y el método.
- De cada campo: etiqueta HTML, tipo, name, id, etiqueta visible, placeholder, si es obligatorio y su valor actual.
- Los campos con
type="hidden"y los ocultos con undisplay: noneinline no se recogen en absoluto. - La URL y el título de la página, y un breve resumen de las señales de frontend detectadas en la página.
Chrome no permite que las extensiones se ejecuten en páginas restringidas como las páginas chrome:// o la Chrome Web Store, así que estas acciones no funcionan ahí.
Paso 1: revisar la vista previa de envío
Cualquiera de las dos acciones abre primero Review before sending (revisar antes de enviar). En una solicitud de formulario muestra la URL y el título de la página, el número de formularios y de campos, el modelo y el modo.
En Local redaction (ocultación local) aparece lo que ha encontrado el filtro local. Los campos de contraseña siempre aparecen ahí. Un campo se trata como campo de contraseña si su tipo es password o si su name, id o etiqueta contiene "password", "passcode" o "pin". Con Use locally filtered context (usar el contexto filtrado localmente) activado, sus valores se sustituyen por [REDACTED_PASSWORD] antes del envío. La opción se activa automáticamente cuando el filtro encuentra algo; si la desactivas, se envían los valores sin filtrar.
Haz clic en Send to AI (enviar a la IA) para continuar o en Cancel (cancelar) para detenerte. Las opciones de la vista previa se explican en Qué se envía a la IA.
Paso 2: ejecutar Form Audit
- Abre la página que contiene el formulario.
- Abre el panel lateral de WTFAA y cambia al rol Developer.
- Haz clic en Form Audit.
- Revisa la vista previa y haz clic en Send to AI.
El informe tiene tres partes:
- Resumen de campos: una tabla con el tipo, la etiqueta, la obligatoriedad y la validación de cada campo.
- Dependencias: la lógica condicional entre campos.
- Posibles problemas: problemas visibles de usabilidad, etiquetas, campos obligatorios y validación en el cliente.
La auditoría solo obtiene la validación de los atributos HTML visibles, las indicaciones del lado del cliente, los estados de error que se muestran y las relaciones entre campos. No deduce reglas de validación del servidor y marca como desconocidas las reglas del backend que no puede ver.
Paso 3: generar valores con Fill Test Data
- En la misma página, haz clic en Fill Test Data.
- Revisa la vista previa y haz clic en Send to AI.
- El modelo responde con una nota breve y una única acción JSON estructurada, que asigna un selector CSS y un valor a cada campo. La solicitud pide al modelo datos realistas pero ficticios, selectores basados preferentemente en el id o el name del campo y solo los campos visibles del contexto del formulario.
- Cuando termina la respuesta, WTFAA muestra una tarjeta 💡 Suggested Action (acción sugerida). Indica cuántos campos se rellenarán y lista cada selector con su valor bajo Fields to review before filling (campos que revisar antes de rellenar).
Paso 4: revisar los campos y confirmar
Revisa cada fila de la tarjeta. No se escribe nada en la página hasta que haces clic en One-click Execute (ejecutar con un clic).
Al hacer clic, WTFAA rellena los campos en la pestaña activa de la ventana actual y resalta brevemente cada campo rellenado. Mantén activa la pestaña del formulario al hacer clic. Los selectores que no coinciden con nada en la página se omiten.
La tarjeta no permite editar ni quitar filas sueltas. Si una fila no debe rellenarse, no ejecutes la acción: pide datos nuevos en el chat o rellena esos campos tú mismo.
Cómo se aplican los valores
- Campos de texto y áreas de texto: WTFAA asigna el valor con el setter nativo del navegador, actualiza el seguimiento interno de valores de React y después lanza los eventos
focus,input,changeyblur. Así los campos controlados por React registran el nuevo valor. - Listas desplegables: el valor se compara primero con los valores de las opciones, luego con su texto y, por último, se usa como índice de opción.
- Casillas y botones de opción:
true,1,checkeduonmarcan la casilla; cualquier otro valor la desmarca. Desde la versión 1.3.4, estos cambios también actualizan el estado de los formularios controlados por React.
Desde la versión 1.3.2, WTFAA no ejecuta JavaScript generado por IA. La acción de relleno son solo datos JSON, y el código que la aplica viene incluido en la extensión.
Qué no hace el paso de relleno
- No envía el formulario ni hace clic en botones de envío ni en ningún otro botón. El código de relleno solo asigna valores a los campos y lanza eventos de entrada. Enviar el formulario es decisión tuya.
- Los campos ocultos nunca se envían al modelo, así que no aparecen en los datos propuestos.
- La solicitud indica al modelo que no incluya campos ocultos, campos de contraseña, campos de pago, casillas de aceptación de términos, botones de envío ni controles destructivos, y que no inicie pagos ni acepte términos. Es una instrucción al modelo, no un bloqueo técnico. La lista de campos de la tarjeta es tu control: si incluye una casilla de términos, un campo de pago o un campo de contraseña, no la ejecutes.
Consejos
- Usa Fill Test Data en entornos de prueba o de staging. Los valores son ficticios y no están pensados para envíos reales.
- Si la vista previa muestra 0 formularios, probablemente la página construye su formulario sin un elemento
<form>, y WTFAA no recoge esos campos. - Para otras tareas en la página, consulta Traducción de páginas o Análisis de capturas de pantalla.