𝗔 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗖𝗿𝗼𝘀𝘀-𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗖𝗵𝗲𝗰𝗸𝗹𝗶𝘀𝘁
ഒരു ബ്രൗസറിൽ മികച്ച രീതിയിൽ കാണപ്പെടുന്ന ലേഔട്ട് മറ്റൊരു ബ്രൗസറിൽ തകരാറിലാകാം. ചെറിയ സ്ക്രീനുള്ള ഒരു ബജറ്റ് ആൻഡ്രോയിഡ് ഫോണോ അല്ലെങ്കിൽ 125% സൂം ഉപയോഗിക്കുന്ന പഴയൊരു ലാപ്ടോപ്പോ നിങ്ങളുടെ ഡിസൈനിനെ നശിപ്പിച്ചേക്കാം.
ടെസ്റ്റിംഗിനെ വെറുമൊരു അവസാന ഘട്ട പരിശോധനയായി കാണരുത്. അതിനെ കൃത്യമായ ഒരു ചെക്ക്ലിസ്റ്റ് ആയി പരിഗണിക്കുക.
ഉയർന്ന റിസ്കുള്ള മേഖലകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക:
- ഫോമുകളും ഇൻപുട്ടുകളും (Forms and inputs)
- നാവിഗേഷൻ മെനുകൾ (Navigation menus)
- ലേഔട്ട് ഷിഫ്റ്റുകൾ (Layout shifts)
- ഫോണ്ട് ലോഡിംഗ് (Font loading)
- JavaScript ഇന്ററാക്ഷനുകൾ
എല്ലാ ബ്രൗസറുകളും ടെസ്റ്റ് ചെയ്യാൻ ശ്രമിക്കുന്നത് ഒഴിവാക്കുക. അത് സമയം പാഴാക്കും. പകരം ഒരു ലളിതമായ മാട്രിക്സ് ഉപയോഗിക്കുക:
- ഡെസ്ക്ടോപ്പിൽ ഒരു Chromium ബ്രൗസർ
- ഒരു Safari എൻവയോൺമെന്റ്
- ഒരു Firefox എൻവയോൺമെന്റ്
- ഒരു ആൻഡ്രോയിഡ് ഫോൺ
- ഒരു iPhone
ആളുകൾ നിങ്ങളുടെ ഉൽപ്പന്നം യഥാർത്ഥത്തിൽ എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നതിനനുസരിച്ച് നിങ്ങളുടെ ടെസ്റ്റിംഗിനെ ക്രമീകരിക്കുക. ഒരു പേജ് എല്ലാ സ്ഥലങ്ങളിലും ഒരേപോലെ ഇരിക്കണമെന്നില്ല. അത് ഉപയോഗിക്കാൻ എളുപ്പമുള്ളതും, വായിക്കാൻ കഴിയുന്നതും, സുസ്ഥിരവുമാകണം.
നിങ്ങളുടെ ചെക്ക്ലിസ്റ്റിൽ ഇവ ഉൾപ്പെടുത്തണം:
- ബ്രൗസറും OS-ഉം
- വ്യൂപോർട്ട് വീതി (Viewport width)
- സൂം ലെവൽ (Zoom level)
- പ്രത്യേക യൂസർ ഫ്ലോകൾ (Specific user flows)
ലിസ്റ്റ് ചെറുതായി സൂക്ഷിക്കുക. ഒരു ടെസ്റ്റിന് അരദിവസം എടുക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ ടീം അത് ഒഴിവാക്കിയേക്കാം. ഒരു നല്ല പരിശോധന ഒരു മണിക്കൂറിൽ താഴെ സമയം മാത്രമേ എടുക്കാവൂ.
ഘടനയിൽ നിന്ന് തുടങ്ങുക. നിങ്ങളുടെ ഹോംപേജ്, കണ്ടന്റ് പേജുകൾ, ഫോമുകൾ എന്നിവ പരിശോധിക്കുക. ഡെസ്ക്ടോപ്പിൽ നിന്ന് മൊബൈൽ വീതിയിലേക്ക് വിൻഡോയുടെ വലിപ്പം മാറ്റുക. സൂം ചെയ്യുക. താഴെ പറയുന്ന പ്രശ്നങ്ങൾ ശ്രദ്ധിക്കുക:
- ബട്ടണുകൾ അസ്വാഭാവികമായി വരി മാറുന്നത് (Buttons that wrap awkwardly)
- ഹെഡിംഗുകൾ മുറിഞ്ഞുപോകുന്നത് (Headings that get cut off)
- ഹൊറിസോണ്ടൽ സ്ക്രോളിംഗ് (Horizontal scrolling)
- കണ്ടന്റ് മറയ്ക്കുന്ന സ്റ്റിക്കി ഹെഡറുകൾ (Sticky headers covering content)
- പ്രധാനപ്പെട്ട കൺട്രോളുകൾ മറയ്ക്കുന്ന മോഡലുകൾ (Modals that hide important controls)
അടുത്തതായി, ഇന്ററാക്ഷനുകൾ ടെസ്റ്റ് ചെയ്യുക. ബ്രൗസറുകൾ ഫോമുകൾ കൈകാര്യം ചെയ്യുന്നത് വ്യത്യസ്ത രീതിയിലാണ്. ടെക്സ്റ്റ് ഇൻപുട്ടുകൾ, പാസ്വേഡ് മാനേജറുകൾ, ഡേറ്റ് പിക്കറുകൾ, ഫയൽ അപ്ലോഡുകൾ എന്നിവ പരിശോധിക്കുക. ഓട്ടോഫിൽ (autofill) നിങ്ങളുടെ ലേഔട്ടിനെ എങ്ങനെ ബാധിക്കുന്നു എന്ന് പരിശോധിക്കുക.
ടാബുകൾ, അക്കോർഡിയനുകൾ, സെർച്ച് സജഷനുകൾ തുടങ്ങിയ JavaScript ഉപയോഗിക്കുന്ന ഘടകങ്ങൾ ടെസ്റ്റ് ചെയ്യുക. ഒരു പേജിൽ കൺസോളിൽ (console) തെറ്റുകൾ ഒന്നും കാണിക്കാത്തപ്പോഴും ഒരു ബട്ടൺ പ്രവർത്തിക്കാതിരിക്കാം.
അവസാനമായി, നിങ്ങളുടെ സൈറ്റിനെ സ്ട്രെസ് ടെസ്റ്റ് ചെയ്യുക:
- നെറ്റ്വർക്ക് സ്പീഡ് കുറച്ചു നോക്കുക (Throttle your network speed)
- കാഷെ (cache) ഡിസേബിൾ ചെയ്യുക
- ഇൻപുട്ട് ഫീൽഡുകളിൽ വളരെ നീളമുള്ള ടെക്സ്റ്റ് ഉപയോഗിക്കുക
- ഓവർഫ്ലോ പരിശോധിക്കാൻ സാധാരണയേക്കാൾ കൂടുതൽ ഐറ്റങ്ങൾ ലോഡ് ചെയ്യുക
ഏറ്റവും മികച്ച ചെക്ക്ലിസ്റ്റ് വിരസമായ ഒന്നായിരിക്കണം. അത് ലളിതമായ ഒരു 'പാസ്' അല്ലെങ്കിൽ 'ഫെയിൽ' ലിസ്റ്റ് ആയിരിക്കണം. ഓരോ തവണ റിലീസ് ചെയ്യുമ്പോഴും അത് ഉപയോഗിക്കുക. ഒരു ബഗ് പ്രൊഡക്ഷനിൽ എത്തിയാൽ, ആ പ്രത്യേക പരാജയം നിങ്ങളുടെ ചെക്ക്ലിസ്റ്റിൽ ചേർക്കുക.
നിങ്ങളുടെ ടീം മറന്നുപോകുന്ന കാര്യങ്ങൾ ഓർമ്മിപ്പിക്കാൻ കഴിയുമെങ്കിൽ മാത്രമേ ഒരു ചെക്ക്ലിസ്റ്റ് പ്രയോജനപ്രദമാകൂ.
Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a