𝗔 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗖𝗿𝗼𝘀𝘀-𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗖𝗵𝗲𝗰𝗸𝗹𝗶𝘀𝘁
एखादा लेआउट एका ब्राउझरमध्ये अगदी व्यवस्थित दिसू शकतो आणि दुसऱ्यामध्ये मात्र बिघडू शकतो. अरुंद स्क्रीन असलेला स्वस्त अँड्रॉइड फोन किंवा १२५% झूम असलेला जुना लॅपटॉप तुमचे डिझाइन खराब करू शकतो.
टेस्टिंगला केवळ एक अस्पष्ट अंतिम प्रक्रिया समजू नका. त्याला एक विशिष्ट चेकलिस्ट म्हणून पहा.
उच्च-जोखीम असलेल्या क्षेत्रांवर लक्ष केंद्रित करा:
- फॉर्म्स आणि इनपुट्स (Forms and inputs)
- नेव्हिगेशन मेनू (Navigation menus)
- लेआउट शिफ्ट्स (Layout shifts)
- फॉन्ट लोडिंग (Font loading)
- JavaScript इंटरॅक्शन्स (JavaScript interactions)
प्रत्येक ब्राउझर टेस्ट करण्याचा प्रयत्न करणे थांबवा. त्यातून वेळ वाया जातो. त्याऐवजी एक 'लीन मॅट्रिक्स' (lean matrix) वापरा:
- डेस्कटॉपवर एक क्रोमियम (Chromium) ब्राउझर
- एक सफारी (Safari) एन्व्हायर्नमेंट
- एक फायरफॉक्स (Firefox) एन्व्हायर्नमेंट
- एक अँड्रॉइड फोन
- एक आयफोन (iPhone)
लोक तुमच्या उत्पादनाचा प्रत्यक्षात वापर कसा करतात, त्यानुसार तुमचे टेस्टिंग प्लॅन करा. एखादे पेज सर्वत्र अगदी सारखे दिसण्याची गरज नाही. ते वापरण्यायोग्य (usable), वाचण्यायोग्य (readable) आणि स्थिर (stable) असणे आवश्यक आहे.
तुमच्या चेकलिस्टमध्ये खालील गोष्टींचा समावेश असावा:
- ब्राउझर आणि OS
- व्ह्यूपोर्ट विड्थ (Viewport width)
- झूम लेव्हल (Zoom level)
- विशिष्ट युजर फ्लो (Specific user flows)
यादी संक्षिप्त ठेवा. जर एका टेस्टसाठी अर्धा दिवस लागला, तर तुमची टीम ती वगळेल. एक चांगली तपासणी एक तासापेक्षा कमी वेळात पूर्ण झाली पाहिजे.
संरचनेपासून सुरुवात करा. तुमचे होमपेज, कंटेंट पेजेस आणि फॉर्म्स तपासा. तुमच्या विंडोचा आकार डेस्कटॉपपासून मोबाईल विड्थपर्यंत बदलून पहा. झूम इन करा. खालील समस्यांकडे लक्ष द्या:
- बटणे विचित्र पद्धतीने रॅप (wrap) होणे
- हेडलाईन्स कापल्या जाणे
- हॉरिझॉन्टल स्क्रोलिंग (Horizontal scrolling)
- कंटेंट झाकणारे स्टिकी हेडर्स (Sticky headers)
- महत्त्वाचे कंट्रोल्स लपवणारे मोडाल्स (Modals)
त्यानंतर, इंटरॅक्शन्स तपासा. ब्राउझर्स फॉर्म्सना वेगवेगळ्या प्रकारे हाताळतात. टेक्स्ट इनपुट्स, पासवर्ड मॅनेजर्स, डेट पिकर्स आणि फाईल अपलोड्स तपासा. ऑटोफिलमुळे तुमच्या लेआउटवर काय परिणाम होतो ते पहा.
टॅब्स, ॲकॉर्डियन्स आणि सर्च सजेशन्स सारख्या JavaScript-हेवी कंपोनंट्सची चाचणी घ्या. पेजमध्ये कन्सोलमध्ये (console) कोणतीही एरर दिसत नाही, तरीही एखादे बटण काम करत नसू शकते.
शेवटी, तुमच्या साइटची स्ट्रेस टेस्ट (stress test) करा:
- तुमचा नेटवर्क स्पीड कमी करून पहा (Throttle)
- कॅशे (cache) डिसेबल करा
- इनपुट फील्डमध्ये खूप लांब मजकूर वापरा
- ओव्हरफ्लो तपासण्यासाठी नेहमीपेक्षा जास्त आयटम्स लोड करा
सर्वोत्तम चेकलिस्ट कंटाळवाणी असते. ती 'पास' किंवा 'फेल' अशी साधी यादी असावी. प्रत्येक वेळी रिलीज करताना ती वापरा. जेव्हा एखादा बग प्रोडक्शनमध्ये (production) जातो, तेव्हा त्या विशिष्ट त्रुटीला तुमच्या चेकलिस्टमध्ये जोडा.
तुमची टीम काय विसरली आहे, हे जर चेकलिस्ट लक्षात ठेवत असेल, तरच ती उपयुक्त ठरते.
Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a