Motivation
Als manueller explorativer Tester ist es entscheidend, interne HTML-Anker zu verstehen, um sicherzustellen, dass Webseiten korrekt funktionieren und ein nahtloses Benutzererlebnis bieten. Interne HTML-Anker, allgemein bekannt als Hyperlinks oder Links, ermöglichen es Benutzern, zwischen verschiedenen Seiten und Abschnitten innerhalb einer Website zu navigieren. In diesem Artikel bieten wir eine umfassende Anleitung zu internen HTML-Ankern und ihrer Bedeutung für unsere Art des Testens.
Um die Elemente, die wir gleich analysieren werden, zu verstehen, ist es wichtig zu wissen, wie man sie inspiziert, um sie zu sehen. Das Inspizieren von DOM-Elementen beinhaltet die Verwendung von Browser-Entwicklertools, um die Struktur einer Webseite zu verstehen. Dies ist entscheidend für manuelle explorative Tester, da es uns hilft, Probleme zu identifizieren, Interaktionen zu validieren und das Benutzererlebnis zu bewerten.
Wenn du lernen möchtest, wie man Browser-Entwicklertools verwendet, lies unseren Artikel Browser-Konsole.
Was sind HTML-Anker?
HTML-Anker erstellen anklickbare Links, die es Benutzern ermöglichen, von einer Seite zur anderen zu wechseln oder zu bestimmten Abschnitten innerhalb einer Seite zu springen. Anker werden in HTML mit dem a-Tag definiert und bestehen aus zwei Hauptattributen: href und text. Das href-Attribut gibt die Ziel-URL oder das Ziel an, während das text-Attribut den sichtbaren Linktext definiert, mit dem Benutzer interagieren.
Sieh dir zum Beispiel den HTML-Anker für des Buttons "BECOME A TESTER" auf unserer Website an: https://test.io/:
<a href="/become-a-tester">BECOME A TESTER</a>
Bitte lies den Artikel hier, um zu lernen, wie man die URL-Struktur liest und versteht.
Arten von HTML-Ankern
Es gibt zwei Arten von HTML-Ankern: externe und interne.
Externe Anker leiten Benutzer zu Ressourcen außerhalb der aktuellen Website-Domäne weiter. Sie werden verwendet, um Benutzer zu anderen Websites oder externen Inhalten zu führen.
Wie unser Tester Academy-Link im Footer von https://test.io:
<a href="https://academy.test.io/" target="_self">Tester Academy</a>
Interne Anker hingegen ermöglichen es Benutzern, innerhalb derselben Website zu navigieren, indem sie zu bestimmten Abschnitten auf derselben Seite oder zu verschiedenen Seiten innerhalb derselben Website springen.
Beispielsweise ist dies das Footer-Element ❝Richtlinien für Tester❞ auf https://test.io:
<a href="/policies-testers" target="_self">Policies for Testers</a>
Dies ist das Element, um auf derselben Artikelseite, "Anforderungen an Bug-Reports", zum Bereich ❝Title❞ zu verlinken:
<a href="#h_f4796ee256">Title</a>
Warum ist das Verständnis von HTML-Ankern für Tests relevant?
Als Freelance-Tester bei Test IO spielst du eine wichtige Rolle, um sicherzustellen, dass alle Links auf einer Website korrekt funktionieren und ein reibungsloses Benutzererlebnis bieten. Darum ist das Verständnis von HTML-Ankern beim Testen entscheidend:
a. Funktionalitätstests: Eine der Hauptaufgaben von explorativen Testern ist die Überprüfung, ob alle internen und externen Links wie beabsichtigt funktionieren. Fehlerhafte Links können ein frustrierendes Benutzererlebnis schaffen und die Glaubwürdigkeit einer Website negativ beeinflussen.
b. Navigationsprüfung: Interne Anker sollten Benutzer zu den richtigen Abschnitten innerhalb einer Seite führen. Wir müssen sicherstellen, dass das Klicken auf einen internen Link Benutzer an den erwarteten Ort auf derselben Seite oder auf eine andere Seite bringt.
c. Überprüfung des Linktexts: Wir müssen validieren, dass der Linktext den Inhalt, auf den er verweist, genau darstellt. Irreführender oder irrelevanter Linktext kann Benutzer verwirren und ihr Vertrauen in die Website verringern.
d. Cross-Browser-Kompatibilität: HTML-Anker können sich in verschiedenen Webbrowsern unterschiedlich verhalten. Wir müssen Cross-Browser-Tests durchführen, um sicherzustellen, dass Links einheitlich in allen gängigen Browsern funktionieren.
e. Mobile Anpassungsfähigkeit: Mit der zunehmenden Anzahl von Benutzern, die Websites auf mobilen Geräten aufrufen, müssen wir überprüfen, ob Links auf verschiedenen Bildschirmgrößen und Ausrichtungen richtig funktionieren.
Wie testen wir interne Anker?
Da externe Anker die gleiche allgemeine Linkstruktur aufweisen, die auf dem a-Tag und seinen Attributen href und text basiert, widmen wir uns internen Ankern, da sie weitere Attribute aufweisen, die beim Testen analysiert werden müssen.
Interne Anker, auch als Fragment-Bezeichner oder benannte Anker bekannt, ermöglichen Benutzern, zu Abschnitten auf derselben Seite zu navigieren, anstatt sie zu einer anderen Seite zu führen. Die häufigsten Beispiele sind das Testen eines Inhaltsverzeichnisses, das auf bestimmte Abschnitte verlinkt, damit Leser zu dem Abschnitt oder Inhalt springen können, der sich auf derselben Seite befindet oder das Klicken auf eine E-Mail-Adresse, bei der der Benutzer zu einem E-Mail-Dienst navigiert, um Zeit zu sparen und das Benutzererlebnis zu verbessern.
Um einen internen Anker zu erstellen, musst du ein id-Attribut für das HTML-Element der Zielsektion definieren. Dann kannst du dieses id-Attribut im href-Attribut des Ankerlinks referenzieren und ihr ein Hashtag-Symbol (#) voranstellen. Obwohl IDs die einfachste Implementierung sind, können Anker auch einen Klassennamen verwenden.
Wie in unserem obigen ❝Title❞-Beispiel in unserem Artikel "Anforderungen an Bug-Reports" gezeigt, wird dieser Abschnitt wie folgt referenziert: #h_f4796ee256
Durch die Verwendung der Entwicklertools des Browsers ist es einfacher, diese Elemente zu erkennen und somit die Ursache eines Bugs beim Testen besser zu identifizieren.
Lass uns die Elemente identifizieren, die diese Navigation ermöglichen. Am Anfang von "Anforderungen an Bug-Reports" enthält ein Absatz das Anker-href-Attribut: <a href=" #h_f4796ee256">Title</a>
Am Ende enthält der Abschnitt ❝Title❞ das id-Attribut, das Ziel des obigen Ankers, das die Navigation auf derselben Seite ermöglicht und wird als <h1 id= "h_f4796ee256">Title</h1> angezeigt.
Es ist wichtig zu beachten, dass bei Tests von internen Ankern die häufigsten Hindernisse, auf die du stoßen könntest, Content-Bugs sind.
Diese Probleme beinhalten normalerweise fehlende oder falsch geschriebene HTML-Attribute oder das vollständige Fehlen von Elementen (fehlende Informationen). Obwohl sie wie Links aussehen und anklickbar sind, beeinträchtigen sie die Funktionalität nicht erheblich und gelten daher als Content-Bugs.
Im Bereich der Webentwicklung spielen HTML-Anker eine wichtige Rolle. Als QA-Tester ist es wichtig, die Bedeutung von Ankern zu verstehen, um effektive manuelle explorative Tests durchzuführen. Durch sorgfältige Tests und die Befolgung bewährter Verfahren kannst du dazu beitragen, ein nahtloses Surferlebnis für Benutzer sicherzustellen und zum Gesamterfolg der Website beitragen.
Denke daran, dass eine gut getestete Website mit funktionierenden Links zu einer gesteigerten Benutzerzufriedenheit und einem besseren Ruf der Website führt. Zusätzlich trägt die korrekte Dokumentation dieser Bugs zur Verbesserung der Qualität deiner Tests und sogar deiner Einnahmen bei.