Tutorial: Prueba del formulario adaptable

Este tutorial es un paso de la serie Create Your First Adaptive Form. Se recomienda seguir la serie en secuencia cronológica para comprender, realizar y demostrar el caso de uso completo del tutorial.

Una vez que el formulario adaptable esté listo, es importante probar el formulario adaptable antes de presentarlo a los usuarios finales. Puede probar manualmente (pruebas funcionales) cada campo o automatizar las pruebas del formulario adaptable. Cuando tiene varios formularios adaptables, probar manualmente cada campo de todos los formularios adaptables se convierte en una tarea ingente.

AEM Forms proporciona un marco de pruebas, Calvin, para automatizar las pruebas de los formularios adaptables. Con el marco, se escriben y ejecutan pruebas de IU directamente en un explorador web. El marco de trabajo proporciona API de JavaScript para la creación de pruebas. La prueba automatizada permite probar la experiencia de cumplimentación previa de un formulario adaptable, enviar experiencia de un formulario adaptable, reglas de expresión, validaciones, carga diferida e interacciones con la interfaz de usuario. Este tutorial le guía por los pasos para crear y ejecutar pruebas automatizadas en un formulario adaptable. Al final de este tutorial, podrá:

Paso 1: Crear un grupo de pruebas

Los grupos de pruebas tienen una colección de casos de prueba. Puede tener varios grupos de pruebas. Se recomienda disponer de un grupo de pruebas independiente para cada formulario. Para crear un grupo de pruebas:

  1. Inicie sesión en AEM instancia de autor Forms como administrador. Abra CRXDE Lite. Puede pulsar AEM logotipo > Herramientas > General > CRXDE Lite o abrir la dirección URL https://localhost:4502/crx/de/index.jsp en un navegador para abrir el CRXDE Lite.

  2. Vaya a /etc/clientlibs en CRXDE Lite. Haga clic con el botón derecho en la subcarpeta /etc/clientlibs y haga clic en Crear > Crear nodo. En el campo Name escriba WeRetailFormTestCases. Seleccione el tipo como cq:ClientLibraryFolder y haga clic en OK. Crea un nodo. Puede usar cualquier nombre en lugar de WeRetailFormTestCases.

  3. Agregue las siguientes propiedades al nodo WeRetailFormTestCases y pulse Guardar todo.

    Propiedad Tipo Multi Value
    categorías Cadena Activado
    • granite.testing.hobbes.tests
    • granite.testing.calvin.tests
    dependencias Cadena Activado
    • granite.testing.hobbes.testrunner
    • granite.testing.calvin
    • apps.testframework.all

    Asegúrese de que cada propiedad se agrega a un cuadro independiente como se muestra a continuación:

    dependencias

  4. Haga clic con el botón derecho en el nodo WeRetailFormTestCases y haga clic en Crear > Crear archivo. En el campo Name, escriba js.txt y haga clic en OK.

  5. Abra el archivo js.txt para editarlo, añada el siguiente código y guarde el archivo:

    #base=.
     init.js
    
  6. Cree un archivo, init.js, en el nodo WeRetailFormTestCases. Agregue el código siguiente al archivo y pulse Guardar todo.

    (function(window, hobs) {
        'use strict';
        window.testsuites = window.testsuites || {};
      // Registering the test form suite to the sytem
      // If there are other forms, all registration should be done here
        window.testsuites.testForm3 = new hobs.TestSuite("We retail - Tests", {
            path: '/etc/clientlibs/WeRetailFormTestCases/init.js',
            register: true
        });
     // window.testsuites.testForm2 = new hobs.TestSuite("testForm2");
    }(window, window.hobs));
    

    El código anterior crea un grupo de pruebas denominado We retail - Tests.

  7. Abra AEM interfaz de usuario de prueba (AEM > Tools > Operations > Testing). El grupo de pruebas We retail - Tests - se muestra en la interfaz de usuario.

    we-retail-test-suite

Paso 2: Cree un caso de prueba para rellenar previamente los valores en un formulario adaptable

Un caso de prueba es un conjunto de acciones para probar una funcionalidad específica. Por ejemplo, anteponga todos los campos de un formulario y valide unos pocos campos para asegurarse de que se introducen los valores correctos.

Una acción es una actividad específica de un formulario adaptable, como hacer clic en un botón. Para crear un caso de prueba y acciones para validar los datos introducidos por el usuario en cada campo de formulario adaptable:

  1. En CRXDE lite, vaya a la carpeta /content/forms/af/create-first-adaptive-form. Haga clic con el botón derecho en el nodo de carpeta create-first-adaptive-form y haga clic en Create Create File. En el campo Name, escriba prefill.xml y haga clic en OK. Añada el siguiente código al archivo:

    <?xml version="1.0" encoding="UTF-8"?><afData>
      <afUnboundData>
        <data>
          <customer_ID>371767</customer_ID>
          <customer_Name>John Jacobs</customer_Name>
          <customer_Shipping_Address>1657 1657 Riverside Drive Redding</customer_Shipping_Address>
          <customer_State>California</customer_State>
          <customer_ZIPCode>096001</customer_ZIPCode>
         </data>
      </afUnboundData>
      <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/"/>
      </afBoundData>
    </afData>
    
  2. Ir a /etc/clientlibs. Haga clic con el botón derecho en la subcarpeta /etc/clientlibs y haga clic en Crear> Crear nodo.

    En el campo Name escriba WeRetailFormTests. Seleccione el tipo como cq:ClientLibraryFolder y haga clic en OK.

  3. Agregue las siguientes propiedades al nodo WeRetailFormTests.

    Propiedad Tipo Multi Valor
    categorías Cadena Activado
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    dependencias Cadena Activado
    • granite.testing.calvin.tests
  4. Cree un archivo, js.txt, en el nodo WeRetailFormTests. Agregue lo siguiente al archivo :

    #base=.
    prefillTest.js
    

    Haga clic en Guardar todo.

  5. Cree un archivo, prefillTest.js, en el nodo WeRetailFormTests. Agregue el código siguiente al archivo . El código crea un caso de prueba. El caso de prueba fija como prefijo todos los campos de un formulario y valida algunos campos para garantizar que se introducen los valores correctos.

    (function (window, hobs) {
        'use strict';
    
        var ts = new hobs.TestSuite("Prefill Test", {
            path: '/etc/clientlibs/WeRetailFormTests/prefillTest.js',
            register: false
        })
    
        .addTestCase(new hobs.TestCase("Prefill Test")
            // navigate to the testForm which is to be test
            .navigateTo("/content/forms/af/create-first-adaptive-form/shipping-address-add-update-form.html?wcmmode=disabled&dataRef=crx:///content/forms/af/create-first-adaptive-form/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ID").value == 371767;
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ZIPCode").value == 96001;
            })
        );
    
        // register the test suite with testForm
        window.testsuites.testForm3.add(ts);
    
    }(window, window.hobs));
    

    El caso de prueba se crea y está listo para ejecutarse. Puede crear casos de prueba para validar varios aspectos de un formulario adaptable, como comprobar la ejecución de la secuencia de comandos de cálculo, validar patrones y validar la experiencia de envío de un formulario adaptable. Para obtener información sobre varios aspectos de la prueba de formularios adaptables, consulte Automatización de pruebas de formularios adaptables.

Paso 3: Ejecute todas las pruebas en un grupo o en casos de pruebas individuales

Un grupo de pruebas puede tener varios casos de prueba. Puede ejecutar todos los casos de prueba en un grupo de pruebas de una vez o individualmente. Al ejecutar una prueba, los iconos indican los resultados:

  • Un icono de marca de verificación indica una prueba pasada: save_icon
  • El icono "X" indica una prueba fallida: close icon
  1. Vaya al icono AEM > Herramientas Operaciones Pruebas

  2. Para ejecutar todas las pruebas del grupo de pruebas:

    1. En el panel Pruebas, pulse Pruebas minoristas: 1). Se amplía el grupo para mostrar la lista de pruebas.

    2. Pulse el botón Run testing. El área en blanco a la derecha de la pantalla se reemplaza por el formulario adaptable a medida que se ejecuta la prueba.

      run-all-test

  3. Para ejecutar una sola prueba desde el grupo de pruebas:

    1. En el panel Pruebas, pulse We retail - Tests (1). Se amplía el grupo para mostrar la lista de pruebas.
    2. Pulse Prefill Test y pulse el botón Run testing. El área en blanco a la derecha de la pantalla se reemplaza por el formulario adaptable a medida que se ejecuta la prueba.
  4. Pulse el nombre de la prueba, Prueba de relleno previo, para revisar los resultados del caso de prueba. Abre el panel Resultado. Pulse el nombre del caso de prueba en el panel Result para ver todos los detalles de la prueba.

    review-results

Ahora el formulario adaptable está listo para su publicación.

En esta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now