लिंक्स और नेविगेशन टेस्टिंग
Navigation testing जाँचती है कि लोग site में घूम सकें और वहीं पहुँचें जहाँ वे उम्मीद करते हैं: links सही जगह ले जाएँ, menus और breadcrumbs दिखाएँ कि user कहाँ है, Back पिछले view पर लौटाए, नए tab में paste किया गया URL वही page खोले, और गलत type किया गया address एक मददगार "page not found" page पर पहुँचे।
उदाहरण के लिए, product page पर "Delivery" link को delivery section तक ले जाना चाहिए, और Back को results का page 2 filters के साथ लौटाना चाहिए।
यह क्यों ज़रूरी है
Checkout में टूटा link user को तब रोक देता है जब उसे अगला step चाहिए; filtered search खो देने वाला Back button उसे फिर से शुरू करवाता है; product की जगह home page खोलने वाला shared link visit गँवा देता है। Developers को यह कम दिखता है: वे home page से आगे click करते हैं और URLs paste करना, reload करना या Back जाना कम ही करते हैं।
Links तब भी टूटते हैं जब कोई page edit नहीं करता: कोई product हटता है, किसी section का नाम बदलता है। इसलिए navigation हर release में regression का risk है, और इसके defects report करना आसान है: एक page, एक link, एक गलत destination।
हर link पर क्या जाँचें
Link, यानी HTML for testers वाले lesson का <a href>, तब काम करता है जब उसका destination मौजूद हो, उसके text से मेल खाए और team के तय तरीके से खुले:
- Destination: general help centre खोलने वाला "Return policy" link defect है, भले कोई error न दिखे।
- Link text: screen reader की links list में दस "Read more" links में फ़र्क नहीं किया जा सकता। WCAG 2.2 का success criterion 2.4.4 Link Purpose (In Context) माँगता है कि purpose text और उसके context से साफ़ हो।
- Target:
target="_blank"नया tab खोलता है, जहाँ Back कुछ नहीं करता। Team का rule जाँचें (अक्सर: सिर्फ़ external sites और documents) और देखें कि ऐसे links यह बताएँ। - Anchors:
#deliveryid="delivery"तक scroll करता है। Match exact होता है (#Deliveryकुछ नहीं ढूँढता), और missing target चुपचाप fail होता है, न error न scroll। Sticky header heading को ढके नहीं। - Schemes:
mailto:औरtel:सही address या number के साथ mail या phone app खोलते हैं। - Environments और encoding: कोई link
localhostया किसी दूसरे environment की ओर point न करे, और percent-encoded Arabic path (%D8%B9यानी ع) click करने पर भी और paste करने पर भी काम करे।
टूटे links, status codes और redirects पर पहली नज़र
Link के URL का लौटाया HTTP status code, जो DevTools के Network panel या link checker में दिखता है, बताता है कि link टूटा है या नहीं। 200 OK: page मिला। 404 Not Found: नहीं मिला। 410 Gone: जानबूझकर हटाया गया (RFC 9110)। 5xx code या timeout गलत link नहीं, server या network की failure है: दोबारा कोशिश करें, फिर समय और URL के साथ report करें।
सिर्फ़ status काफ़ी नहीं: 200 लौटाने वाला "not found" page, जिसे soft 404 कहते हैं, simple link checker में pass हो जाता है, जबकि search engines उसे error मानते हैं। और #fragment कभी server तक नहीं पहुँचता, इसलिए anchor काम करता है या नहीं, यह सिर्फ़ browser दिखाता है।
Redirect एक 3xx response है जिसका Location header दूसरा URL बताता है, जिसे browser फिर request करता है। RFC 9110 स्थायी move के लिए 301 Moved Permanently और 308 Permanent Redirect, और अस्थायी move के लिए 302 Found और 307 Temporary Redirect परिभाषित करता है; Network panel में Preserve log हर hop दिखाता है। HTTP redirects वाला lesson और गहराई में जाता है; यहाँ जाँचें कि:
- Bookmarks और search results के पुराने URLs matching नए page पर पहुँचें, home page पर नहीं।
- एक hop हो, न chain न loop (loop "too many redirects" error पर खत्म होता है)।
?page=2&sort=priceजैसी query string बची रहे।- आपके अपने pages सीधे final URL से link करें; नीचे का trace काम करता है पर दो hops बर्बाद करता है।
GET http://shop.example.com/help/returns
301 Moved Permanently Location: https://shop.example.com/help/returns
GET https://shop.example.com/help/returns
301 Moved Permanently Location: https://shop.example.com/help/returns/
GET https://shop.example.com/help/returns/
200 OK page title: "Returns and refunds"href कहाँ point करता है?उत्तर: Page पर कोई
#fragmentपरिणाम: Anchor: browser में जाँचेंFragment कभी server तक नहीं पहुँचता। ठीक उसीidवाला element मौजूद हो, page उस तक scroll करे और कोई sticky header उसे न ढके।उत्तर: कोई page, इसी site पर या किसी दूसरी पर
प्रश्न 2: URL कौन-सा status code लौटाता है?उत्तर:
200प्रश्न 3: क्या यह वही page है जिसका वादा link text करता है?उत्तर: हाँ
परिणाम: काम करता linkयह भी जाँचें कि वह team के तय किए tab में खुलता है।पासउत्तर: नहीं
परिणाम: गलत target या soft 404"not found" या कोई असंबंधित page दिखाने वाला200भी defect है।फ़ेल
उत्तर:
301,302,307या308परिणाम: Redirect: हर hop देखेंठीक है अगर matching page पर200पर खत्म हो, बेहतर हो एक hop में। अपने links final URL पर point करें।सावधानीउत्तर:
404या410परिणाम: टूटा linkSource page, link text,hrefऔर status के साथ report करें।फ़ेलउत्तर:
5xxया कोई response नहींपरिणाम: Server या network errorLink सही हो सकता है। दोबारा कोशिश करें, फिर समय और URL के साथ server error report करें।सावधानी
उत्तर:
mailto:याtel:परिणाम: Mail या phone app खोलता हैसही address या number पहले से भरा हुआ।
Redirect के बाद final response को उसी तरह परखें: पहले उसका status, फिर content।
Worked example: release में category का नाम बदला
Release note: "Phones category अब Mobiles है। URLs /phones/... से /mobiles/... पर जाते हैं, और पुराने URLs permanently redirect होते हैं।" Tester के checks नीचे हैं; staging पर NAV-03 fail हुआ, जैसा bug report दर्ज करता है।
- NAV-01: menu item "Mobiles"
/mobilesखोलता है और वहाँ highlighted है। - NAV-02:
/phones→301→/mobiles→200, एक hop में। - NAV-03:
/phones/nova-12→301→/mobiles/nova-12, वही product, category नहीं। - NAV-04:
/phones?page=2→ Mobiles का page 2। - NAV-05: Nova 12 का breadcrumb "Home › Mobiles › Nova 12" है और उसके links काम करते हैं।
- NAV-06: search filter करें, page 2 पर जाएँ, product खोलें, Back दबाएँ → page 2, filter बना रहे।
- NAV-07: private window में
/mobiles/nova-12product खोलता है;/mobiles/no-such-phone404लौटाता है।
Title: पुराने product URLs product की जगह Mobiles category पर redirect होते हैं
URL: https://staging.shop.example.com/phones/nova-12
Build: web 3.8.0 on staging
Actual: 301 -> /mobiles -> 200 (category page)
Expected: 301 -> /mobiles/nova-12 -> 200 (Nova 12 product page)
Impact: हर product के bookmarks, shared links और search resultsआम गलतियाँ
- यह जाँचना कि link error नहीं देता, पर यह नहीं कि वह वही page खोलता है जिसका वादा उसका text करता है।
200पर भरोसा करना: soft 404 हर status check pass कर जाता है।- Navigation सिर्फ़ home page से click करके टेस्ट करना, कभी URL paste न करना, reload न करना या Back न दबाना।
- यह मान लेना कि anchors काम करते हैं क्योंकि page load हो गया; सिर्फ़ browser दिखाता है कि
#sectionअपना target ढूँढता है या नहीं। - "Broken link" को उसके page, link text,
hrefऔर status के बिना report करना। - Links एक बार जाँचना, जबकि हटाया गया content और external sites उन्हें बाद में तोड़ देते हैं।
QA का नज़रिया
Navigation checks तब शुरू होते हैं जब कोई story कोई page जोड़ती या move करती है: पूछें कि वह menus में कहाँ दिखेगा, उसका URL क्या है, क्या किसी पुराने URL को redirect करना है और कहाँ, और उससे क्या-क्या link करता है। Redirect plan के बिना URL बदलना एक requirement gap है; उसे release से पहले उठाएँ।
Regression के लिए एक छोटी navigation checklist रखें (menus, breadcrumbs, results से Back, signed-out deep link, 404 page) और सैकड़ों links automated check पर छोड़ दें। टूटे link को उसके source page, link text, href, status और final URL के साथ report करें, और redirect के लिए hops की list भी दें।
अभ्यास
Move हुए help centre के navigation tests plan करें
एक company अपना help centre /support/... से /help/... पर ले जाती है और एक breadcrumb व menu में "Help" item जोड़ती है। Release note कहता है: "पुराने support URLs नए URLs पर redirect होते हैं। हर article में table of contents है जो उसके sections से link करता है।" कम से कम आठ navigation checks उनके expected results के साथ लिखें।
फिर नीचे का staging trace पढ़ें: यह आपके कौन-से checks का जवाब देता है, और आप क्या report करेंगे?
Link on page: https://example.com/support/returns#refund-time
GET https://example.com/support/returns
302 Found Location: https://example.com/help
GET https://example.com/help
200 OK page title: "Help centre"- वे menu, breadcrumb और content links लिखें जिन्हें यह बदलाव छूता है।
- पुराने URLs, query strings और fragments के लिए redirect checks जोड़ें।
- Back, एक deep link और 404 page के checks जोड़ें।
- Trace की तुलना अपने expected results से करें।
मॉडल उत्तर दिखाएँ
उदाहरण checks: "Help" /help खोलता है और वहाँ highlighted है; article का breadcrumb "Home › Help › Returns" है और उसके links काम करते हैं; table of contents के links अपने sections तक scroll करते हैं; पुराने URLs एक hop में matching article पर redirect होते हैं और #section बनाए रखते हैं; /support/search?q=refund जैसा पुराना search URL अपनी query string बनाए रखता है; article links सीधे /help/... पर point करते हैं; article URL private window में खुलता है; Back search results पर लौटाता है; /help/no-such-article 404 लौटाता है।
Trace एक expectation पूरी करता है, यानी एक hop, और तीन तोड़ता है: 302 Found permanent move के लिए temporary redirect है (301 या 308 अपेक्षित; team से पुष्टि करें); यह /help/returns की जगह help home page पर खत्म होता है; और क्योंकि जब Location में fragment न हो तो browser पुराना fragment बनाए रखता है (RFC 9110), user /help#refund-time पर पहुँचता है, ऐसा section वहाँ है ही नहीं।
Report: "पुराने support article URLs article की जगह help home page पर temporary redirect होते हैं", साथ में source link, hops, expected 301 → /help/returns → 200 और bookmarks व search results पर impact। Trace सिर्फ़ redirect checks का जवाब देता है; बाकी के लिए browser चाहिए।
अक्सर पूछे जाने वाले सवाल
टूटे link और टूटे anchor में क्या फ़र्क है?
टूटा link ऐसे URL की ओर point करता है जिसे server serve नहीं कर सकता, और status code (404, 410) यह दिखाता है। टूटा anchor ऐसे #fragment की ओर point करता है जिसका page पर कोई matching id नहीं: page 200 के साथ load होता है और बस scroll नहीं होता, इसलिए यह सिर्फ़ browser में पकड़ में आता है।
क्या redirect defect है?
नहीं। Move के बाद पुराने URLs को चालू रखने का सही तरीका redirects ही हैं। Redirect तब defect है जब वह गलत page पर ले जाए, permanent move के लिए temporary code इस्तेमाल करे, या hops की chain या loop से गुज़रे। फिर भी आपके अपने pages के links final URL पर point करने चाहिए।
क्या हर link नए tab में खुलना चाहिए?
नहीं। Default, यानी वही tab, Back को चालू रखता है और user को खुद नया tab खोलने देता है। Teams आम तौर पर नए tabs external sites या form भरते समय खुलने वाले document जैसे cases के लिए रखती हैं, और ऐसे link को बताना चाहिए कि वह नया tab खोलता है। अपनी पसंद से नहीं, team के rule से जाँचें।
क्या link checking automate हो सकती है?
हाँ, और बड़ी site पर होनी चाहिए: कोई crawler या test script हर link request करके status codes report कर सकता है। लेकिन वह यह नहीं परख सकता कि destination link text से मेल खाता है, soft 404 भरोसे से नहीं पकड़ता, और Back या deep links को उनके context में टेस्ट नहीं करता, इसलिए इनके लिए छोटा manual pass रखें।
संदर्भ
- RFC 9110: HTTP SemanticsHTTP मेथड, हेडर फ़ील्ड, स्टेटस कोड और कंटेंट निगोशिएशन के अर्थ, वायर वर्ज़न से स्वतंत्र।
- HTML Living StandardHTML भाषा, नामित कैरेक्टर रेफ़रेंस (एंटिटी) और ब्राउज़रों के पार्सिंग नियमों सहित।
- Web Content Accessibility Guidelines (WCAG) 2.2W3C की Recommendation जो सुलभ वेब कंटेंट के लिए टेस्ट करने योग्य success criteria तय करती है — चार सिद्धांतों और तीन conformance स्तरों (A, AA, AAA) में व्यवस्थित।
- Accessible Rich Internet Applications (WAI-ARIA) 1.2W3C Recommendation जो ARIA roles, states और properties परिभाषित करती है — कस्टम विजेट अपना अर्थ सहायक तकनीक को कैसे बताते हैं।
Mutqan tools से अभ्यास करें
रीडायरेक्ट चेन (301/302/307/308) ट्रेस करें और हर हॉप, स्टेटस तथा अंतिम URL देखें।
किसी भी HTTP स्टेटस कोड का अर्थ, RFC संदर्भ और उसे कब इस्तेमाल करना है — सब एक जगह देखें।
किसी URL को protocol, host, port, path, क्वेरी पैरामीटर, fragment और क्रेडेंशियल में तोड़ें।
Percent-encoded URL और क्वेरी स्ट्रिंग को वापस पढ़ने योग्य टेक्स्ट में डिकोड करें।
क्वेरी स्ट्रिंग पार्स करें और बनाएँ — दोहराई गई key और bracket-array नोटेशन सहित।
और गहराई से
इस topic में आपकी प्रगति
प्रगति ट्रैक करने के लिए साइन इन करें
Topics पूर्ण चिह्नित करें, जहाँ छोड़ा था वहीं से जारी रखें और specialisation परीक्षाएँ खोलें।