मोबाइल वेब अनुप्रयोगों के परीक्षण की विशेषताएं

हाय, हैब्र।

मोबाइल वेब का परीक्षण कुछ हद तक डेस्कटॉप वेब के परीक्षण के समान है। एक ओर, ये वही HTML, CSS, जावास्क्रिप्ट और अन्य आकर्षण हैं जिन्हें हम देखने के आदी हैं। एक ही समस्या क्षेत्रों और ठेठ कीड़े। दूसरी ओर, मतभेद हैं।

इस लेख में, मैंने उन विशेषताओं की एक छोटी सूची को एक साथ रखा, जो मोबाइल वेब परियोजना पर परीक्षण करने के लिए महत्वपूर्ण हैं। सूची पूरी होने का दावा नहीं करती है, इसलिए टिप्पणियों में अपने पैराग्राफ के साथ इसे पूरक करें। मुझे केवल खुशी होगी। एकमात्र नियम यह है कि आइटम केवल मोबाइल वेब पर लागू होना चाहिए, और वेब पर बिल्कुल भी नहीं।



मैं इस तथ्य से शुरू करना चाहूंगा कि हमारे पास मोबाइल वेब परियोजनाओं का परीक्षण करने के लिए कम से कम दो तरीके हैं। सबसे पहले Chrome DevTools (या उनके डेवलपर टूल में अन्य ब्राउज़र का उपयोग करके मोबाइल ब्राउज़र का अनुकरण करना है, लेकिन यह एक कम लोकप्रिय तरीका है)। दूसरा वास्तविक मोबाइल ब्राउज़र का उपयोग करके वास्तविक डिवाइस पर परीक्षण करना है।

अधिकांश कार्यक्षमता डिवाइस के बिना जांच करना काफी संभव है, लेकिन फिर भी सभी नहीं। इसलिए, मैंने दो बड़े हिस्सों में चेक को तोड़ दिया - हम एक पीसी पर क्या जांचते हैं, और केवल हाथ में मोबाइल डिवाइस के साथ क्या करते हैं।

क्रोम DevTools

इसलिए, जैसा कि ऊपर बताया गया है, मोबाइल डिवाइस का उपयोग किए बिना मोबाइल परीक्षण एक पीसी पर किया जा सकता है। क्रोम ब्राउजर मोबाइल मोड में काम कर सकता है।

मोबाइल मोड

वेब पेज देखने के लिए मोबाइल मोड पर स्विच करने के लिए, आपको Chrome DevTools खोलना होगा और इस प्रतीक पर क्लिक करना होगा:



एक वेब एप्लिकेशन हमारे सामने खुलेगा जैसे कि यह एक मोबाइल डिवाइस से खुला था:



हम सूची से डिवाइस का प्रकार चुन सकते हैं, जिस काम के साथ हम अनुकरण करते हैं:

उपयोगकर्ता एजेंट

यह याद रखना महत्वपूर्ण है कि स्क्रीन आकार के अलावा, कुछ वेब एप्लिकेशन भी उपयोगकर्ता एजेंट के लिए उन्मुख हैं। मोबाइल मोड में इस तरह का एक एप्लीकेशन नेत्रहीन से अलग हो सकता है जो हम एक वास्तविक डिवाइस पर देखेंगे।

सब कुछ ठीक करने के लिए, आपको मोबाइल उपयोगकर्ता एजेंट सेट करके Chrome DevTools में नेटवर्क शर्तों को अतिरिक्त रूप से कॉन्फ़िगर करने की आवश्यकता है:



फिर पृष्ठ को फिर से लोड करें और वांछित परिणाम प्राप्त करें।

नेटवर्क थ्रॉटलिंग

Chrome का उपयोग करके, आप एप्लिकेशन को धीमे इंटरनेट और पूरी तरह से ऑफ़लाइन दोनों पर परीक्षण कर सकते हैं। ऐसा करने के लिए, समान नेटवर्क शर्तों टैब पर, आप नेटवर्क थ्रॉटलिंग पैरामीटर का चयन कर सकते हैं:



यह महत्वपूर्ण है अगर उपयोगकर्ता अक्सर खराब इंटरनेट की स्थितियों में एप्लिकेशन का उपयोग करते हैं, उदाहरण के लिए, एक नाविक।

यह सब क्रोम DevTools नहीं है। यह डेस्कटॉप वेब के साथ काम करने के लिए, और मोबाइल वेब के लिए एक महान उपकरण है। इस पर Google से उत्कृष्ट प्रलेखन है, निश्चित रूप से अंग्रेजी में ।

हमारे पास रूसी में क्रोम DevTools पर दो सप्ताह का ऑनलाइन पाठ्यक्रम है। प्रोफाइल पेज पर सभी जानकारी। चल रहा है। :)

Chrome DevTools के साथ मोबाइल वेब का परीक्षण करने के कई फायदे हैं। यह सरल है, तेज है, वास्तविक उपकरणों की आवश्यकता नहीं है और आपको सबसे स्पष्ट एप्लिकेशन बग की पहचान करने की अनुमति देता है। लेकिन, अफसोस, सभी नहीं।

उत्पादकता

पहला कारण कि आपको मोबाइल डिवाइस क्यों चुनना चाहिए: कमजोर डिवाइस पर एप्लिकेशन का परीक्षण करने की आवश्यकता।

आधुनिक वेब एप्लिकेशन सभी प्रकार के एनिमेशन, क्लाइंट पक्ष पर जटिल गणना, और इसी तरह से अतिभारित हैं। यदि डेस्कटॉप पर यह सब सामान सुचारू रूप से और खूबसूरती से काम कर सकता है (हालांकि हमेशा नहीं भी), तो कुछ सैमसंग जे-लाइन (उदाहरण के लिए, जे 2) पर पिछड़ सकता है।

मोबाइल ब्राउजर

दूसरा कारण है मोबाइल ब्राउजर। यह उन ब्राउज़रों के बारे में है जो सिस्टम में बने हैं और डिफ़ॉल्ट हैं। बहुत से लोग उनका उपयोग करते हैं और मोबाइल क्रोम स्थापित करने से परेशान नहीं होते हैं।

ऐसे ब्राउज़र के प्रतिनिधियों में से एक सैमसंग इंटरनेट ब्राउज़र है। यह आपके वेब एप्लिकेशन के संचालन की जांच करने के लायक है। खासतौर पर अगर "आपके उपयोगकर्ता किसके साथ बैठे हैं", यह दिखाने वाला कोई आँकड़े नहीं हैं। यदि ऐसे आंकड़े हैं और यह दावा करता है कि कोई भी इन ब्राउज़रों से आवेदन का दौरा नहीं करता है, तो सबसे अधिक संभावना है कि इसका परीक्षण करना आवश्यक नहीं है। हालांकि ... क्या होगा अगर वे प्रवेश नहीं करते हैं क्योंकि यह अभी टूट गया है? :)

इसके बारे में सोचने लायक है

पृष्ठभूमि में काम करें

मोबाइल वेब एप्लिकेशन एक मोबाइल ब्राउज़र में काम करता है, जो तार्किक है। उसी समय, मोबाइल उपकरणों की व्यवस्था की जाती है ताकि एप्लिकेशन सक्रिय मोड और पृष्ठभूमि में दोनों हो सके। उदाहरण के लिए, यदि हमने किसी अन्य एप्लिकेशन पर स्विच किया है या हमारे पास एक इनकमिंग कॉल है।

अब मान लीजिए कि किसी कारण से हमारे उपयोगकर्ता ने ब्राउज़र को पृष्ठभूमि के लिए खुले अनुप्रयोग के साथ स्थानांतरित कर दिया है। और फिर वापस आ गया। यहां कुछ उदाहरण दिए गए हैं जो गलत हो सकते हैं। उदाहरण के लिए, हमारे पास एक चैट एप्लिकेशन है और पत्राचार का पूरा इतिहास खो गया है। अब एक पृष्ठ पुनः लोड करने की आवश्यकता है। बुरा? बेशक! या हमारे पास एक नोटबुक एप्लिकेशन है। इनकमिंग कॉल से बाधित होने पर उपयोगकर्ता के पास कुछ जोड़ने का समय नहीं था। लौटते हुए, उन्होंने पाया कि जो उन्होंने लिखा था वह मिट गया। अब आपको इसे फिर से लिखना होगा। या शायद इस तरह के एप्लिकेशन का उपयोग न करना बेहतर है?

बैकग्राउंड के बाद एप्लिकेशन की मुख्य कार्यक्षमता कैसे काम करती है, यह जांचना सुनिश्चित करें।

इलेक्ट्रॉनिक कीबोर्ड

अक्सर, मोबाइल वेब उपयोगकर्ता पाठ दर्ज करने के लिए एक इलेक्ट्रॉनिक कीबोर्ड का उपयोग करते हैं। ऐसा होता है कि जब यह दिखाई देता है, तो एप्लिकेशन का लेआउट टूट जाता है। आमतौर पर यह समस्या इस बात से संबंधित होती है कि स्क्रीन के अनुपात की गणना कैसे की जाती है और वे इस लेआउट को कैसे प्रभावित करते हैं।



यह एप्लिकेशन के उन पृष्ठों पर विशेष ध्यान देने योग्य है जहां उपयोगकर्ता को बहुत अधिक डेटा भरना है: पंजीकरण पृष्ठ, कुछ प्रश्नावली, और इसी तरह।

स्क्रीन ओरिएंटेशन

मोबाइल एप्लिकेशन में दो प्रकार के स्क्रीन ओरिएंटेशन होते हैं: पोर्ट्रेट और लैंडस्केप। आप इसके बारे में यहां पढ़ सकते हैं।

यदि हम "अपने डिवाइस को साइड में रखते हैं", तो अधिकांश मोबाइल एप्लिकेशन नए स्क्रीन अनुपात में "रीड्रन" हो जाएंगे। यह मोबाइल ब्राउज़र पर भी लागू होता है। इस बिंदु पर, हमारे वेब एप्लिकेशन का लेआउट सबसे अप्रत्याशित स्थानों में भी टूट सकता है।



क्रोम DevTools दोनों मोड का अनुकरण कर सकते हैं, लेकिन फिर भी वेब एप्लिकेशन को फ़्लिप करने और आगे बढ़ाने की प्रक्रिया एक वास्तविक मोबाइल ब्राउज़र की तुलना में अलग तरह से होती है।

जिस तरह से हमारे आवेदन के बाद फिर से देखना होगा निश्चित रूप से बाहर की जाँच के लायक है। और, अधिमानतः, दोनों दिशाओं में: चित्र से परिदृश्य तक और परिदृश्य से चित्र तक।

मूल आवेदन में वेब पेज

एक अन्य सामान्य मामला: जब किसी एप्लिकेशन में मोबाइल वेब संस्करण और देशी एप्लिकेशन दोनों होते हैं। इस स्थिति में, ऐसा होता है कि कुछ पृष्ठ मूल एप्लिकेशन में स्थानांतरित नहीं होते हैं, लेकिन बस उन्हें वेबव्यू के रूप में प्रदर्शित करते हैं।

WebView एक घटक है जो आपको किसी एप्लिकेशन में वेब पेज एम्बेड करने की अनुमति देता है। अंतर्निहित ब्राउज़र बस उस एप्लिकेशन के भीतर प्रस्तुत होता है जिसे हम मोबाइल वेब पर देखेंगे। अक्सर, यह एक देशी एप्लिकेशन को विकसित करते समय बचाता है।

इस मामले में, यह न केवल ब्राउज़र में मोबाइल वेब के परिवर्तनों की जांच करने के लायक है, बल्कि मूल अनुप्रयोगों के अंदर भी है। बेशक, मोबाइल डिवाइस के बिना करने का कोई तरीका नहीं है।

प्रसंस्करण टैप करें

डेस्कटॉप वेब के विपरीत, जहां केवल एक माउस क्लिक है, एक मोबाइल एप्लिकेशन में इंटरफ़ेस के साथ बातचीत करने के कई तरीके हैं: स्पर्श, टैप, फ़्लिक, और इसी तरह। इस बारे में पढ़ने के लिए कई स्थान हैं, उदाहरण के लिए यहां ।

Chrome DevTools इनमें से कुछ कार्यों का अनुकरण कर सकता है। लेकिन, सबसे पहले, सभी नहीं। और, दूसरी बात, परिणाम हमेशा अनुकरण के दौरान समान नहीं होता है जब किसी वास्तविक डिवाइस का उपयोग किया जाता है।

भले ही आपका मोबाइल वेब एप्लिकेशन विशेष क्रियाओं के अनुरूप नहीं है, फिर भी यह कम से कम टैप के साथ इंटरफेस की बातचीत की जाँच करने लायक है। विशेष रूप से मेनू या किसी प्रकार के स्विच जैसी जगहें। लब्बोलुआब यह है कि नल किसी भी विशिष्ट निर्देशांक में नहीं आते हैं। यह एक पूरे क्षेत्र को हिट करता है। यदि आपके नियंत्रण पास हैं, तो नल एक साथ कई तत्वों को प्रभावित कर सकता है और उपयोगकर्ता को असुविधा का कारण बन सकता है।

कुल मिलाकर

मैंने मोबाइल वेब परियोजनाओं के परीक्षण की मुख्य विशेषताओं के बारे में बात की। यदि आप डेस्कटॉप वेब के परीक्षण से आते हैं, तो यह सूची काम में आने की संभावना है। बेशक, यह सब नहीं है कि इस मुद्दे के बारे में याद किया जा सकता है। यदि आप सूची को पूरक करना चाहते हैं, तो उन टिप्पणियों में लिखना सुनिश्चित करें जो आप करते हैं।

आपका ध्यान के लिए धन्यवाद।