Prueba de extremo a extremo con ciprés

Esta semana, en el blog, hablaremos sobre algo sobre lo que soy un gran admirador: las pruebas. No te duermas todavía. Si eres como yo, durante el desarrollo, probablemente refresca tu navegador y haga clic en botones un millón de veces al día para asegurarte de que no hayas roto nada. Este funcionamiento de clic en la verificación-buta es, esencialmente, lo que las personas de lujo llaman pruebas de extremo a extremo. Hice esto mucho recientemente, mientras probaba el suplemento de archivos con el tema y el complemento y trabajé a través de un reactor del código WP Migra DB Pro. Afortunadamente, al igual que otros tipos de pruebas, hay una manera de automatizar las pruebas de extremo a extremo.
En esta publicación nos acercaremos a Cypress y cómo simplifica las pruebas de extremo a extremo en el navegador. Puede usar Cypress para probar cualquier “ruta crítica” en su sitio. Estas pueden ser acciones como asegurarse de que su canal de ventas todavía esté funcionando después de ingresar un código o que un formulario de contacto se envíe correctamente. Lo que sea que normalmente pruebe manualmente, ¡puede automatizarlo con Cypress! ¿Por qué ciprés? Cypress es una nueva prueba, cuyo objetivo es simplificar las pruebas de extremo a extremo. Antes de Cypress, debe averiguar qué biblioteca de prueba usar (moca, karma, broma), instalar selenio, elegir una biblioteca de declaraciones, elegir una biblioteca de burla, perder la cabeza y luego escribir las pruebas. Con Cypress, los pasos son: Instalar Cypress -> Escribir pruebas.
Cypress ya tiene todas las pruebas ya introducidas, por lo que literalmente puede saltar y comenzar a escribir pruebas. Suena demasiado bueno para ser verdad? ¡No es! Las nociones básicas, como se escribe en el sitio web de Cypress, ingrese un CD en su proyecto y ejecute: NPM Instalar Cypress una vez listo, creará una carpeta ./Cypress en su proyecto. Lo más importante para escribir pruebas es la carpeta /integración porque escribimos pruebas aquí. Cypress viene precargado con muchos ejemplos de pruebas, pero no es demasiado difícil crear el suyo desde cero. En la carpeta ./Cypress/integration, cualquier archivo JavaScript que cree será tomado por Cypress Runner. Crearemos un nuevo archivo JavaScript aquí para que podamos escribir nuestra primera prueba. Los documentos de Cypress proporcionan una buena imagen general sobre esto, pero pensé que sería mejor ver cómo probar un proyecto o un complemento de WordPress. Escribir pruebas lo primero que debemos hacer es configurar un bloque de “describir”. Esto prácticamente le dice a Cypress que esta es una prueba y le da a la prueba un nombre. Describe (‘ejecutar un pull’, function () {//} como moca, Cypress ofrece la función “antes de cada uno”. Este es un lugar realmente útil para poner las cosas que desea ejecutar antes para que se ejecute cada prueba. WP Migra DB Pro, quería conectarme a WordPress y ir a la página WP Migra DB Pro en WP-Admin antes de que se ejecute mis pruebas:
Const BaseUrl = Cypress.env (“Sitio”) .Url;ANTERIOR (function () {cy.visit (baseurl + ‘/wp-login.php’); cy.wait (1000); cy.ett (#user_login ‘) .type (cypress.env (“wp_use”)); Cy.ett (‘#use_pass’) .type (cypress.env (“wp_pass”)); cy.get (‘#wp-submit) .click ();});Nota secundaria: la conexión a través de la interfaz de uso es un “anti-modelo” de Cypress, pero funciona.Las declaraciones cypress.env (…) extraen datos de un archivo cypress.json que se coloca en la raíz del proyecto.Esta es una de varias formas de almacenar las variables ambientales con Cypress.
Cypress.json muestra de esta manera: {“env”: {“wp_user”: “admin”, “wp_pass”: “secret”, “sitio1”: {“url”: “http: //cyprestes.devtest”, “ruta “:” ~/Sites/cyprestests.devtest “,” remota_connection “:” https: //anotrycypressstest.devtest
7BPXN3S6QIHNEJGA4O6QLZJ1MVCMOKT9ZHOEZQC “},” SITE2 “: {” URL “:” http: //testingsite.local “,” ~/local \ sites/testingsite/app “,” remote_connection “:” https: //totersti.
68HQT30JPR9D9X/IH+XATRW8Q2E7ZKZ+D19BQLO “},” Plugins_to_migrate “: [” ITHEMES SYNC “,” Google Analytics para WordPress por MonsterinSights, “Hello Dolly”], “Temes_To_Migrate”: [“Actiy)” también avisará en el aviso de MonsterinSights en The ANTER LE () función que usamos un objeto cy. Cypress expone este objeto para interactuar con el corredor de cipreses y tener acceso a todas las funciones de prueba. El código anterior es bastante simple, usamos Cy. Visit () para cargar una URL, esperamos 1 segundo para que la página se cargue y luego ingrese el inicio de sesión.

Cy.ett () es similar a JQuey Selectors o Docum.QuerySlectector () y lo usamos para obtener una referencia a un elemento DOM. Desde allí podemos manejar el elemento usando cy.type () o cy.click (). Se puede encontrar una lista completa de todos los métodos de interacción en la documentación de la API de Cypress. Dentro del bloque “Describa”, puede usar la declaración Mocha Style It () para describir las diferentes partes de su prueba. it (‘puede ejecutar un tirón’, function () {// ..} No me importa si mi prueba puede hacer todas las otras cosas que WordPress puede hacer (autenticación, acceder a la página WP Migra DB Pro, etc.), todas Quiero probar es si se puede ejecutar una extracción. Para la prueba en sí, agregaremos código al bloque de IT (): it (‘puede ejecutar un tirón’, function () {cy.visit (baseurl + ‘/ wp- Admin/Tools.php? Page = wp-migrate-db-pro & wpmdb-profile = -1 ‘); cy.get (‘ #pull ‘). click (); cy.get (.pull-push-condnection- info ‘) .type (cypress.env (“sitio2”) .remote_connection); cy.get (‘ .connect-button ‘) .click (); cy.wait (2000); //.more Código de prueba // haga clic el botón migrar cy.ett (‘.migrate-db-button’) .click ();}); En la prueba anterior, vamos a una nueva url (/wp-admin/tools.php?page = wp-migrate -Db -pro & wpmdb -profile = -1) para cargar la nueva página de perfil WP Migra DB Pro y haremos clic en el selector #Pull, que selecciona la migración de tipo “PUL”.
Luego le decimos a Cypress que ingrese información sobre la conexión, presione la conexión y espere dos segundos. Después de eso, presionamos el botón “Tirar” para iniciar la migración. Nuestra prueba completa debe verse ahora de la siguiente manera: describir (‘ejecutar un pull’, function () {const basasUrl = cypress.env (“sitio”) .Url; antes de que la función () {cy.visit (baseURL + ‘/ wp -Login.php ‘); cy.wait (1000); cy.ett (‘ #user_login ‘) .type (cypress.env (“wp_user”)); cy.get (‘ #user_pass) .type (cypress .env. (“wp_pass”)); cy.get (‘#wp -submit) .click ();}); it (‘ puede ejecutar un tirón ‘, function () {cy.visit (baseurl +’/wp -admin/ Tools.php? Page = WP-Migrate-DB-Pro & wpmdb-profile = -1 ‘); cy.get (‘ #pull ‘) .Click (); cy.ett (.pull-push-condnection- info’ ) .Type (cypress.env (“sitio2”) .remote_connection); cy.get (‘.connect-button’) .Click (); cy.wait (2000); //.more código de prueba / / haga clic en la migración botón cy.ett (‘.migrate-db-button’) .click ();});}); La buena parte con Cypress es que no tienes que decir nada. Cypress fallará si se produce un error de JavaScript o no existe un elemento. Puede decir que hay elementos y puede hacer comparaciones con un estado esperado, pero no es necesario. Ejecución de pruebas hasta ahora he estado en el código y no he visto nada de la magia ofrecida por Cypress. Veamos qué sucede cuando realizamos esta prueba. De vuelta en nuestro terminal, en la raíz de nuestro proyecto, ejecutaremos NPX Cypress abierto. La aplicación Cypress se abrirá y verá algo como esto:
¡Que! Así es, ¡buenas personas, con Cypress obtener una interfaz de uso con el marco de prueba! Asombrado 🤯. En la aplicación Cypress, puede hacer clic en las pruebas individuales para ejecutar o hacer clic en “Ejecutar todas las especificaciones”. En mi caso, llamé a la prueba de disparo MDB_PULL_SPEC.JS, por lo que haremos clic y dejaremos que se ejecute.https: //cdn.delicious.com/content/uploads/2018/09/280954449/5gy3vvfjv.mp4

¿Guay, verdad? La barra lateral izquierda muestra cada uno de los pasos que toma Cypress, como se subraya en la prueba. Lo mejor de Cypress es que hace capturas de pantalla en cada paso de la prueba, para que pueda regresar y ver cuál es la condición de la interfaz de uso en ese momento. También puede hacer clic en cada instante para ver el estado de uso en ese momento de la prueba. Para las solicitudes XHR (AJAX), puede ver el estado de la interfaz de usuario antes y después de que se realice la solicitud.
CLI Como si no fuera suficiente, Cypress también tiene una cinta de correr construida para sus pruebas. ¿No desea hacer clic en un botón o incluso ver las pruebas ejecutadas? Simplemente ejecute NPX Cypress Ejecutar en la raíz de su proyecto: Cypress que se ejecuta en la línea de comandos también registra un video (!) Video, para que pueda solucionar más problemas si falla una prueba. Con la ayuda de CLI Runner, puede conectar Cypress en el flujo de trabajo, pero también ejecutarlo cada vez que presione el código. Advertir todo esto se ve bastante bien, pero ¿qué basura en Cypress, Pete? Bueno, por un lado, Cypress no maneja la interacción real con el navegador. Noté esto mientras intentaba escribir una prueba para la funcionalidad de exportación WP Migra DB. Cuando se genera el archivo de exportación, el navegador solicita una descarga. Cypress no tiene (todavía) una forma de interactuar con estos diálogos del navegador, por lo que es algo para recordar si su aplicación usa un selector de archivos o depende de la interacción del navegador. Un corredor de prueba para conducir a todos realmente tiene que inclinar mi sombrero frente a los desarrolladores de Cypress, es un gran corredor de prueba para mí, hace que sea increíblemente simple agregar pruebas de extremo a extremo a una aplicación heredada. Además, solo cubrimos lo que Cypress puede hacer, hay muchas otras características que no hemos aprobado, como la integración, ¡pero eliminar las solicitudes y variables de la red y administrar el código asincrónico!