En tant que testeur exploratoire manuel, la compréhension des ancres HTML est cruciale pour garantir le bon fonctionnement des pages Web et offrir une expérience utilisateur fluide. Les ancres HTML internes, communément appelées hyperliens ou liens, permettent aux utilisateurs de naviguer entre différentes pages et sections d'un site Web. Dans cet article, nous fournirons un guide complet sur les ancres HTML internes et leur importance dans notre type de test.

Pour comprendre les éléments que nous nous apprêtons à analyser, il est essentiel de savoir comment les inspecter pour les voir. L'inspection des éléments du DOM implique l'utilisation des outils de développement du navigateur pour comprendre la structure d'une page Web. C'est crucial pour les testeurs exploratoires manuels car cela nous aide à identifier les problèmes, valider les interactions et évaluer l'expérience utilisateur.

Si tu veux apprendre à utiliser les outils de développement du navigateur, consulte notre article Console du navigateur.

Les ancres HTML créent des liens cliquables, permettant aux utilisateurs de passer d'une page à une autre ou de sauter à des sections spécifiques à l'intérieur d'une page. Les ancres sont définies à l'aide de la balise a en HTML et se composent de deux attributs principaux: href et text. L'attribut href spécifie l'URL ou la cible de destination, tandis que l'attribut text définit le texte de lien visible avec lequel les utilisateurs interagissent.

Voyons, par exemple, l'ancre HTML pour le bouton BECOME A TESTER sur notre site Web: https://test.io/:

Lis l'article ici pour apprendre à lire et comprendre la structure des URL.

Il existe deux types d'ancres HTML: externes et internes.

Les ancres externes dirigent les utilisateurs vers des ressources en dehors du domaine actuel du site Web. Elles sont utilisées pour te rediriger vers d'autres sites Web ou un contenu externe.

Comme notre lien Tester Academy dans le pied de page de https://test.io/:

En revanche, les ancres internes permettent aux utilisateurs de naviguer à l'intérieur du même site Web, en sautant vers des sections spécifiques de la page actuelle ou vers différentes pages à l'intérieur du même site.

Par exemple, voici l'élément de pied de page ❝Policies for Testers❞ sur https://test.io/:

Ceci est l'élément pour lier sur la même page d'article, Exigences du rapport de bogue, à la section de rapport de bogue ❝Title❞ :

En tant que testeur indépendant de Test IO, tu joues un rôle essentiel pour t'assurer que tous les liens sur un site Web fonctionnent correctement et offrent une expérience utilisateur fluide. Voici pourquoi la compréhension des ancres HTML est cruciale dans les tests:

a. Test de fonctionnalité: L'une de tes responsabilités principales en tant que testeur exploratoire est de vérifier que tous les liens internes et externes fonctionnent comme prévu. Des liens rompus peuvent créer une expérience utilisateur frustrante et avoir un impact négatif sur la crédibilité d'un site Web.

b. Test de navigation: Les ancres internes doivent te diriger vers les bonnes sections à l'intérieur d'une page. Tu dois t'assurer que cliquer sur un lien interne t'amène à l'emplacement attendu sur la même page ou sur une autre page.

c. Vérification du texte du lien: Tu dois valider que le texte du lien représente de manière précise le contenu auquel il pointe. Un texte de lien trompeur ou non pertinent peut confondre les utilisateurs et réduire leur confiance dans le site Web.

d. Compatibilité entre les navigateurs: Les ancres HTML peuvent se comporter différemment sur différents navigateurs Web. Tu dois effectuer des tests de compatibilité entre les navigateurs pour garantir que les liens fonctionnent uniformément sur tous les navigateurs principaux.

e. Réactivité mobile: Avec le nombre croissant d'utilisateurs accédant aux sites Web sur des appareils mobiles, tu dois vérifier que les liens fonctionnent correctement sur différentes tailles d'écran et orientations.

Comme les ancres externes ont la même structure générale de lien basée sur la balise a et leurs attributs href, et text, plongeons dans les ancres internes car elles ont d'autres attributs à analyser lors de leur test.

Les ancres internes, également connues sous le nom d'identifiants de fragments ou d'ancres nommées, te permettent de naviguer vers des sections sur la même page au lieu de te diriger vers une autre page. Les exemples les plus courants sont lors du test d'une table des matières liée à des sections spécifiques pour que les lecteurs puissent sauter à la section ou au bloc de contenu sur la même page ou lorsqu'on clique sur une adresse e-mail et que tu navigues vers un service de messagerie pour le faire, gagnant du temps et améliorant ton expérience utilisateur.

Pour créer une ancre interne, tu dois définir un attribut id pour l'élément HTML de la section de destination. Ensuite, tu peux faire référence à cet attribut id dans l'attribut href du lien d'ancre, précédé d'un dièse (#). Bien que les ID soient la mise en œuvre la plus simple, les ancres peuvent également utiliser un nom de classe.

Comme le montre notre exemple ci-dessus du ❝Title❞ dans notre article Exigences du rapport de bogue, qui est référencé ainsi: #h_f4796ee256

En utilisant les outils de développement du navigateur, il est plus facile de repérer ces éléments et, par conséquent, d'identifier mieux la cause profonde d'un bogue lors des tests.

Identifions les éléments qui rendent cette navigation possible. En haut de Exigences du rapport de bogue, un paragraphe contient l'attribut href de l'ancre: <a href=" #h_f4796ee256">Title</a>".

En bas, la section ❝Title❞ contient l'attribut id, la destination de l'ancre ci-dessus, qui rend possible la navigation sur la même page et est affichée comme <h1 id= "h_f4796ee256">Title</h1>.

Ces problèmes impliquent généralement des balises HTML manquantes ou mal orthographiées ou l'absence complète d'éléments (informations manquantes). Bien qu'ils ressemblent à des liens et soient cliquables, ils n'affectent pas significativement la fonctionnalité, ils sont donc considérés comme des bogues de contenu.

En ce qui concerne le développement Web, les ancres HTML jouent un rôle crucial. En tant que testeur QA, il est essentiel de comprendre l'importance des ancres pour mener des tests exploratoires manuels efficaces. En effectuant des tests approfondis et en suivant les meilleures pratiques, tu peux contribuer à assurer une expérience de navigation fluide pour les utilisateurs et contribuer au succès global du site Web.