क्रॉस ब्राउज़र टेस्टिंग का मतलब है यह जाँचना कि आपकी वेबसाइट उन ब्राउज़रों में, और उन डिवाइसों पर, सही दिखती और चलती है जिन्हें आपके विज़िटर इस्तेमाल करते हैं। असल में यह तीन rendering इंजन हैं (Chromium का Blink, Safari का WebKit और Firefox का Gecko), डेस्कटॉप और मोबाइल दोनों पर। इसका ज़्यादातर हिस्सा आप इंस्टॉल किए गए ब्राउज़र, Playwright और मोबाइल व्यू से मुफ़्त में कवर कर सकते हैं, और क्लाउड डिवाइस के लिए पैसे तभी दें जब आपको ऐसा असली हार्डवेयर चाहिए जो आपके पास नहीं है।
कौन-से ब्राउज़र टेस्ट करें
किसी ग्लोबल चार्ट से नहीं, अपने एनालिटिक्स से शुरू करें। B2B डैशबोर्ड ज़्यादातर डेस्कटॉप Chrome और Edge में खुल सकता है, जबकि किसी ऑनलाइन दुकान के ज़्यादातर ग्राहक iPhone Safari पर हो सकते हैं। पिछले तीन महीनों की ब्राउज़र और डिवाइस रिपोर्ट देखें और हर उस ब्राउज़र को कवर करें जिसका हिस्सा कुछ प्रतिशत से ज़्यादा है।
अगर अभी आपके पास डेटा नहीं है, तो यह सेट सभी इंजन और असली दुनिया के ज़्यादातर ट्रैफ़िक को कवर करता है:
| ब्राउज़र | इंजन | क्यों ज़रूरी है |
|---|---|---|
| Chrome (डेस्कटॉप और Android) | Blink | डेस्कटॉप और Android पर सबसे बड़ा हिस्सा |
| Safari (iPhone, iPad, Mac) | WebKit | हर iPhone यूज़र, और ज़्यादातर bugs जो “सिर्फ़ मोबाइल पर होते हैं” |
| Edge | Blink | Windows पर डिफ़ॉल्ट; आम तौर पर Chrome जैसा ही |
| Firefox | Gecko | अलग इंजन; वे धारणाएँ पकड़ता है जो असल में Chromium की आदतें हैं |
| Samsung Internet | Blink | Samsung फ़ोन में पहले से इंस्टॉल, अपने अलग अपडेट और dark mode के साथ |
दो इंजनों पर सबसे ज़्यादा ध्यान दें: WebKit, iPhone की वजह से, और Gecko, क्योंकि यह अकेला बड़ा इंजन है जो न Apple का है, न Google का।
हर ब्राउज़र में क्या जाँचें
क्रॉस ब्राउज़र bugs अक्सर कुछ तय जगहों पर ही मिलते हैं। हर अहम पेज पर यह लिस्ट जाँचें:
- लेआउट। Flexbox और grid के gap,
position: sticky,aspect-ratio, और पुराने ब्राउज़र वर्शन में container queries। - फ़ॉन्ट। वेब फ़ॉन्ट लोड हों, fallback फ़ॉन्ट का साइज़ मिलता-जुलता हो, लोड होते समय टेक्स्ट ग़ायब न हो।
- फ़ॉर्म। तारीख़ और समय चुनने वाले picker,
selectकी स्टाइलिंग, autofill के रंग, validation मैसेज, हर इनपुट के लिए सही मोबाइल कीबोर्ड। - मीडिया। वीडियो autoplay के नियम (ज़्यादातर मोबाइल ब्राउज़र इसे सिर्फ़ म्यूट होने पर चलने देते हैं), AVIF जैसे इमेज फ़ॉर्मेट,
srcsetसे चुनी गई इमेज। - स्क्रॉलिंग और viewport units। मोबाइल पर
100vhबनाम डायनामिक100dvh, scroll snapping, smooth scroll, overscroll। - JavaScript APIs। दो-एक साल से नई कोई भी चीज़: भरोसा करने से पहले सपोर्ट जाँच लें।
- इंटरैक्शन। touch डिवाइस पर सिर्फ़ hover से खुलने वाले मेन्यू, कीबोर्ड यूज़र्स के लिए focus outline, टैप करने लायक़ साइज़।
- Dark mode और ज़ूम। 200% ज़ूम पर और सिस्टम dark mode में पेज।
फ़्री टूल जो ज़्यादातर काम कर देते हैं
ब्राउज़र इंस्टॉल करें। Chrome, Edge और Firefox हर डेस्कटॉप OS पर चलते हैं। Safari सिर्फ़ macOS पर चलता है, और यही मुख्य वजह है कि बिना Mac वाले टेस्टरों को अतिरिक्त टूल चाहिए।
कोड लिखने से पहले सपोर्ट जाँचें। Baseline वेब फ़ीचर को बड़े ब्राउज़रों में “newly available” या “widely available” के रूप में मार्क करता है, और Can I use वर्शन के हिसाब से सपोर्ट की टेबल देता है। पहले इन्हें देख लेने से ज़्यादातर क्रॉस ब्राउज़र bugs होते ही नहीं।
Playwright से ऑटोमेट करें। Playwright एक ही टेस्ट स्क्रिप्ट को Windows, macOS और Linux पर Chromium, Firefox और WebKit में चलाता है, और मोबाइल डिवाइस भी एमुलेट कर सकता है। एक छोटी स्क्रिप्ट जो आपके दस सबसे अहम पेज तीनों इंजन में खोलकर स्क्रीनशॉट सेव करे, हर pull request पर ज़्यादातर regressions पकड़ लेगी।
रिस्पॉन्सिव जाँच के लिए मोबाइल व्यू इस्तेमाल करें। मोबाइल लेआउट की समस्याओं को अक्सर ब्राउज़र की समस्या समझ लिया जाता है। DevTools के device mode या Mobile View Extension जैसे मोबाइल व्यू एक्सटेंशन से इन्हें जल्दी अलग कर लें, फिर इंजन से जुड़ी वजहें ढूँढें। दोनों टूल का फ़र्क़ मोबाइल सिम्युलेटर एक्सटेंशन बनाम DevTools में समझाया गया है।
मोबाइल इंजन के लिए एमुलेटर इस्तेमाल करें। Xcode Simulator Mac पर असली iOS Safari देता है (गाइड); Android Studio का एमुलेटर असली Android Chrome देता है (गाइड)।
पेड क्रॉस ब्राउज़र टेस्टिंग टूल कब लें
क्लाउड टेस्टिंग सर्विस असली डिवाइस और कई ब्राउज़र वर्शन किराए पर देती हैं। इनके लिए पैसे देना तब सही है जब:
- आपके पास Mac नहीं है और iPhone Safari नियमित रूप से टेस्ट करना है
- ग्राहक पुराने ब्राउज़र वर्शन इस्तेमाल करते हैं जिन्हें आप एक साथ इंस्टॉल नहीं कर सकते
- क्लाइंट के कॉन्ट्रैक्ट के लिए किसी ख़ास फ़ोन मॉडल पर टेस्ट करना है
- आपके ऑटोमैटिक टेस्ट असली मोबाइल हार्डवेयर पर चलने चाहिए
छोटी साइट के लिए रिलीज़ वाले हफ़्ते की जाँच के लिए एक महीने का प्लान आम तौर पर काफ़ी है; कभी-कभार की जाँच के लिए फ़्री ट्रायल भी काफ़ी काम आते हैं।
हल्का-फुल्का क्रॉस ब्राउज़र रूटीन
- बनाते समय: नया फ़ीचर इस्तेमाल करने से पहले Baseline देखें; कोड करते हुए मोबाइल व्यू में प्रीव्यू करें।
- हर pull request पर: Chromium, Firefox और WebKit में Playwright स्क्रीनशॉट चलाएँ।
- रिलीज़ से पहले: Safari (Mac या simulator), Firefox और Android पर Chrome में मुख्य फ़्लो क्लिक करके देखें।
- रिलीज़ के बाद: error monitoring और एनालिटिक्स में ब्राउज़र के हिसाब से errors पर नज़र रखें।
रिलीज़ से पहले की मोबाइल जाँच मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट में विस्तार से है।
अक्सर पूछे जाने वाले सवाल
अपनी वेबसाइट को अलग-अलग ब्राउज़र में मुफ़्त में कैसे टेस्ट करें?
Chrome, Edge और Firefox इंस्टॉल करें, किसी भी OS पर WebKit चलाने के लिए Playwright इस्तेमाल करें, और फ़ोन के साइज़ के लिए DevTools या मोबाइल व्यू एक्सटेंशन। Mac हो तो Xcode Simulator से असली iOS Safari भी मिल जाता है।
अगर Chrome में टेस्ट कर लिया, तो क्या Edge में भी ज़रूरी है?
Edge का इंजन Chrome वाला ही है, इसलिए फ़र्क़ बहुत कम मिलता है। एक सरसरी जाँच काफ़ी है, जब तक आपके यूज़र Edge के ख़ास फ़ीचर या एंटरप्राइज़ पॉलिसी इस्तेमाल न करते हों।
आजकल क्रॉस ब्राउज़र bugs की सबसे आम वजह क्या है?
किसी CSS या JavaScript फ़ीचर को तब इस्तेमाल करना, जब वह अभी हर उस ब्राउज़र में सपोर्ट नहीं है जहाँ आपके यूज़र हैं। फ़ीचर अपनाने से पहले Baseline स्टेटस देख लेने से इनमें से ज़्यादातर रुक जाते हैं।