Pruebas y verificación
Validación y depuración
La verificación y validación de código son procesos esenciales en el desarrollo de software para asegurar la calidad y cumplimiento de los requisitos.
La verificación se enfoca en comprobar que el código cumple con las especificaciones y estándares establecidos, mientras que la validación se centra en asegurar que el software cumple con las necesidades y expectativas del usuario final.
Contenido:
01 — Técnicas de verificación
02 — Pruebas funcionales
03 — Verificaciones fundamentales
04 — Técnicas HTML
05 — Técnicas CSS
06 — Herramientas HTML
07 — Compatibilidad de scripts
08 — Parámetros navegadores
09 — Código alternativo
01 — Técnicas de verificación
Verificación manual: inspección visual de errores.
Verificación automática: validadores y herramientas.
Pruebas funcionales: comprobar que todo responde según lo esperado.
02 — Pruebas funcionales
Son un tipo de prueba de software que verifican si una página web cumple con sus requisitos funcionales, es decir, si hace lo que se supone que debe hacer desde el punto de vista del usuario.
Ejemplos:
▪ ¿El botón «Enviar» de un formulario realmente envía los datos?
▪ ¿El buscador devuelve resultados correctos?
▪ ¿Puedes iniciar sesión con credenciales válidas?
▪ ¿Al hacer clic en una categoría, se muestran los productos correspondientes?
03 — Verificaciones fundamentales
Navegación correcta entre páginas.
Formularios funcionales y validados.
Enlaces e imágenes visibles.
Correcta visualización en distintos tamaños de pantalla.
04 — Técnicas HTML
Validación con W3C Validator (herramienta online proporcionada por el World Wide Web Consortium (W3C) que sirve para verificar si el código HTML o XHTML de una página web sigue los estándares oficiales.)
Verificación de etiquetas cerradas y anidadas, atributos no validos.
Correcta semántica: <header>, <main>, <footer>, etc.
05 — Técnicas CSS
Verificación de selectores válidos.
Uso de herramientas como CSS Validator o CSS Lint .
Prueba en múltiples navegadores y dispositivos.
06 — Herramientas de depuración HTML
Cada navegador ofrece herramientas para inspeccionar y depurar páginas web en tiempo real.
Google Chrome Dev Tools, Firefox Developer Tools, etc.
6.1 – Utilidades para HTML:
Inspección del árbol DOM.
Visualización de estructura y atributos.
Detección de errores en etiquetas.
6.2 – Utilidades para JavaScript:
Consola para ver errores y mensajes.
Depurador paso a paso (podemos añadir breakpoints o puntos de ruptura).
Visualización de variables y llamadas.
6.3 – Utilidades para CSS:
Ver estilos aplicados a cada elemento.
Prueba de cambios de estilo en vivo (live en VS Code)
Visualización de herencia y especificidad.
6.4 – Utilidades para el DOM:
Modificar elementos directamente.
Añadir/eliminar clases y atributos.
Observar eventos en tiempo real.
07 — Compatibilidad de scripts
No todos los navegadores interpretan igual el código.
Es importante probar scripts en diferentes navegadores y versiones.
08 — Parámetros para distintos navegadores
Uso de «navigator.userAgent» para detectar navegador.
Pruebas en Chrome, Firefox, Edge, Safari, móviles.
09 — Código alternativo para navegadores
Uso de «@supports» (Sirve para aplicar reglas CSS solo si el
navegador soporta cierta propiedad.), «feature detection» o condicionales JS.
Alternativas para funciones modernas en navegadores antiguos:
@supports (display: grid) {
.contenedor {
display: grid;
}
}
@supports not (display: grid) {
.contenedor {
display: flex;
}
}