responsive web design testing
V dnešnom veku používanie mobilných zariadení na prístup na internet narástlo a stalo sa veľmi populárnym. Takmer každý užívateľ internetu túži po mobilnej verzii webu.
Väčšina webových stránok však nie je tak optimalizovaná, ako by mala byť pre mobilné zariadenia. Testéri by mali vykonať mobilný responzívny test na responzívnych dizajnoch.
Tradičné softvérové produkty sa na akomkoľvek zariadení vykresľujú v podstate rovnako.
Microsoft Office, napríklad , vyzerá rovnako na každom osobnom počítači. Predstavte si, že program Microsoft Word beriete presne tak, ako je spustený na vašom počítači, a pozeráte ho na zariadení iPhone4. Ponuky a tlačidlá sa zobrazia nepatrne, inak uvidíte iba roh obrazovky a je potrebné používať rozsiahle posúvače. Tak či onak, aplikácia sa stáva v podstate nepoužiteľnou.
Táto frustrujúca skúsenosť je presne to, čím si každý dizajnér prechádza, keď sa pokúša navrhnúť pre web.
Oprava problému je niečo, čo sa nazýva „responzívny dizajn“, čo je technika, pri ktorej sa webové stránky pýtajú od prehliadača, aké je rozlíšenie, a potom elegantne upravia používateľské prostredie na základe dostupnej nehnuteľnosti na obrazovke. Zrazu nie je možné presne vedieť, ako bude váš softvér vyzerať vo výrobe.
To znamená testovaciu stratégiu (a automatizačnú stratégiu), ktorá musí byť schopná experimentovať a učiť sa, čo „vyzerá dobre“ a čo nie, v rôznych rozlíšeniach.
Čo sa dozviete:
- Sprievodca pre začiatočníkov pri testovaní návrhov responzívnych webových stránok
- Čo je responzívny webový dizajn?
- Výhody responzívneho dizajnu:
- Hlavné komponenty responzívneho dizajnu webových stránok:
- Príklady responzívneho webdizajnu
- Ako otestovať responzívny web
- Príklady testovacích scenárov pre responzívne testovanie webových stránok:
- Nástroje na testovanie responzívneho webu
- Výzvy pri testovaní responzívneho dizajnu a možných riešení
- Tipy na responzívne testovanie webu
- Záver
Sprievodca pre začiatočníkov pri testovaní návrhov responzívnych webových stránok
Keď sa pokúsime otvoriť webovú stránku, server zobrazí „ m.subdomény „Na identifikáciu, z akého mobilného zariadenia požiadavka pochádza. Na základe toho presmeruje používateľa na zodpovedajúcu mobilnú verziu.
Aby to bolo 100% efektívne, každé zariadenie by malo mať svoj vlastný dizajn webových stránok špeciálne navrhnutých pre tento účel; falebo príklad,iný špecifický dizajn pre Blackberry, iPhone, iPad atď., pričom sa zohľadní veľkosť a rozlíšenie obrazovky.
Odlišná webová verzia pre každé rozlíšenie a zariadenie však nie je praktická. The Ethan Marcotte prišiel s novým prístupom - Responsive Web Design ( RWD ) - ktorý rieši tento problém.
Naše odporúčanie
# 1) Prehliadač LT
LT Prehliadač pomáha používateľom testovať a ladiť svoje webové stránky vo viac ako 45 výrezoch zariadení. Otestujte si svoje webové stránky na rôznych predinštalovaných portoch zobrazenia mobilných a stolných zariadení pomocou prehliadača LT Browser, ktorý je vhodný pre ladenie mobilného zobrazenia.
Jednoducho zadajte adresu URL svojej webovej stránky a vyberte zariadenie, na ktorom chcete web otestovať. Môžete si súčasne vybrať dve zariadenia na porovnanie bok po boku.
Nielen testovanie, ale používatelia môžu ladiť svoje webové stránky aj na cestách pomocou zabudovaných nástrojov DevTools, ktoré ponúka LT Browser.
Najlepšie na tom je, že používatelia si môžu vytvoriť vlastné zariadenie na základe svojich požiadaviek, vďaka ktorým je LT Browser našou prvou voľbou pre responzívne testovanie.
=> Navštívte prehliadač LTČo je responzívny webový dizajn?
RWDciele pre webové stránky, aby reagovali na svoje zariadenie, rozlíšenie a dokázali sa správne vykresliť a prispôsobiť. Napríklad, ak používateľ prepne z počítača / notebooku na iPad, web by mal automaticky prispôsobiť zmeny rozlíšenia, ako je veľkosť obrázka atď., podľa schopností príslušného zariadenia.
V skratke,Responzívny dizajnje „Jeden web pre každú obrazovku“ .
Nasledujúca obrazovka jepríkladRWD:
Poznámka: Reálny časpríkladresponzívneho webu je www.fpl.com
V RWD je webová stránka navrhnutá tak, aby poskytovala vynikajúci dojem používateľa prostredníctvom ľahkej navigácie, prehľadného a jednoduchého používateľského rozhrania atď. Responzívne webové stránky sa ľahko prispôsobujú a fungujú vo všetkých rozlíšeniach, prehľadávačoch, veľkostiach obrazovky, hardvéri a operačných systémoch.
- Responzívne webové stránky sú kódované v jazykoch PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) a mnohých nových rámcoch, ktoré sú veľmi užitočné pri vývoji responzívnych návrhov.
- Vďaka funkciám CSS a HTML je možné automaticky meniť rozlíšenie obrazovky a veľkosť obrázkov.
- RW design používa hraničné body na identifikáciu rozloženia stránky. Každý dizajn sa používa v rôznych bodoch prerušenia. Jeden návrh sa použije cez bod prerušenia, zatiaľ čo iný návrh sa použije pod bodom prerušenia. Tieto zarážky sú všeobecne založené na šírke prehľadávačov.
- Pri navrhovaní responzívneho webu vývojári berú do úvahy obsah, dizajn a výkon webu vo všetkých zariadeniach zabezpečiť použiteľnosť .
Schéma je presnou podobou toho, ako sa obsah prispôsobuje prostrediu a správaniu zariadenia.
Poznámka : Okrem RWD existuje ešte jeden prístup Adaptívny webový dizajn ( AWD ) . V prístupe AWD bude pre každé zariadenie existovať špecifický dizajn. AWD však nemusí byť vždy vhodné. Okrem toho návrh webov AWD vyžaduje v porovnaní s webmi RWD viac času a peňazí.
Výhody responzívneho dizajnu:
# 1) Užívateľská skúsenosť: Na základe zariadenia, z ktorého pristupujeme k RW, skrýva neobvyklé prvky a pomáha používateľom rýchlejšie dosiahnuť svoje ciele.Napríklad:ak otvoríme RW z mobilu, skryje nedôležité prvky a urýchli načítanie webových stránok.
#dva) Zdieľanie alebo prepojenie: Pre RW sa pre rôzne zariadenia používa iba jedna URL. Pretože iba jedna adresa URL zhromažďuje všetky údaje a informácie z rôznych zariadení, poskytuje používateľom lepšie UX.
# 3) Pre RW sa vyžaduje minimálna alebo minimálna údržba.
# 4) RW rozloženie je plynulé.
Rozdiely medzi responzívnym webovým dizajnom a adaptívnym webovým dizajnom:
RWD a AWD spolu úzko súvisia.
- RWD reaguje na zmeny rýchlo a pozitívne, zatiaľ čo AWD je možné ľahko upraviť na nový účel.
- RWD má viac rozložení fluidnej mriežky a AWD má viac rozložení pevnej šírky.
- Obrázky na RWD sa nazývajú kontextové.
Hlavné komponenty responzívneho dizajnu webových stránok:
Responzívny webový dizajn má tri hlavné komponenty:
# 1) Flexibilné rozloženia: Vytváranie webových stránok s flexibilnou mriežkou, ktorú je možné ľahko dynamicky meniť na ľubovoľnú šírku.
#dva) Dotazy na médiá: Poskytnite rôzne štýly prehľadávačov a zariadení na základe kontextu, ako je napríklad orientácia zariadenia, výrez atď.
# 3)Flexibilné médium: Pretože sa mení veľkosť výrezov, je podľa potreby potrebné zmeniť aj veľkosť média (obrázky, videá atď.).
Poznámka : „Výrez“ je oblasť prehľadávača, kde sa zobrazuje skutočný obsah webovej stránky. Výrez nezahŕňa panely nástrojov, karty atď.
Príklady responzívneho webdizajnu
Príklad č. 1)
Otvorte odkaz www.fpl.com z rôznych zariadení a sledujte adresu URL. URL responzívneho webu zostáva pre všetky zariadenia rovnaká.
do) Pohľad na RW z počítača alebo notebooku (veľká obrazovka)
b) Pohľad na RW z tabletu (stredná veľkosť obrazovky)
c) Pohľad na RW z mobilu (malá obrazovka)
Príklad č. 2)
Otvorte web www.yepme.com z notebooku a aj z mobilu a porovnaj URL. Toto yepme.com odkaz nie je responzívny odkaz.
do) Pohľad na nereagujúcu webovú stránku z počítača alebo notebooku
ako používať selektor css v seléne
b) Pohľad na nereagujúci web z mobilu
Ako otestovať responzívny web
Znamená to test responzívneho dizajnu testovanie webových stránok alebo URL z rôznych zariadení. Prakticky nie je možné responzívny web úplne otestovať, pretože je potrebné nastaviť rôzne systémy pre rôzne veľkosti obrazoviek.
Možným spôsobom pre responzívny test je zmena veľkosti veľkosti okna prehliadača podľa testovacieho scenára.
Niektoré prehľadávače, napríklad IE a Safari, poskytujú doplnky alebo rozšírenia prehľadávača, ktoré vám pomôžu zobraziť oblasť výrezu v pixeloch. Toto uľahčuje testovanie získaním požadovanej veľkosti obrazovky úpravou pixelov.
Ostatné prehliadače ako Chrome poskytujú softvér alebo program s názvom „Emulátor“ ktoré pomôžu zmeniť funkcie obrazovky a prostredie podľa požadovaného zariadenia potrebného na testovanie.
Poznámka: „Emulátor“ je softvér alebo program poskytovaný v rámci prehľadávača, vďaka ktorému sa hostiteľský systém (aktuálny prehľadávač) správa ako hosťovský systém (prehľadávač požadovaného zariadenia, ktoré sa má testovať na požadovanú veľkosť obrazovky).
Aj keď vám emulátory nemôžu poskytnúť presné prostredie potrebné na testovanie, sú cenovo efektívnym riešením na testovanie RW na vysokej úrovni.
Príklady testovacích scenárov pre responzívne testovanie webových stránok:
Responzívny tester webového dizajnu by sa mal ubezpečiť, že responzívny dizajn spĺňa všetky nižšie uvedené podmienky testovacie scenáre aby sa zabezpečilo, že ide o bezchybný responzívny dizajn.
# 1) Odkaz alebo adresa URL responzívnej webovej stránky by mala byť rovnaká pre všetky prehľadávače v každom zariadení bez ohľadu na rozlíšenie obrazovky.
Predpokladajme www.abc.com je responzívny web. Ak ho otvoríme na notebooku a na mobilnom telefóne, potom by adresa URL mala byť rovnaká na oboch zariadeniach. Webové stránky otvorené v mobilnom prehliadači by sa nemali začínať znakom www.m.abc.com alebo www.mobile.abc.com
Príklad: Otvorte webovú stránku www.kotak.com z notebooku a tiež to isté otvorte z mobilu a sledujte adresu URL v oboch zariadeniach. Adresa URL nie je rovnaká pre obe zariadenia.
Pod snímkou sa zobrazuje, ako sa mení adresa URL pre a nereagujúci web v rôznych zariadeniach ako notebook a mobil.
Otvorte webovú stránku www.w3schools.com z notebooku a z mobilu a skontrolujte adresy URL. Malo by to byť rovnaké pre obe zariadenia.
Nasledujúca snímka ukazuje, že adresa URL zostáva rovnaká pre responzívny web v rôznych zariadeniach:
#dva) Umiestnenie zobrazenia obsahu (obrázky, odkazy, ponuky atď.) Responzívneho webu by sa malo meniť dynamicky podľa zmeny rozlíšenia obrazovky. To znamená, že ak zmeníme rozlíšenie obrazovky z veľkosti notebooku na mobil, potom by sa zobrazenie možností ponuky malo dynamicky meniť.
Príklad: Otvorte odkaz www.fpl.com z notebooku a kliknite na ponuku v pravom hornom rohu okna. Možnosti ponuky sa zobrazujú takto:
mp3 hudba na stiahnutie bezplatná aplikácia pre Android
Otvorené www.fpl.com z mobilu a kliknite na ponuku v pravom hornom rohu okna. Možnosti ponuky sú uvedené nižšie:
Poznámka: Tento scenár je možné testovať aj pomocou emulátorov prehľadávača (Bývalý:chróm).
Otvorte webovú stránku www.fpl.com cez plochu a sledujte, ako sa zobrazujú možnosti ponuky. Pozri snímku nižšie:
Teraz zmeňte veľkosť okna prehliadača na veľkosť obrazovky pre mobilné zariadenia a potom skontrolujte zobrazenie možností ponuky. Pozri snímku nižšie:
# 3) Adresy URL responzívnej webovej stránky by mali byť tiež špecifické pre konkrétne rozlíšenie.
Nevyhnutná podmienka na otestovanie tohto scenára: Požiadajte vývojára, aby vložil akýkoľvek čiastkový odkaz na webovú stránku reagujúcu na testovanie, kde tento odkaz nereaguje.
Napríklad, môže vývojár vložiť odkaz www.snapdeal.com na náš testovací web.
Teraz otvorte webovú stránku s responzívnym testovaním z mobilného telefónu a kliknite na odkaz, ktorý je uvedený v predbežnej požiadavke. Potom by sa adresa URL podradeného odkazu mala zmeniť na https://m.snapdeal.com .
# 4) Rovnaký scenár je možné testovať aj na prenosnom počítači. Otvorte RW z počítača alebo notebooku a kliknite na podradený odkaz (uvedený v požiadavke testovacieho scenára tri), ktorý nereaguje. Adresa URL podradeného odkazu by sa nemala meniť (keďže tento scenár testujeme z prenosného počítača, adresa URL by mala zostať rovnaká).
# 5) Nevyhnutná podmienka na otestovanie tohto scenára: Požiadajte vývojára, aby vložil akýkoľvek podradený odkaz,napríklad, www.paytm.com na testovacie miesto. Mobilné zariadenie, v ktorom sa chystáte tento scenár vykonať, by malo mať v mobile nainštalovanú príslušnú aplikáciu Paytm.
Teraz otvorte náš testovací responzívny web z mobilu a kliknite na odkaz „paytm“. Potom by sa mala otvoriť aplikácia Paytm nainštalovaná v mobile. (Používateľ by nemal byť presmerovaný na webovú stránku v prehliadači alebo v inom okne; otvorená by mala byť iba aplikácia.)
# 6) Obrázky na responzívnej webovej stránke sú špecifické pre rozlíšenie. Znamená to, že rozlíšenie obrázka vloženého do kódu responzívneho webu určeného pre mobilnú kompatibilitu sa líši od rozlíšenia stolného počítača alebo tabletu. Každá veľkosť obrazovky by mala mať v dizajne svoj konkrétny obrázok.
Nevyhnutná podmienka na otestovanie tohto scenára: Testovanie a kontrola rozlíšenia obrázkov môže byť náročná úloha. Požiadajte vývojára, aby na responzívny web vložil tri rôzne obrázky osobitne pre mobil, tablet a počítač.
Otvorte webovú stránku s responzívnym dizajnom testovania z počítača, tabletu a mobilného telefónu. Obrázky na responzívnej webovej stránke by mali byť odlišné pre všetky tri zariadenia.
(ALEBO)
Otvorte testovací disk RW z pracovnej plochy a skontrolujte obrázok na webovej stránke. Teraz zmeňte veľkosť okna na okno tabletu a skontrolujte obrázok. To by sa malo líšiť od obrázku zobrazeného pre veľkosť obrazovky počítača. Teraz môžete zmeniť veľkosť okna na veľkosť obrazovky pre mobil a skontrolovať obrázok. Tento obrázok by sa mal tiež líšiť od vyššie uvedených dvoch obrázkov.
Príklad: Otvorte responzívny web www.fpl.com z pracovnej plochy; kliknite pravým tlačidlom myši na obrázok na domovská stránka -> vyberte možnosť „Skontrolovať“ z ponuky. Skontrolujte rozlíšenie obrázka (skontrolujte príponu názvu súboru obrázka .jpg) z kódu. Pozri nasledujúcu snímku obrazovky:
Teraz zmeňte veľkosť rovnakého okna na veľkosť obrazovky tabletu a skontrolujte rozlíšenie obrázka. (Prípona názvu obrázka je medium.jpg)
Nakoniec zmeňte veľkosť okna na veľkosť obrazovky pre mobil a skontrolujte obrázok. (Prípona názvu obrázka je small.jpg)
# 7) Náhodne kliknite kdekoľvek na webovej stránke a skontrolujte, či sa inicializujú nejaké údaje alebo text, ktorý nie je hypertextový odkaz, a presmerovaný na inú stránku alebo obsah. Toto testuje, či je nejaké slovo alebo text označený ako hypertextový odkaz v zadný koniec .
Poznámka : V niekoľkých projektoch požiadavky hovoria o veľkosti pixelov a rozlíšení obrazovky pre konkrétne zariadenia. (Napríklad, zobrazenie tabletu pre ich RW by malo byť 15:15 pixelov a pre mobilné telefóny by to malo byť 10:10 atď.)
Hlavným scenárom je testovanie dynamických zmien, ktoré by sa mali vyskytnúť na displeji RW, keď zmeníme veľkosť pixelov.
# 8) Otvorte naše testovacie RW v prehliadači a pozrite si obsah a zobrazenie hlavných obrázkov. Teraz zmeňte veľkosť okna až po zarážku veľkosti tabletu a overte zmeny, ktoré by sa mali stať v rozlíšení obrázka a v akomkoľvek inom obsahu. V bodoch prerušenia by sa zmeny mali udiať dynamicky (niekedy sa zmeny nestanú v bodoch prerušenia a môžu sa meniť pri iných veľkostiach pixelov, ktoré sú chybné.)
Nástroje na testovanie responzívneho webu
Existuje niekoľko nástrojov (webových stránok), ktoré vám umožnia zobraziť ukážku webových stránok nášho responzívneho webu.
Napríklad,môžeme náš responzívny web otestovať pri rôznych preddefinovaných rozlíšeniach obrazovky (smartphony, tablety atď.) a tiež si ho prispôsobiť podľa požadovaného rozlíšenia. Tieto nástroje uľahčujú a urýchľujú testovacie činnosti. Takéto nástroje v prehliadači možno nazvať ako Respondent .
Niektoré nástroje tiež ponúkajú dôležitú funkciu zachytenia responzívnej snímky obrazovky, ktorá by nám mohla pomôcť testovať návrhy webových stránok, HTML, rozloženia, CSS atď. Responzívnej webovej stránky.
Tieto nástroje sú skvelou alternatívou, keď skutočné zariadenia nie sú k dispozícii alebo nie sú pripravené.
Tu je rýchly zoznam nástrojov:
# 1) Reagovať na kontrolu dizajnu
Do vyššie uvedeného poľa „Zadajte svoju adresu URL sem“ zadajte adresu URL responzívnej webovej stránky, ktorú je potrebné otestovať, a kliknite na tlačidlo „GO“. Môžete si dokonca vybrať zariadenie a rozlíšenie, v ktorom chcete responzívny web zobraziť.
Teraz vstúpte www.fpl.com v poli vyberte rozloženie „Nexus 7 PORTRÉT“ a kliknite na GO. Stránka sa zobrazí v rozlíšení zvoleného formátu.
#dva) Screenfly
Prejdite na testovaciu stránku www.fpl.com a kliknite na GO.
Zmeňte rozloženie na stolný počítač, tablet, mobil atď. A web otestujte. Pomocou tohto nástroja môžete dokonca prispôsobiť rozlíšenie.
Napríklad, nastavte rozlíšenie obrazovky na 512 x 256 a web otestujte.
Poznámka : Pomocou tohto nástroja môžete dokonca testovať scenár 6 ľahko zmenou rozlíšenia a overením pomenovania obrázka.
# 3) Designmodo
Zadajte ľubovoľnú adresu URL, www.makemytrip.com a kliknite na Enter.
V pravej hornej časti prehliadača máte možnosť zmeniť rozloženie webovej stránky na ľubovoľné konkrétne mobilné modely alebo zariadenia atď.
Poznámka : Tento nástroj má ešte jednu funkciu, napríklad pretiahnutie obrazovky a úpravu rozlíšenia na požadované rozlíšenie.
# 4) odpovedá
Zadajte testovaciu adresu URL, www.fpl.com v poli a kliknite na tlačidlo „Testovať“.
Poznámka: Tento nástroj má iba niekoľko pevných možností rozloženia, na ktorých je možné testovať naše stránky.
# 5) Mattkersley
čo je chyba v testovaní softvéru s príkladom
Ak chcete mať prehľad o svojich RW na viacerých veľkostiach obrazovky súčasne, potom tento nástroj mattkersley je to, čo potrebujete.
Teraz zadajte svoju testovaciu URL do panela s adresou a kliknite na Enter. RW môžete zobraziť na viacerých veľkostiach obrazovky naraz.
# 6) Predvolene, chrome má málo vývojových nástrojov pomocou ktorého môžeme simulovať režim zariadenia a ich schopnosti.
Ak chcete používať túto funkciu chrómu, otvorte akýkoľvek web s responzívnym dizajnom, ako je napríklad www.fpl.com v chrome a kliknite pravým tlačidlom myši na webovú stránku a v ponuke vyberte možnosť „Skontrolovať“ alebo stlačte Ctrl + Shift + I. Zobrazí sa okno dole v spodnej časti webovej stránky.
Teraz kliknite na ikonu, ako je znázornené na obrázku nižšie.
Otvorí sa mobilný režim webovej stránky. Z toho môžete zmeniť rozlíšenie na ľubovoľný konkrétny pixel a tiež na ľubovoľný preddefinovaný mobilný model, ktorý sa zobrazí v rozbaľovacej ponuke. Ak si chcete urobiť jasnú predstavu, pozrite si nasledujúcu snímku:
Poznámka: Webovú stránku tiež môžeme zmeniť na výšku alebo na šírku.
Ďalšie dobré nástroje na testovanie responzívneho dizajnu:
7) ResponsiveDesign
8) BrowserStack
9) Trója
10) AmIResponsiveDesign
jedenásť) Respondent
12) Studiopress
13) ResponsiveTest
14) Pre stroje MAC máme samostatnú aplikáciu s názvom „ FIT ”Na otestovanie RW. Táto aplikácia umožňuje nastavenie rôznych hraničných hodnôt na rôznych zariadeniach na testovanie. APTUS nie je bezplatná aplikácia a musíme si ju kúpiť v Mac App Store.
Výzvy pri testovaní responzívneho dizajnu a možných riešení
Stratégia dynamického testu
Pri prechode z 320 × 480 (rozlíšenie iPhone4) na 2048 × 2048 (veľký monitor) zostáva viac ako 4 milióny možných veľkostí prehľadávača. Väčšina testovacích skupín zúži zoznam testovacích zariadení na niekoľko. Aj potom je ťažké alebo nemožné vyriešiť problém manuálneho testovania.
Vývojári nemôžu predvídať všetky problémy s platformou a testéri ich nemôžu chytiť pred vydaním. Z tohto dôvodu vo výrobe narazíme na občasný problém s používateľským rozhraním.
Možno niekto zmenšil veľkosť svojho prehliadača, čo spôsobilo, že dôležité textové polia boli zakryté štítkom stránky. Možno nejaký kód navrhnutý na zvládnutie dynamickej zmeny veľkosti stránky zlomí výbery modálnych dátumov a normálny test zabudovaný do WebDriveru si ho nikdy nevšimne. Existuje príliš veľa možností zobrazenia na zostavenie testov a príliš málo času.
Pozrime sa narealistický príkladna ilustráciu problému.
Dynamické stránky, napríklad posúvače reklamy, a obsah streamovaný od používateľov v rôznych veľkostiach stránok, sú základom mnohých softvérových produktov. Pridajte k tomu skutočnosť, že nemôžeme predvídať, ako sa bude stránka zobrazovať, a veľa automatizačných snáh začína neúspechom.
Vidím dve populárne riešenia tohto problému - použitie štandardizovanej alebo východiskovej sady údajov a obnovenie pri každom spustení testovacej sady a branie vecí do jedného prostredia alebo platformy.
Štandardné údaje zaisťujú, že obsah stránky bude vyzerať rovnako zakaždým, keď načítame testovacie prostredie. Táto stratégia v kombinácii s niečím ako Sauce Labs, ktoré dáva ľuďom prístup k mnohým platformám, a dostanete sa pekne ďaleko.
Tento prístup si vyžaduje čas a zdroje. Na vytvorenie a aktualizáciu exportu databázy budete potrebovať čas od niekoho, kto má prístup do databázy, zvyčajne DBA. A niekto musí vytvoriť skripty na nastavenie a odtrhnutie skriptov, aby udržal testovacie prostredie. Po všetkom tomto úsilí by ste mohli skončiť s typom sanitovaného prostredia, v ktorom sa chyby skrývajú.
Alternatívne môžete použiť technológiu Visual Testing na automatizáciu testov na webových stránkach, ktoré sa líšia rozložením a obsahom. Pomocou tohto nástroja môžete vytvárať testy bez akýchkoľvek zmien v testovacom prostredí a bez toho, aby ste od ľudí mimo svojej testovacej skupiny vyžadovali akékoľvek súbory zručností.
Pozrime sa na príklad.
Zvážte mobilnú aplikáciu Twitter.
Tento produkt je kombináciou neustále sa meniaceho užívateľského obsahu a reklamy. V hlavičke je tiež niekoľko základných častí používateľského rozhrania, ako napríklad spravodajský kanál a oznámenia.
Pomocou nástroja na vizuálne testovanie môžete začať snímaním obrazovky celej rolovateľnej stránky, nielen viditeľnej oblasti. Môžete si zvoliť možnosť porovnania, ktorá ignoruje textový obsah, ale zameriava sa na prvky na stránke.
Napríklad, mohli ste vidieť, že existujú polia pre tweety, že každý tweet má prvok názvu a prvok dátumu a času bez obáv z toho, čo v nich je.
Hľadanie prvkov na celých stránkach tiež zmierňuje nároky na údržbu a zložitosť, ktoré vidíme v mnohých automatizovaných testoch. Namiesto manipulácie s údajmi na stránke, ich ukladania, posúvania a následného overovania získate všetko naraz. To znamená menej kódu na zápis, menej kódu na údržbu a menej falošných poplachov pri nočných testovacích behoch.
Responzívne testovanie pre responzívny dizajn:
Responzívny dizajn pridal kombinačný problém ku každej dostupnej platforme. Otázka je; zo všetkých týchto možných platforiem a veľkostí obrazoviek, ktoré vyberáme pre najlepšie pokrytie testom.
Zníženie počtu prostredí, ktoré pokrývame, iba na tie najpopulárnejšie, uľahčuje technickú prácu a zároveň ignoruje problém s pokrytím.
Samotné zvýšenie počtu prostredí pomocou automatizačného rámca vytvára nočnú moru údržby a potenciálne pridáva neriešiteľný testovací problém.
Kombinácia dobrých nástrojov na vizuálne testovanie s flexibilným automatizačným rámcom používateľského rozhrania, napríklad webovým ovládačom, môže technické aspekty tohto problému nielen vyriešiť, ale aj vyriešiť.
Cieľom je dobré pokrytie používateľského rozhrania s primeranou záťažou pre údržbu. Vizuálne testovanie je vaša jediná robustná a škálovateľná možnosť.
Tipy na responzívne testovanie webu
# 1) Pri testovaní súboru RW by ste mali pamätať na konzistenciu dizajnu, ako je zarovnanie obrázkov, textov, polstrovanie okolo okrajov atď. Vo všetkých prehliadačoch a operačných systémoch.
#dva) Počas testovania RW by si mal tester uvedomiť, čo má testovať a ako testovať na viacerých zariadeniach v rôznych bodoch prerušenia. Inak by to mohlo byť dosť vyčerpávajúce a dezorientujúce.
# 3) Pre dôkladné otestovanie responzívneho webu je nevyhnutná koordinácia testerov a vývojárov. Vývojár by mal testerom pomôcť s vytvorením podmienok uvedených v podmienkach testovacích prípadov.
# 4) Skontrolujte, či sú webové stránky čitateľné vo všetkých rozlíšeniach, t. J. Obsah by mal byť čitateľný, aj keď zmeníme veľkosť prehliadača na veľkosť obrazovky pre mobilné zariadenia.
# 5) Dôležitý obsah RW by mal byť viditeľný pre všetky zarážky, tj. Ak zmeníme veľkosť prehliadača z obrazovky na plochu na obrazovku pre mobil, potom by hlavné obrázky, hlavný text, ponuka atď. Mali zostať rovnaké.
# 6) Ak je veľkosť prehliadača zmenená kvôli testovaniu, potom by na klikanie mala byť vhodná akákoľvek oblasť klikania (napríklad tlačidlá, ponuky, odkazy, odkazy) atď.
# 7) Zmena veľkosti prehliadača a testovanie responzívnej webovej stránky dokáže identifikovať iba niekoľko hlavných problémov, zatiaľ čo v mobilných zariadeniach môže byť niekoľko ďalších problémov týkajúcich sa prstov, klepania atď. Testovanie týchto konkrétnych funkcií na skutočných zariadeniach môže viesť k lepšiemu nájdeniu a odstráneniu chyby.
Záver
Keď testujeme, responzívny dizajn bude mať veľa výziev. Mali by ste premýšľať efektívnym spôsobom, aby ste prekonali výzvy.
Testovanie responzívneho webu je pre úspešnú budúcnosť mnohých ľudí veľmi dôležité mobilné aplikácie. Používateľov mobilných zariadení bude len pribúdať a ich očakávania sú veľmi odlišné od očakávaní používateľov počítačov. Implementácia a dôkladné testovanie RWD je vynikajúci spôsob, ako nastaviť váš web tak, aby spĺňal očakávania.
Implementácia a dôkladné testovanie RWD je vynikajúci spôsob, ako nastaviť váš web tak, aby spĺňal očakávania.
Dúfame, že informácie, tipy a testovacie scenáre diskutované v tomto článku určite pomôžu vašim potrebám responzívneho testovania webových stránok.
O autorovi: Toto je príspevok od hostí od Laxmi. Má viac ako 7 rokov skúseností s testovaním softvéru a v súčasnosti pracuje ako senior inžinier pre testovanie softvéru.
Vyskúšajte všetky príklady uvedené v tomto článku a dajte nám vedieť, ak máte nejaké otázky alebo pripomienky.
Odporúčané čítanie
- Alfa testovanie a beta testovanie (kompletný sprievodca)
- Kompletný sprievodca zostavením Verification Testing (BVT Testing)
- Funkčné testovanie vs. Nefunkčné testovanie
- Typy testovania softvéru: Rôzne typy testovania s podrobnosťami
- Najlepšie nástroje na testovanie softvéru 2021 [QA Test Automation Tools]
- Výukový program na testovanie dátových skladov ETL (kompletný sprievodca)
- Sprievodca testovaním bezpečnosti webových aplikácií
- Najlepšie služby na testovanie softvéru QA od spoločnosti SoftwareTestingHelp