Como probadores manuales exploratorios, es crucial comprender los enlaces HTML para asegurar que las páginas web funcionen correctamente y ofrezcan una experiencia de usuario fluida. Los enlaces internos HTML, comúnmente conocidos como hipervínculos o enlaces, permiten a los usuarios navegar por distintas páginas y secciones dentro de un sitio web. En este artículo, proporcionaremos una guía completa sobre los enlaces internos HTML y su importancia en nuestro tipo de pruebas.

Para entender los elementos que estamos a punto de analizar, es esencial saber cómo inspeccionarlos para visualizarlos. Inspeccionar elementos del DOM implica utilizar herramientas de desarrollo del navegador para comprender la estructura de una página web. Esto es crucial para probadores manuales exploratorios, ya que nos ayuda a identificar problemas, validar interacciones y evaluar la experiencia del usuario.

Si deseas aprender a utilizar las herramientas de desarrollo del navegador, consulta nuestro artículo sobre la Consola del navegador.

Los enlaces HTML crean conexiones clicables, permitiendo a los usuarios trasladarse de una página a otra o saltar a secciones específicas dentro de una página. Los enlaces se definen mediante la etiqueta a en HTML y constan de dos atributos principales: href y text. El atributo href especifica la URL o destino, mientras que el atributo text define el texto visible del enlace con el que interactúan los usuarios.

Observa, por ejemplo, el enlace HTML para el botón ❝BECOME A TESTER❞ en nuestro sitio web: https://test.io/:

Por favor, lee el artículo aquí para aprender a leer y entender la estructura de URL.

Existen dos tipos de enlaces HTML: externos e internos.

Los enlaces externos conducen a los usuarios a recursos fuera del dominio actual del sitio web. Se utilizan para dirigir a los usuarios a otros sitios web o contenido externo.

Como nuestro enlace de la ❝Tester Academy❞ en el pie de página de https://test.io/:

Por otro lado, los enlaces internos permiten a los usuarios navegar dentro del mismo sitio web, saltando a secciones específicas en la página actual o a diferentes páginas dentro del mismo sitio.

Por ejemplo, este es el elemento del pie de página ❝Policies for Testers❞ en https://test.io/:

Este es el elemento para vincular en la misma página del artículo, Requisitos del Reporte de Errores, a la sección del informe de errores ❝Título❞:

​

Como probador independiente de Test IO, desempeñas un papel vital para garantizar que todos los enlaces en un sitio web funcionen correctamente y proporcionen una experiencia de usuario fluida. Aquí te explicamos por qué es crucial entender los enlaces HTML en las pruebas:

a. Pruebas de Funcionalidad: Una de las responsabilidades principales de los probadores exploratorios es verificar que todos los enlaces internos y externos funcionen como se espera. Los enlaces rotos pueden crear una experiencia de usuario frustrante y afectar negativamente la credibilidad de un sitio web.

b. Pruebas de Navegación: Los enlaces internos deben dirigir a los usuarios a las secciones correctas dentro de una página. Debemos asegurarnos de que al hacer clic en un enlace interno, los usuarios lleguen a la ubicación esperada en la misma página o en otra página.

c. Verificación del Texto del Enlace: Necesitamos validar que el texto del enlace represente con precisión el contenido al que apunta. Un texto de enlace engañoso o irrelevante puede confundir a los usuarios y reducir su confianza en el sitio web.

d. Compatibilidad entre Navegadores: Los enlaces HTML pueden comportarse de manera diferente en varios navegadores web. Debemos realizar pruebas de compatibilidad entre navegadores para asegurarnos de que los enlaces funcionen de manera uniforme en todos los principales navegadores.

e. Adaptabilidad Móvil: Con el creciente número de usuarios que acceden a sitios web desde dispositivos móviles, debemos verificar que los enlaces funcionen correctamente en diferentes tamaños y orientaciones de pantalla.

Dado que los enlaces internos tienen la misma estructura general de enlace basada en la etiqueta a y sus atributos href y text, adentrémonos en los enlaces internos, ya que tienen otros atributos que deben analizarse al probarlos.

Los enlaces internos, también conocidos como identificadores de fragmentos o anclajes con nombre, permiten a los usuarios navegar a secciones en la misma página en lugar de dirigirlos a una página diferente. Los ejemplos más comunes son cuando se prueba una tabla de contenidos que tiene enlaces a secciones específicas para que los lectores puedan saltar a la sección o bloque de contenido en la misma página, o cuando se hace clic en una dirección de correo electrónico y el usuario navega a un servicio de correo electrónico, ahorrando tiempo y mejorando la experiencia del usuario.

Para crear un enlace interno, debes definir un atributo id para el elemento HTML de la sección de destino. Luego, puedes referenciar este atributo id en el atributo href del enlace de anclaje, precedido por un símbolo de almohadilla (#). Aunque los IDs son la implementación más sencilla, los enlaces también pueden usar un nombre de clase.

Como se muestra en nuestro ejemplo del "Título" en nuestro artículo Requisitos del reporte de errores, al que se hace referencia así: #h_f4796ee256

Al utilizar las herramientas de desarrollo del navegador, es más fácil detectar estos elementos y, por lo tanto, identificar mejor la causa raíz de un error durante las pruebas.

Identifiquemos los elementos que hacen posible esta navegación. En la parte superior de Requisitos del Informe de Errores, un párrafo contiene el atributo href del enlace: <a href="#h_f4796ee256">Title</a>

En la parte inferior, la sección ❝Título❞ contiene el atributo id, el destino del enlace anterior, que posibilita la navegación en la misma página y se muestra así: <h1 id="h_f4796ee256">Title</h1>

Estos problemas suelen involucrar atributos HTML ausentes o mal escritos, o la completa falta de elementos (información faltante). Aunque pueden parecer enlaces y ser clicables, no afectan significativamente la funcionalidad, por lo que se consideran errores de contenido.

En cuanto al desarrollo web, los enlaces HTML desempeñan un papel vital. Como probador de aseguramiento de calidad, es esencial entender la importancia de los enlaces para realizar pruebas exploratorias manuales efectivas. Al realizar pruebas exhaustivas y seguir las mejores prácticas, puedes contribuir a garantizar una experiencia de navegación sin problemas para los usuarios y contribuir al éxito general del sitio web.