Для дослідницьких тестувальників, які проводять тестування вручну, розуміння анкорів HTML має вирішальне значення для забезпечення правильної роботи веб-сторінок і безперешкодної взаємодії з користувачем. Внутрішні анкори HTML, широко відомі як гіперпосилання або посилання, дозволяють користувачам переміщатися по різних сторінках і розділах веб-сайту. У цій статті ми надамо вичерпний посібник з внутрішніх анкорів HTML та їх значення для нашого типу тестування.

Щоб зрозуміти елементи, які ми збираємося аналізувати, важливо знати, як їх перевіряти, щоб побачити їх. Перевірка елементів DOM передбачає використання інструментів розробника браузера для розуміння структури веб-сторінки. Це дуже важливо для тестувальників, оскільки це допомагає нам виявляти проблеми, перевіряти взаємодії та оцінювати користувацький досвід.

Якщо ви хочете дізнатися, як використовувати інструменти для розробників браузерів, зверніться до нашої статті "Консоль браузера".

Анкори HTML створюють посилання, на які можна натиснути, дозволяючи користувачам переходити з однієї сторінки на іншу або переходити до певних розділів на сторінці. Анкори визначаються за допомогою тегу a в HTML і складаються з двох основних атрибутів: href та text. Атрибут href визначає URL-адресу призначення або ціль, тоді як атрибут text визначає видимий текст посилання, з яким взаємодіють користувачі.

Дивіться, наприклад, анкор HTML для кнопки "BECOME A TESTER" на нашому веб-сайті: https://test.io/:

Будь ласка, прочитайте цю статтю, щоб дізнатися, як читати і розуміти структуру URL-адреси.

Існує два типи анкорів HTML: зовнішні та внутрішні.

Зовнішні анкори перенаправляють користувачів на ресурси за межами поточного домену сайту. Вони використовуються для перенаправлення користувачів на інші веб-сайти або зовнішній контент.

Наприклад, наше посилання на Tester Academy у нижньому колонтитулі https://test.io/:

З іншого боку, внутрішні анкори дозволяють користувачам здійснювати навігацію в межах одного сайту, переходячи до певних розділів на поточній сторінці або на різні сторінки в межах одного сайту.

Наприклад, це елемент нижнього колонтитула "Policies for Testers" на https://test.io/:

Це елемент для посилання на тій самій сторінці статті, Bug Report Requirements, на розділ "Title" звіту про помилку:

Як тестувальник-фрілансер Test IO, ви відіграєте життєво важливу роль у забезпеченні коректної роботи всіх посилань на веб-сайті та безперебійної роботи користувачів. Ось чому розуміння анкорів HTML має вирішальне значення в тестуванні:

a. Тестування функціональності: Одним з основних обов'язків дослідницьких тестувальників є перевірка того, що всі внутрішні і зовнішні посилання працюють належним чином. Непрацюючі посилання можуть викликати розчарування у користувачів і негативно вплинути на довіру до веб-сайту.

b. Тестування навігації: Внутрішні анкори повинні спрямовувати користувачів до потрібних розділів на сторінці. Ми повинні переконатися, що при натисканні на внутрішнє посилання користувачі потрапляють в очікуване місце на тій же або іншій сторінці.

c. Перевірка тексту посилання: Ми повинні переконатися, що текст посилання точно відображає вміст, на який воно вказує. Оманливий або нерелевантний текст посилання може заплутати користувачів і знизити їхню довіру до веб-сайту.

d. Кросбраузерна сумісність: анкори HTML можуть поводитися по-різному в різних веб-браузерах. Ми повинні проводити кросбраузерне тестування, щоб переконатися, що посилання працюють однаково в усіх основних браузерах.

e. Мобільна адаптивність: Зі збільшенням кількості користувачів, які заходять на веб-сайти з мобільних пристроїв, ми повинні перевірити, чи правильно працюють посилання на різних розмірах і орієнтаціях екрану.

Оскільки зовнішні анкери мають однакову загальну структуру посилання, засновану на тегу a та його атрибутах href та text, давайте зануримося у внутрішні анкери, оскільки вони мають інші атрибути, які слід проаналізувати під час їх тестування.

Внутрішні анкери, також відомі як ідентифікатори фрагментів або іменовані анкери, дозволяють користувачам переходити до розділів на одній сторінці замість того, щоб перенаправляти їх на іншу сторінку. Найпоширенішими прикладами є тестування змісту, який має посилання на певні розділи, щоб читачі могли перейти до розділу або блоку контенту на тій самій сторінці, або коли при натисканні на адресу електронної пошти користувач переходить до служби електронної пошти, що економить час і покращує користувацький досвід.

Щоб створити внутрішній якір, ви повинні визначити атрибут id для HTML-елемента цільового розділу. Потім ви можете посилатися на цей атрибут id в атрибуті href анкорного посилання, якому передує символ хешу (#). Незважаючи на те, що ідентифікатори є найпростішою реалізацією, анкори також можуть використовувати ім'я класу.

Як показано у наведеному вище прикладі "Заголовка" у нашій статті "Bug Report Requirements", на нього робиться таке посилання: #h_f4796ee256

Використовуючи DevTools браузера, легше виявити ці елементи і, отже, краще визначити першопричину помилки під час тестування.

Давайте визначимо елементи, які роблять цю навігацію можливою. У верхній частині "Bug Report Requirements" є абзац, що містить анкорний атрибут href: <a href=" #h_f4796ee256">Title</a>

Внизу, в розділі "Title" міститься атрибут id, призначення вищевказаного анкора, який робить можливим навігацію на тій же сторінці і відображається як: <h1 id= "h_f4796ee256">Title</h1>

Ці проблеми зазвичай пов'язані з відсутністю або неправильним написанням атрибутів HTML або повною відсутністю елементів (відсутня інформація). Хоча вони можуть виглядати як посилання і бути доступними для кліку, вони не впливають суттєво на функціональність, тому вважаються помилками контенту.

Коли справа доходить до веб-розробки, анкори HTML відіграють життєво важливу роль. Як QA-тестувальнику, важливо розуміти значення анкорів, щоб проводити ефективне ручне дослідницьке тестування. Проводячи ретельні тести і дотримуючись найкращих практик, ви можете допомогти забезпечити безперебійний перегляд для користувачів і сприяти загальному успіху веб-сайту.