Una introducción a las pruebas de frontend

Sep 16, 2025

Cómo

[dieciséis]

Página 1 de 2:

Diferentes tipos de pruebas frontend (y cuándo usarlas)

Diferentes tipos de pruebas frontend (y cuándo usarlas)
Abrazando y haciendo cumplir una cultura de prueba.

Pruebas de código frontend sigue siendo una práctica confusa para muchos desarrolladores. Pero con el desarrollo de Frontend, cada vez más complejo y con los desarrolladores responsables de la estabilidad y la consistencia como nunca antes, las pruebas de Frontend deben ser abrazadas como ciudadanos iguales dentro de su base de código. Rompamos sus diferentes opciones de prueba y explicamos qué situaciones se usan mejor para.

Las pruebas Frontend son un término general que cubre una variedad de estrategias de prueba automatizadas. Algunos de estos, como las pruebas de la unidad e integración, han sido las mejores prácticas aceptadas dentro de la comunidad de desarrollo backend durante años. Otras estrategias son más nuevas, y se derivan de los cambios en lo que se utilizan el desarrollo y el desarrollo frontend.

Al final de este artículo, debe sentirse cómodo evaluando qué estrategias de prueba se adaptan mejor a su equipo y bases de código. Los siguientes ejemplos de código se escribirán utilizando el marco de jazmín, pero las reglas y los procesos son similares en la mayoría de los marcos de prueba.

Mejores piezas de software de prueba de usuario

01. Pruebas de la unidad

Las pruebas de la unidad, uno de los veteranos de prueba, se encuentra en el nivel más bajo de todos los tipos de pruebas. Su propósito es garantizar que los bits más pequeños de su código (llamados unidades) funcionen de manera independiente como se esperaba.

Imagina que tienes un set de LEGO para una casa. Antes de comenzar a construir, desea asegurarse de que cada pieza individual se contabilice (cinco cuadrados rojos, tres rectángulos amarillos). Las pruebas unitarias se asegura de que los conjuntos individuales de código: cosas como las validaciones de entrada y los cálculos.

Ayuda a pensar en las pruebas unitarias en tándem con el mantra 'hacer una cosa bien'. Si tiene una pieza de código con una sola responsabilidad, es probable que desee escribir una prueba de unidad para ello.

Veamos el siguiente fragmento de código, en el que estamos escribiendo una prueba de unidad para una calculadora simple:

 Describa ("Operaciones de la calculadora", función () {
  es ("debería agregar dos números", función () {
    Calculadora.init ();
    VAR Result = Calculator.addnumbers (7,3);
    esperar (resultado) .tobe (10);
  });
});

En nuestro Calculadora Aplicación, queremos asegurarnos de que los cálculos siempre funcionen independientemente de la forma en que esperamos. En el ejemplo, queremos asegurarnos de que siempre podemos agregar con precisión dos números juntos.

Lo primero que hacemos es describir la serie de pruebas que vamos a ejecutar utilizando Jasmine's describir . Esto crea una suite de prueba: una agrupación de pruebas relacionadas con un área particular de la aplicación. Para nuestra calculadora, agruparemos cada prueba de cálculo en su propia suite.

Las suites son excelentes, no solo para la organización de código, sino porque le permiten dirigir su suites por su cuenta. Si está trabajando en una nueva característica para una solicitud, no desea ejecutar todas las pruebas durante el desarrollo activo, ya que eso llevaría mucho tiempo. Pruebas suites individualmente te permite desarrollarse más rápidamente.

A continuación, escribimos nuestras pruebas reales. Utilizando la eso Función, escribimos la función o pieza de funcionalidad que estamos probando. Nuestro ejemplo prueba la función de adición, por lo que ejecutaremos escenarios que confirman que está funcionando correctamente.

Luego escribimos nuestra afirmación de prueba, que es donde probamos si nuestro código funciona como esperamos. Inicializamos nuestra calculadora y administramos nuestra addominio Funciona con los dos números que deseamos agregar. Almacenamos el número como resultado, y luego afirmamos que esto es igual al número que esperamos (en nuestro caso, 10).

Si addominio Falta de devolver las figuras correctas, nuestra prueba fallará. Escribiríamos pruebas similares para nuestros otros cálculos: la resta, la multiplicación, etc.

02. Pruebas de aceptación

Si las pruebas de la unidad son como verificar cada pieza de lego, las pruebas de aceptación están comprobando si se puede completar cada etapa de edificio. Solo porque todas las piezas se contabilizan no significa que las instrucciones sean ejecutables correctamente y le permitirán construir el modelo final.

Las pruebas de aceptación pasan por su aplicación de ejecución y aseguran que las acciones designadas, las entradas de usuario y los flujos de usuario sean completables y funcionan.

Solo porque nuestra aplicación addominio La función devuelve el número correcto, no significa que la interfaz de la calculadora definitivamente funcionará como se espera que proporcione el resultado correcto. ¿Qué sucede si nuestros botones están deshabilitados, o el resultado del cálculo no se muestra? Las pruebas de aceptación nos ayudan a responder estas preguntas.

 Describa ("Estado de fallo de registro", función () {
  ("" No debe permitir el registro de información inválida ", función () {
    var página = visita ("/ home");
    Página.Fill_in ("Entrada [NOMBRE = 'correo electrónico']", "No es un correo electrónico");
    Página.Haga clic ("botón [Type = enviar]");
    Página.Haga clic ("botón [Type = enviar]");
    esperar (página.find ("# signuperror"). Hasclass ("oculto"). Tobefalsy ();
  });
});

La estructura se ve muy similar a nuestra prueba de unidad: definimos una suite con describir , luego escribe nuestra prueba dentro del eso Función, luego ejecuta algún código y verifique su resultado.

Sin embargo, en lugar de probar las funciones y valores específicos, sin embargo, aquí estamos probando que si un flujo de trabajo en particular (un flujo de registro) se comporta como se espera cuando completamos una mala información. Hay más acciones minuciales que están sucediendo aquí, como las validaciones de la forma que pueden ser probadas de la unidad, así como cualquier manejo para lo que muestra nuestro estado de error, demostrado por un elemento con la identificación. signuperror .

Las pruebas de aceptación son una excelente manera de asegurarse de que los flujos de experiencia clave siempre funcionan correctamente. También es fácil agregar pruebas alrededor de casos de bordes, y para ayudar a sus equipos de QA a encontrarlos en su solicitud.

Al considerar para escribir las pruebas de aceptación, sus historias de usuario son un excelente lugar para comenzar. ¿Cómo interactúa su usuario con su sitio web, y cuál es el resultado esperado de esa interacción? Es diferente a las pruebas unitarias, que se adapta mejor a algo como requisitos de función, como los requisitos de un campo validado.

03. Pruebas de regresión visual.

Como se mencionó en la introducción, algunos tipos de pruebas son exclusivas del mundo frontend. El primero de estos es la prueba de regresión visual. Esto no prueba su código, sino que compara el resultado representado de su código: su interfaz, con la versión renderizada de su aplicación en producción, puesta en escena o un entorno local precedido.

Esto se realiza normalmente comparando las capturas de pantalla tomadas dentro de un navegador sin cabeza (un navegador que se ejecuta en el servidor). Las herramientas de comparación de imágenes luego detectan cualquier diferencia entre los dos disparos.

Usando una herramienta como Phantomcss, sus pruebas especifican dónde debe navegar el corredor de prueba, tomar una captura de pantalla y el marco muestra diferencias que surgieron en esas vistas.

 Casper.Start ("/ Home"). Entonces (función () {

  // Estado inicial de forma
  Phantomcss.Screenshot ("# SignupForm", "Formulario de registro");

  // Pulse el botón de registro (debe desencadenar el error)
  casper.Haga clic ("Botón # Registrarse");

  // tomar una captura de pantalla del componente de la interfaz de usuario
  Phantomcss.Screenshot ("# # FormeForm", "Registrarse Formulario de error");

  // Rellene el formulario por Name Atributes & AMP; enviar
  Casper.Fill ("# SignupForm", {
    Nombre: "Alicia Sedlock",
    Correo electrónico: "[email protected]"
  }, cierto);

  // tomar una segunda captura de pantalla del estado de éxito
 Phantomcss.Screenshot ("# # FormeForm", "Registrarse Formulario de éxito");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development

A diferencia de la aceptación y las pruebas de la unidad, las pruebas de regresión visual es difícil de beneficiarse de si está construyendo algo nuevo. A medida que su UI verá cambios rápidos y drásticos a lo largo del desarrollo activo, probablemente guardará estas pruebas para cuando se completen visualmente las piezas de la interfaz. Por lo tanto, las pruebas de regresión visual son las últimas pruebas que debe estar escribiendo.

Actualmente, muchas herramientas de regresión visual requieren un poco de esfuerzo manual. Es posible que tenga que ejecutar su captura de captura de pantalla antes de comenzar a desarrollar en su sucursal o actualizar manualmente las capturas de pantalla de la línea de base a medida que realiza cambios en la interfaz.

Esto es simplemente debido a la naturaleza del desarrollo, cambia a la Ui Puede ser intencional, pero las pruebas solo saben 'Sí, esto es el mismo' o 'No, esto es diferente'. Sin embargo, si las regresiones visuales son un punto de dolor dentro de su solicitud, este enfoque puede ahorrar tiempo y esfuerzo de su equipo en general, en comparación con las regañas de fijación constantemente.

04. Pruebas de accesibilidad y rendimiento.

A medida que crece la cultura y la conciencia alrededor de las pruebas frontend, también lo hace nuestra capacidad de probar diversos aspectos del ecosistema. Dado el mayor enfoque en accesibilidad y el desempeño en nuestra cultura técnica, la integración de esto en su suite de prueba ayuda a garantizar que estos conceptos sigan siendo una prioridad.

Si tiene problemas para hacer cumplir los presupuestos de desempeño o las normas de accesibilidad, esta es una forma de mantener estos requisitos a la vanguardia de las mentes de las personas.

Tanto de estos cheques pueden integrarse en su flujo de trabajo con herramientas de construcción como Grunt y Gulp, o semi-manualmente dentro de su terminal. Para los presupuestos de rendimiento, una herramienta como Grunt-Perfurbudget le brinda la posibilidad de ejecutar su sitio a través de WebPagetest automáticamente dentro de una tarea específica.

Sin embargo, si no está utilizando un corredor de tareas, también puede agarrar a Perforbudget como un módulo NPM independiente y ejecute las pruebas manualmente.

Esto es lo que parece correr esto a través de la terminal:

 Perfbudget --Url http://www.aliciable.com -ey [WebPagetest API KEY] --SpeedIndex 2000 --Render 400

Y asimismo, estableciendo a través de Grunt:

perfocado: {
  defecto: {
    Opciones: {
      URL: 'http://aliciabilidad.com',
      Clave: 'WebPagetest Api Key',
      presupuesto: {
        SpeedIndex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

grunt.registerk ('predeterminado', ['jshint', 'perfbudget']);

Las mismas opciones están disponibles para pruebas de accesibilidad. Así que para PA11Y, puedes ejecutar el pa11y Comando en su navegador para su salida o configure una tarea para automatizar este paso. En la terminal:

 PA11Y Aliciabilidad.com

// Como comando JavaScript después de instalar NPM

var pa11y = requieren ('pa11y'); // requiere pa11y
VAR TEST = PA11Y (); // obtener pa11y listo para establecer

test.run ('aliciabilidad.com', función (error, resultados) {
  // registrar nuestro analizar sus resultados
});

La mayoría de las herramientas en estas categorías son bastante plug-and-play, pero también le brindan la opción de personalizar cómo se ejecutan las pruebas, por ejemplo, puede establecer que ignoren ciertos estándares WCAG.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation

Página siguiente: Cómo introducir las pruebas en su flujo de trabajo

Página actual: Diferentes tipos de pruebas frontend (y cuándo usarlas)

Siguiente página Abrazando y haciendo cumplir una cultura de prueba.

Una introducción a las pruebas de frontend

01. Pruebas de la unidad

02. Pruebas de aceptación

03. Pruebas de regresión visual.

04. Pruebas de accesibilidad y rendimiento.

Cómo - Artículos más populares

PORREREF: Cómo usar la herramienta de referencia de la imagen

Cómo usar fuentes web

Cómo crear un efecto de escritura animado

Crea arte de retratos en Corel Painter

Aprende a cultivar follaje con partículas X

Cómo pintar bestias de fantasía

Crea mensajes perfectos en todos los clientes de correo electrónico

5 consejos para esculpir en un tiempo doble rápido

Categorías