Jedna z najdôležitejších úloh, ktorým čelí oddelenie QA spoločnosti EastBanc Technologies, spočíva vo vytvorení automatizovaného systému testovania stránok. www.washingtonpost.com . Ide o elektronické noviny predávané na stránke informačného a nového portálu.
Hlavným dôvodom potreby vytvorenia automatizovaného testovacieho systému bolo, že okrem plánovania prechodu na nový CMS (tzv. PageBuilder) je potrebné nahradiť množstvo iných CMS, ktoré slúžia na publikovanie obsahu v rôznych sekciách. stránky u. Pri tomto druhu migrácie je dôležité nepripustiť kompromisy, aby bolo možné publikovať prostredníctvom nového Obsah CMS na rôznych stránkach v správnom poradí.
Nie je možné, aby sme skontrolovali súlad všetkých stránok s našimi testami. Našou úlohou je identifikovať chyby PageBuildera, skontrolovať spoľahlivosť rozloženia stránok vytvorených novým PageBuilderom a zvýšiť rešpekt redaktorov Washington Post pre tie nuansy konkrétnej stránky s obsahom, ktoré môžu viesť k potenciálnym problémom pre vykreslenú stránku nok. .
Vytvorenie testovacieho systému je v štádiu aktívneho vývoja, resp., ako sa zdá, je už možné ho postaviť pred súd širokej verejnosti.
Skôr než začneme, je potrebné poznamenať jednu vlastnosť projektu: všetko testovanie, ktoré robíme, je „zavolať“. Tobto. My, rovnako ako ostatní koristuvach, sa chystáme otestovať bojovú verziu stránky.
Výber nástrojov na testovanie rozloženia
Po preskúmaní rozľahlosti internetu sme sa zamerali na najnovšie prístupy a nástroje. Na testovanie bočného rámu sme použili špeciálny framework Galen , ktorý bol potom integrovaný s testNG.
Absolvovanie Galenovho testu pre rámec stránky samozrejme znamená aj platnosť rozloženia. Pred premiestnením blokov je tiež potrebné skontrolovať vzhľad rôznych prvkov v strede bloku. Interne sme namiesto blokov absolvovali testy metódou zarovnávania screenshotov.
Testy screenshotov zahŕňajú rôzne logá, tlačidlá, bloky so špecifickými displejmi - všetko, na čo Galen nedosiahne a čo je ťažké/nemožné overiť funkčnými testami.
Azúrová farba – testované Galenom, vyplňte zelenou – testy snímky obrazovky:
Buď opatrný!
Skvelý drobec
Testy Galen a Screenshot môžu úspešne nahradiť niekoľko typov funkčných testov, ktoré prebiehajú buď na povrchu, alebo na rýchlostnom kóde, prípadne oboje. Výber testovacej metódy pre konkrétny typ je určený kolektívnou diskusiou o testovacom prípade pre typ kože na základe kritérií rýchlosti kódu, jednoduchosti podpory, opakovateľnosti testovacieho náteru a presnosti.
Napríklad existujú 2 bloky na overenie, ktoré sme pôvodne napísali funkčné testy: Most Read a Information Block. Teraz overujeme prvú pomocou snímok obrazovky a druhú pomocou Galenovho testu.
MostRead Block, overené testom snímky obrazovky:
Okrem funkčného testu: je podstatne menej riadkov kódu, zväčšila sa šírka testovacieho pokrytia a pri zmene sa test aktualizuje pohľad zvonku dovnútra O tomto bloku na stránke sa veľa hodín nehovorilo.
Testovanie tohto bloku je uvedené v časti o metóde snímky obrazovky.
Informačný blok WaPo: 
Galen sa ľahko vyrovná s kontrolou relevantnosti textu a odkazov daného bloku: samotné úlohy sa odosielajú v lokátore a relevantnosť textu sa vykonáva interným galénovým overením. Pred funkčnou skúškou sa úplnosť testovacieho pokrytia nezmenila, no vzhľadom na to, že overenia prebiehajú v rámci jedného testu, ušetríme veľa času.
Galenov testovací kód.
náš automatizovaný systém Vikory testovanie: Java, Maven, TestNG, Selenium WebDriver, Selenium Grid, Galen Framework.
Naše testy založené na snímkach obrazovky sú aktívne podporované súborom nástrojov naprieč platformami ImageMagick.
Okamžite by som chcel zdôrazniť, že testovací kód píšeme v jazyku Java pomocou vzoru PageObject a rámca Yandex - Prvky HTML . Na spustenie testov použite maven a testNG.
Aby sme uľahčili spustenie testov, preskúmali históriu testov, preskúmali recenzie bez najímania vysokokvalifikovaných špecialistov, vyvíjame samostatný program - Dashboard.
Upozorňujeme, že sme stále vo fáze výskumu, ako správne zorganizovať celý proces testovania, a nie všetky prístupy sú ešte úplne zvládnuté a otestované.
Testovanie pomoci Galen Framework
Galen Framework má mnoho výhod: je to ľahký, jednoducho použiteľný nástroj, ktorý ponúka širokú škálu testovacích možností pre responzívny dizajn. Okrem toho existuje veľa dokumentácie a v súčasnosti sa aktívne rozvíja.
Galen Framework teraz poskytne popisy správ v jednom zčlánky . Ak chcete stručne opísať princíp práce s Galenom, vyzerá to asi takto: napíšete špecifikáciu stránky (tak sa nazýva súbor spec), vikory a špeciálny, dobrú dokumentáciu a intuitívne rozumnú syntax. Súbor spec popisuje zamrznutie, veľkosť, zarážky, vnorenie prvkov stránky a ďalšie parametre a rozloženie stránky, môžete skontrolovať konzistenciu textu jednotlivého prvku. A všetky tieto revízie budú založené na značkách, ktoré priradíme.
Značky v súboroch špecifikácií možno špecifikovať takto:
Galen dokončí všetky revízie a potom vygeneruje konečný výsledok ako súbor HTML. Označuje, ktoré konkrétne kontroly pre daný test zlyhali a pre každú neúspešnú kontrolu si môžete urobiť nový screenshot testovacej stránky, kde uvidíte prvky, ktoré neprešli konkrétnou kontrolou.
Napríklad nie obrat prešiel Poloha medzi prvkami nádoby vyzerá takto:
Keď kliknete na zvýraznenú kontrolu, zobrazí sa snímka obrazovky celej kontrolovanej stránky s nasledujúcimi zvýraznenými prvkami:
Galen Framework akceptuje nasledujúce parametre ako vstup:
- prehliadač, ktorý slúži na overenie
- povolené, na ktorej trati spustiť test
- URL testovanej stránky
- Javascriptový súbor, ktorý je potrebné uložiť na stránke, ktorá sa spustí pred kontrolou súboru .spec (napríklad ak potrebujete skontrolovať zobrazenie stránky na webe webu)
- Názov súboru .spec
- tagy, ktoré je potrebné opraviť pred revíziou súboru .spec (napríklad: desktop, all, pretože testujeme rozloženie pre pracovnú plochu).
Akonáhle zmeníte parametre, ktoré sú dodávané spoločnosti Galen, môžete dosiahnuť praktické testovacie pokrytie rámca našej stránky.
Po výbere nástroja na testovanie frameworku stránky bolo ďalšou úlohou vybrať schému, ktorá by zabezpečila maximálne pokrytie stránky Galenovými testami.
Vyberte testovaciu stránku z podmnožiny podobných stránok
Ktoré stránky by som si mal vybrať na testovanie rozloženia alebo testovať významy na kontrolu viacerých stránok rovnakého typu?
Bez väčších problémov sme sa rozhodli vybrať náhodnú stránku z podmnožiny pri spustení testovacej sady (to znamená, že na otestovanie podmnožiny stránok receptov sme vybrali jeden z receptov a odovzdali sme túto adresu URL všetkým testom s rozložením) . Keďže nie je možné vopred skontrolovať všetky stránky, možnosť výberu náhodnej stránky sa zdala optimálna. Adresa URL náhodnej stránky podmnožiny stránok, ktoré sú kontrolované, sa odošle Galenovi pomocou metódy, ktorá je spoločná pre všetky testy v našom automatizovanom testovacom systéme pre stránku (okrem testov na testovanie rozloženia máme aj funkčné test snímky obrazovky).
Napríklad existujú 2 možnosti zobrazenia rovnakého typu stránok - stránok kulinárskych receptov, z ktorých jedna obsahuje rozloženie:
Zo zadku môžete vidieť, že blok „Najčítanejšie“, ktorý sa nachádza na pravej strane strany, sa nachádza hlavne na ľavej strane a nie na pravej strane. Na overenie existencie takýchto problémov je potrebné skontrolovať veľké množstvo strán a zvážiť množstvo faktorov.
Aké sú povolenia na spustenie testov?
Okamžite vznikla myšlienka vybrať tie najširšie dostupné zariadenia a použiť ich na testovanie ich najnovších verzií. Prote, trend zrýchlenej mobilizácie planéty, ktorý je jasne evidentný, nám neumožňuje vidieť (a navyše sprostredkovať) žiadnych šialených lídrov v tejto oblasti. Zariadenia umožňujúce prezeranie webových doplnkov sú anonymné a zjednotenie povolení pre takéto zariadenia nie je vôbec módnou činnosťou. Myšlienka, že adaptívny dizajn pre tých a adaptívny dizajn, aby sa správne zobrazili na akomkoľvek platnom povolení, sa rýchlo vkradli, prekrútili naše mysle a zabránili ďalšiemu vyšetrovaniu tohto galusi. Rozhodnutie bolo prijaté: testujeme rozloženie vo všetkých platných uzneseniach.
Za platné oprávnenia sa považujú všetky oprávnenia od minimálnej šírky výrezu = 241 px (prehliadač sa nezmenší) po maximálnu šírku výrezu = 1920 px (horný okraj je zhovievavý). Strany zatiaľ nemáme, keďže výška v prístave pre účely automatizovaného testovania bola počiatočným parametrom, takže rešpekt k výške sme ešte nestratili.
Ako môžete otestovať rozloženie so všetkými povoleniami?
Na začiatok bude celý rozsah platných povolení rozdelený do rozsahov rozloženia. Samotné dispozície sú humózne, ale rozdielne umiestnenie blokov umožňuje ohraničenie. Je ťažké určiť hranice medzi rozloženiami – vyžaduje to veľa práce v prehliadači a je ťažké zistiť, v ktorom hraničnom bode sa bloky stránky menia: ich rozloženie, konzistencia a/alebo správanie. Pre jednoduchosť berieme čo najmenšiu šírku pri prístave. Tabuľka je už dostupná:
DESKTOP: max 1920px, min 1018px;
LAPTOP: maximálne 1017 pixelov, minimálne 769 pixelov;
TABLET: max 768px, min 481px;
MOBIL: maximálne 480 pixelov, minimálne 361 pixelov;
SMALL_MOBILE: maximálne 360 pixelov, minimálne 280 pixelov.
Skôr ako poviem, rozhodli sme sa, že zatiaľ nebudeme testovať rozloženie SMALL_MOBILE, pretože počet ľudí, ktorí si prezerajú Washington Post na svojich zariadeniach s takýmto povolením, je katastrofálne malý (je to jednoduchá zmena a počas testovania nie sú problémy s jej pridávaním) . Už neexistujú 4 rozsahy na testovanie, čo umožňuje rôzne rozloženia.
Nižšie je uvedený kód na spustenie Galenovho testu pre povolenia pracovnej plochy:
Skvelý drobec
Keď spustíte kožný test, Galen dostane náhodnú vzorku v rozsahu pre dané rozloženie (getRandomResolution(DESKTOP)):
A, samozrejme, rozsah povolení je nastavený týmto spôsobom:
Testovanie z náhodného výberu povolenia z platného rozsahu a stránky, ktoré je testované z podmnožiny rovnakého typu stránok, sa tak mení na medzinárodný proces. Čím častejšie program spúšťate, tým viac chýb nájdete. Jediným úspešným testom môžeme len povedať, že daná stránka pre toto konkrétne povolenie je platná. Ale aj po 500 úspešných jazdách môžeme potvrdiť, že usporiadanie tejto plochy je životaschopné. Je jasné, že „500 úspešných spustení“ je rozumný odhad a tu je potrebné venovať pozornosť obsahu a počtu ekvivalentných stránok.
Spustenie v náhodnom rozlíšení sa čoskoro ukázalo ako pravdivé a okamžite odhalilo jednu zásadnú chybu, ktorú sme s najväčšou pravdepodobnosťou prehliadli pri testoch s pevným rozlíšením.
Pozrime sa, ako nám tento prístup pomáha s testovacou stránkou receptu.
Test rámca na strane receptúry sa spustí pre šírku výrezu od 768 pixelov do 1 017 pixelov. Zoberme si zadnú stranu: www.washingtonpost.com/pb/recipes/maple-banana-frozen-yogurt/14143/
Testujte na hraničných bodoch rozloženia notebooku (1017px a 768px) bez toho, aby ste videli nejaké problémy.
Keď sme však začali test spúšťať na náhodnej samostatnej stránke, približne v polovici behu testy zlyhali a snímky obrazovky ukázali, že bloky z pravého stĺpca sa presunuli nadol pod hlavný obsah.
Správny pohľad:
Buď opatrný!
Skvelý drobec
Rozloženie Zlamana:
Buď opatrný!
Skvelý drobec
Metóda testovania založená na snímke obrazovky
Po vdýchnutí článku , Použili sme metódu testovania založenú na snímke obrazovky. Pred rozprávaním, aby sme najskôr otestovali rozloženie, sme sa spoliehali na túto metódu. Tobto. vznikol nápad znovu zarovnať snímky obrazovky stránky s predtým pripraveným modelom a nahradiť všetky prvky, ktoré by sa mohli potenciálne zmeniť, zástupnými symbolmi (pretože zástupné symboly sú za obrázkom). Pred takýmito prvkami sme mali obrázky, flashovú reklamu a text. Projekt zlyhal vo veľkej miere v tom, že stránky boli zaplnené anonymnými blokmi, ktoré sa dynamicky presúvali, v dôsledku čoho sa počas spúšťacieho testu pred spustením zmenili fyzické rozmery snímok obrazovky a umiestnenie blokov. Okrem toho Chrome už mnoho rokov stratil možnosť vytvárať snímky obrazovky v plnej veľkosti, čo tiež spôsobuje menej problémov.
Testy založené na snímkach obrazovky teraz overujú prvky aj bloky na stránke, pre ktoré sú dôležité obrázky a ktorých overenie pomocou funkčných alebo všeobecných testov je zložité a nemožné.
Pre zadok:
Os vyzerá ako tento blok MostRead Hlavná stránka washingtonpost.com (pre ľavákov) model, s ktorým sa budeme odvolávať na snímku obrazovky tohto bloku (pre pravákov):
Testovací kód vyzerá takto:
Na uloženie snímok obrazovky sa používa nasledujúca štruktúra adresára: /models/HomePage/firefox/HomePage_thePostMost.png
Ako vidíte, pre rôzne prehliadače Vytvorí sa snímka obrazovky modelu bloku, ktorý potrebujete.
Metóda shootAndVerify() nájde cestu k modelu pre triedu odovzdanej stránky a názov prehliadača, v ktorom je spustený test.
Pri pohľade do budúcnosti si povedzme – usilovne sa pracuje a opíšeme podrobnosti procesu s výhradami, že ešte nie je všetko dokonalé.
Ako sa ukázalo, akumulácia informácií o požadovanom bloku môže spočívať v rôznych faktoroch, ako napríklad:
- verzia operačného systému
- motív operačného systému
- prehliadač v danej verzii yogo
- Rôzne parametre pre vyhladzovanie fontov a hardvérovú akceleráciu.
Prvým problémom bolo, že sa kvôli úprave OS a prehliadača zmenili rozmery zozbieraných screenshotov. Ak chcete vytvoriť veľkosti blokov, a teda aj snímky obrazovky, musíte spustiť prehliadač s konštantnými veľkosťami. Veľkosť okna prehliadača môžete zmeniť pomocou ďalšej metódy webového ovládača: driver.manage().window().setSize(requiredSize). Týmto spôsobom určíme veľkosť okna a nie veľkosť viditeľnej oblasti, ktorú potrebujeme - import. Vertikálny posuvník sa pred hovorením tiež zmestí do veľkosti v portáli a táto položka tiež leží pod tými oknami, takže ju treba opraviť. Najväčším problémom sa stala metóda kalibrácie, ktorá upraví veľkosť portu na zadanú veľkosť. Po spustení prvého testu sa rozdiel medzi šírkou okna a šírkou okna uloží do špeciálneho parametra a upraví sa pre ďalšie spustenia.
Ďalším problémom, na ktorý sme narazili, bol rozdiel v zobrazovaní fontov v prehliadačoch cez nastavenia anti-aliasingu. Pokúsili sme sa vyriešiť problém s inštaláciou rôzne úpravy prehliadače, ako napríklad:
vrstvy.zrýchlenie.vypnuté
gfx.font_rendering.cleartype_params.rendering_mode
gfx.direct2d.disabled
Bohužiaľ to nepomohlo.
Okrem toho na zarovnanie snímok obrazovky používa utilita ImageMagick parameter ako fuzz, ktorý označuje maximálnu možnú rozmanitosť snímok obrazovky.
Namagalasya virishity Problém Qiu experimentovanie s týmto parametrom. Malý koeficient fuzz nevyriešil problém, ale počet rôznych pixelov bol už veľký, cez tie, ktoré boli bohaté na text, a veľký koeficient viedol k tomu, že prítomnosť určitých prvkov v blokoch nezasahovala do prechodový test a viedli k potenciálne vynechaným chybám.
Riešením bolo dvakrát skontrolovať všetkých rôzne prehliadače pre všetkých virtuálne stroje, na ktorom boli spustené testy a duplikácia samotných operačných systémov.
Napríklad test, ktorý kontroluje blok sociálnych tlačidiel, neukazuje žiadny z obrázkov.
Pre otázky ste k dispozícii:
obrazový model 
snímka obrazovky testovaného bloku:
výsledok vyrovnania týchto dvoch obrázkov:
CommandException, ktorá nám povie o tých, ktorých zarovnanie obrazu je široké 251 pixelov:
Existujú aj situácie, keď nie sú zachované rozmery snímok obrazovky. V tomto prípade odmietame nasledujúci zvuk:
Z neznámych dôvodov sú však prvky v strede testovaného bloku mierne posunuté. Pri takýchto epizódach sa neporovnávame s jedným modelom, ale so skupinou modelov, ktoré vyhovujú mase. Môžeme mať niekoľko modelov pre blok PostMost s nasledujúcimi názvami: HomePage_thePostMost.png, HomePage_thePostMost (1).png a všetky modely sú dôležité platné. Našťastie počet takýchto možností pre Kintseva nie je väčší ako 2.
Technické aspekty
Ako sa ukázalo, technologický zásobník používaný na písanie a spúšťanie testov je: Java, Maven, TestNG, Selenium, Galen Framework. Okrem toho sa výsledky testov posielajú do grafitu. Priebežné testy sa vykonávajú priamo pomocou Jenkins CIS. Nezaoberme sa tým, prečo k takémuto výberu došlo. Stručne opíšeme, ako je všetko zviazané.
Selenium Grid je možné spustiť lokálne v ten istý deň virtuálne stroje zo systému Windows 7, kde je spustená mriežka, a zo stroja so systémom Linux, na ktorom je spustený rozbočovač. Každý uzol má k dispozícii 3 inštancie prehliadačov Firefox a Chrome. Okrem toho na stroji Linux beží aj Jenkins a grafit. Testy Galen sa spúšťajú pri pôvodnom testovaní kvôli integrácii s TestNG. Pre ktorú bola napísaná špeciálna trieda, ktorá vám umožňuje používať Java Galen API. Pri implementácii interakcie medzi TestNG a Galen sme narazili na niekoľko problémov, ktoré boli vďaka interakcii s distribútorom Galen promptne vyriešené. Sám vydavateľ Galen je ochotný využívať novinky a pravidelne vydáva aktualizácie pre tento nástroj, ktoré rozširujú jeho možnosti a robia ho ešte výkonnejším. Sám plánuje písať dokumentáciu pomocou integrácie Galen s TestNG.
Funkčné testy, testy založené na galérii a na snímke obrazovky sú oddelené dodatočným parametrom skupiny priradeným pred anotáciou testu a možno ich spustiť samostatne.
Naše ikony
Dva prístupy – metóda na zarovnanie snímok obrazovky a testovanie pomocou Galen Framework – kroky na testovanie rozloženia stránky. Úspešne sa navzájom ovplyvňujú. Metóda zarovnávania snímok obrazovky bude stagnovať, ak potrebujete protestovať proti zobrazeniu akéhokoľvek susedného prvku alebo bloku, napríklad panel zdieľania v sociálne opatrenia alebo hlavné menu v záhlaví. Blok môže samostatne umiestňovať ikony bez tváre, ktoré môžu byť svojim spôsobom uprostred iných ikon a prvkov alebo umiestnené priamo vedľa nich.
S Galenovou pomocou je ťažké opísať všetky tieto ďalšie momenty, ale jedna snímka obrazovky v prehliadači kože tento problém rieši a počet snímok obrazovky zahŕňa možnosť, že to môžeme pri popise špecifikácie preskočiť. Galen svojím spôsobom robí úžasnú prácu pri prestavovaní blokov a kontrole nadpisov a pevného textu v nich. Stagnácii je možné predísť, ak je potrebné protestovať proti layoutu na rovnakom type šablónových stránok, ktoré nie sú vyžadované funkčná logika Napríklad, či už ide o informačný portál, ako je ten náš, ak je niektorá strana webu prístupná bez povolenia, alebo akékoľvek iné kroky obchodníka. Okrem toho existuje dobré pochopenie testovania medzi prehliadačmi v mysliach adaptívneho rozloženia aplikácie.
Dobrý deň, milí čitatelia blogu. Už nie je prekvapujúce, že adaptívny dizajn sa na ruskom internete stáva čoraz populárnejším. A samozrejme, dizajnéri rozloženia to musia vyšívať. Keďže adaptívny dizajn bude čoskoro praktický na všetkých stránkach, stále viac ľudí používa mobilné zariadenia.
A rád by som povedal, že stránka je na takýchto zariadeniach oveľa ľahšie čitateľná bez nej.
Dnes vám chcem predstaviť 5 veľmi zaujímavých a skvelých služieb, pomocou ktorých môžete skontrolovať prispôsobivosť stránky.
A tak poďme.
5 služieb, na ktorých si môžete skontrolovať prispôsobivosť stránky.
www.responsivedesigntest.net
Dobrá služba na kontrolu webových stránok. Žiadne povolenia pre obrazovky na tabletoch aj telefónoch.
mattkersley.com
Jednoduchá služba na kontrolu stránky od Matta Kersleyho. Dostupné sú aj všetky obľúbené rozlíšenia pre mobilné zariadenia.
screenqueri.es
Veľmi skvelá služba, ktorú možno použiť na kontrolu akejkoľvek stránky. Dizajn, ako aj funkčnosť bola veľmi dobrá.
quirktools.com
Veľmi krásny a funkčný servis. Ako si stránku prezeráte si môžete pozrieť v televízii :-)
Ako otestovať responzívny web? Aké problémy vznikajú pri testovaní webových stránok na rôzne prístavby? Ako sa testovanie webovej stránky na monitore počítača porovnáva s testovaním na zariadení, ako je mobilný telefón? Aké nástroje môžeme použiť na testovanie responzívnych webov? Pomôžeme vám odpovedať na vaše otázky
Čo je responzívny webdizajn?
Responzívny webový dizajn (RWD) je základným prístupom k webdizajnu, usmerňuje webové stránky tak, aby zabezpečili optimálnu používateľskú skúsenosť – jednoduché čítanie a navigácia s minimálnou veľkosťou, posúvanie a posúvanie na širokej škále zariadení (vrátane monitorov stolných počítačov až po mobilné monitory telefónov) .
Stránka vytvorená pomocou RWD prispôsobuje rozloženie stredu vzhľadu z vybraných, proporcionálnych mriežok, obrázkov a mediálnych dopytov CSS3 nasledujúcimi spôsobmi:
- Koncept jemnej mriežky vyžaduje, aby veľkosť prvku stránky bola v relatívnych jednotkách, ako sú stovky, a nie v absolútnych jednotkách, ako sú pixely alebo body.
- Krabicové obrázky sú tiež hodnotené v hlavičkových jednotkách, aby sa zabezpečilo, že sa objavia mimo hraníc prvku.
- Keď sa prihlásite na odber multimédií, môžete pomocou stránky dodržiavať rôzne pravidlá. CSS štýl, v závislosti od vlastností zariadenia, na ktorom sa stránka zobrazuje, najčastejšie šírky prehliadača.
Problémy s testovaním responzívneho dizajnu webu
Mnoho ľudí v súčasnosti používa na prístup k webovým stránkam svoje mobilné telefóny alebo tablety, takže testovanie responzívneho dizajnu webu je dôležité, pretože Koristuvalnické rozhranie Na mobilných zariadeniach sa dokonca líši od stolných počítačov.
Snáď najťažšou časťou testovania webovej lokality, ktorá bude pravdepodobne úspešná, je, že webová lokalita funguje spôsobom, ktorý je obmedzený na množstvo zariadení a platforiem, a nie v skutočnosti testovaním na všetkých mobilných zariadeniach na trhu. časť je pre nás nepraktická.
Mnoho testerov, ktorí začínajú testovať responzívny webový dizajn, by malo začať zmenou veľkosti okna prehliadača, aby sa prispôsobila veľkosť zobrazovacej oblasti mobilný telefón, tablet a desktop. Táto metóda je vhodná na rýchlu vizuálnu kontrolu webu v rôznych zobrazovacích portoch a pomáha nám identifikovať hlavné problémy so zobrazením pri zmene alebo zväčšení okna prehliadača.
Prote, testovanie na skutočných mobilných zariadeniach je úplne iný dôkaz.
emulátory Vikoristan
Mobilný emulátor- toto je webová simulácia toho, ako sa budú webové stránky a programy zobrazovať a fungovať v mobilnom prostredí.
Aj keď vám simulátory nedokážu poskytnúť presné metódy testovania, ktoré potrebujete, stále existujú cenovo výhodné riešenia na testovanie funkčnosti webovej stránky na vysokej úrovni.
Google DevTools
V DevTools Google Chrome Existuje funkcia nazývaná režim zariadenia, ktorá sa používa na testovanie a dolaďovanie adaptívnych projektov.
Namiesto väčšiny iných nástrojov na testovanie adaptívneho dizajnu, ktoré jednoducho menia veľkosť vašej obrazovky, tento nástroj v skutočnosti simuluje prácu mobilného zariadenia, najmä dotykové interakcie, ako je stlačenie posúvania priamo z webového prehliadača.
Tu je niekoľko základných pravidiel pre testovanie responzívneho webového dizajnu:
- Text, prvky a obrázky sú správne
- Horná zóna klikateľnosti
- Označuje farba, tieňovanie a gradient
- Skontrolujte, či sú okraje správne vyplnené
- Text, obrázky, prvky a rámy nezmiznú z okraja obrazovky
- Veľkosť, štýl a farba písma zodpovedajú typu vzhľadu textu
- Text, ktorý sa posúva (zadané údaje) sa zobrazuje správne
Skontrolujte nasadenie modulov po celom svete v ich skrátenom a rozšírenom okne prehliadača alebo pri otáčaní mobilného zariadenia. Počas prechodu z stolný počítač do mobilného telefónu alebo prejdite, aby ste presne vedeli, ktoré moduly sa majú zobraziť v okne prehliadača.
Nakoniec
Zistite, ako je webový program vikorizovaný. Môžete pristupovať k množstvu informácií zo služby Google Analytics, aby ste videli, aké zariadenia používajú vaši zákazníci na prístup k vašej webovej lokalite. Použite automatizované nástroje a simulátory na vykonávanie základného overovania a funkčného testovania na vysokej úrovni a prepojte ich s manuálnym testovaním v reálnom svete.
Dnes už nie je potrebné prekonfigurovať stránku, ak je potrebná mobilná verzia. A každým dňom pribúda ľudí, ktorí používajú smartfóny a tablety. V čase písania tohto článku približne 20 % prispievateľov blogu používa na prezeranie mobilné zariadenia. Teraz máte prístup na moju stránku z telefónu alebo tabletu.
Žiaľ, nikdy som o takýchto vodidlách neuvažoval, ale keď ich objem presiahol 10% skutočného objemu, začal som používať adaptívne rozloženie. To umožnilo správne zobrazovať obsah na mobilných zariadeniach a podporovať lojalitu k stránke zo strany predajcov aj zvukové systémy.
Mobilná verzia stránky a adaptívny dizajn nie sú to isté. Tento článok hovorí o testovaní adaptívneho rozloženia, keď sa dizajn stránky zmení podľa rozlíšenia obrazovky čítacieho zariadenia.
Aby ste sa uistili, že sa vaša stránka zobrazuje správne na mobilných zariadeniach, musíte ju skontrolovať a na to potrebujete množstvo relevantných služieb a nástrojov.
Shvidka reviduje adaptívne rozloženie
Populárny internetový prehliadač (prehliadač) Mozilla Firefox vybavená vstavaným nástrojom na kontrolu vhodnosti dizajnu webovej stránky pred jej zobrazením na mobilných zariadeniach. Ak chcete rýchlo začať, prejdite na „Menu“ - „Rozrobka“ - „Adaptívny dizajn“. Alebo stačí stlačiť tri klávesy na klávesnici naraz ++[M]
Mali by ste namaľovať niečo takéto:
Zmenou veľkosti a orientácie obrazovky môžete skontrolovať, ako sa vaša stránka zobrazuje na mobilných zariadeniach.
Prehliadač Google Chrome Môže existovať aj povzbudenie na revíziu prispôsobivosti dizajnu webovej stránky. Ak to chcete urobiť, prejdite do ponuky, vyberte položku „Ďalšie nástroje“ a potom „Nástroje pre návrhárov“ (alebo stlačte kláves ).
Potom stlačíme ikonu adaptívneho dizajnu (alebo ihneď stlačíme klávesnicu ++[M]):
V strede obrazovky uvidíte, ako sa bude vaša stránka zobrazovať na obrazovkách mobilných zariadení:
SEO testovanie mobilného dizajnu
Zdá sa, že dvaja lídri v oblasti ľahkého vyhľadávania Google a Yandex majú svoju vlastnú neskromnú predstavu o tom, ako možno stránku zobraziť na obrazovkách mobilných zariadení. Ak sa stránka považuje za neprístupnú pre mobilné prehliadače, hodnota sa zníži na zvukové video. Ak teda podľa SEO nechcete míňať peniaze za mobilné zariadenia, nemusíte mať len responzívny dizajn, ale mali by ho zvážiť aj zvukové systémy, aby bol vhodný pre mobilné zariadenia.
Ak chcete skontrolovať prispôsobivosť, získajte pomoc služby Google Prejdeme na ďalšiu adresu a zadáme názov vašej stránky: https://www.google.com/webmasters/tools/mobile-friendly/.
Os vyzerá takto ako výsledok kontroly môjho blogu:
S Yandexom je to trochu komplikovanejšie, aby ste to skontrolovali, musíte sa zaregistrovať v službe Yandex.Webmaster a rýchlo získať prístup k beta verzii rozhrania:
Online služby testovania adaptability
Prezentujte (ukážte), ako sa váš web javí hlavným oddeleniam týchto služieb mobilné zariadenie. Neexistujú žiadne webové stránky s takouto funkcionalitou. Budem na nich ešte pracovať. Vo väčšine prípadov zápach duplikuje funkčnosť FireFox a Chrome.
Google resizer
Opäť začnem s Google, ktorý má svoju vlastnú službu na demonštráciu prispôsobivosti: http://design.google.com/resizer/#
Prehľadávač Quirktools
Ďalšou príjemnou službou je http://quirktools.com/screenfly/. Ukážte nám, ako sa dá vaša stránka zobraziť v televízii!
Prispôsobený Symby.ru
No, aby som nevytvoril imidž „pestovateľa šunkového syra“, ukážem na inú stránku: http://symby.ru/adaptest/. Na jednej strane uvidíte množstvo rôznych obrazoviek.
Rýchlosť mobilnej verzie stránky
Po dokončení sťahovania je vaša stránka responzívna a správne sa zobrazuje na obrazovkách väčšiny zariadení, zmeňte rýchlosť svojho robota. Opäť som sa vrátil k stovke mobilných zdvihákov.
PageSpeed Insights
Google je vždy popredu pred celou planétou: https://developers.google.com/speed/pagespeed/insights/ . Táto služba vám ukáže, ako stránka vyzerá na obrazovke telefónu a poskytne odporúčania na optimalizáciu kódu na zvýšenie rýchlosti prehliadania na mobilných zariadeniach.
WebPageTest
A na záver vám uvediem príklad služby, ktorá nielen ukáže, ako stránka vyzerá na mobilnom zariadení, ale ukáže aj rýchlosť jej robota: http://www.webpagetest.org/
Višnovki
Podľa mňa je pri každodennej práci pri zmenách dizajnu webstránky jednoduchšie využiť príležitosť prehliadačov vo FireFoxe ten Chrome. Preto je bezpodmienečne nutné preveriť vernosť zvukových systémov vášmu dizajnu. A potom môžete pre pokoj duše alebo na pochválenie rýchlo využiť online služby.
Pohľad autora:"Uistite sa, že zmeníte veľkosť prehliadača, čoskoro to budete môcť vidieť!" Ako často to počujete? Možno už nie tak často, ale ak vyvíjate responzívne weby, viete o čom hovorím: keď občas upravujete DOM a CSS, ťaháte okraje prehliadača sem a tam, čím robíte testovacie zmeny a hľadať prípadné nepresnosti.
Mimochodom, je dôležité to urobiť pri pokuse o úpravu veľkosti obrazovky rôznych zariadení.
Ak sa zaoberáte vývojom spoločnosti, možno na testovanie bez zariadení poskytovaných spoločnosťou. Tam, ako hovorím, máme iPad, iPhone, jeden alebo dva ďalšie tablety, notebooky a stolné počítače. Keďže nemáte taký luxus, musíte využiť to, čo je po ruke.
Doma mám dva rôzne notebooky, dva rôzne zariadenia so systémom Android: Kindle a Nexus 7. Tieto zariadenia používam na testovanie svojich schopností na voľnej nohe, ale uvedomil som si, že to nie je úplný zisk. Nie je tam vôbec nič iOS zariadenia, a aj keď si vás vážim ako skorého nasledovníka, neplánujem si kúpiť nový telefón/tablet/tablet, pokiaľ nebude v predaji.
Prečo teda obťažovať predajcu? V súčasnosti narastá počet nástrojov založených na prehliadači, ktoré vyhovujú veľkosti obrazovky naprieč zariadeniami. Rôzne nástroje, samozrejme, prichádzajú s rôznymi súbormi charakteristík a rôznymi úrovňami účinnosti. Poďme sa tu pozrieť na ich činy.
Na testovacie účely som si vzal prvú skutočne prispôsobivú stránku, ktorú som vytvoril, PyjamasOnYourFeet.com. Na základe šablóny Brownie HTML5 je veľmi cool a neškodný pre silu vývojárov na EGrappleri.
Som citlivý?
Som citlivý? – absolútne jednoduchý a jednoduchý pohľad na vašu stránku z pohľadu toho, ako sa zobrazuje na niekoľkých rôznych zariadeniach. Všetky sú na iOS a sprievodca na stránke vysvetľuje váš výber. Nepredstavuje rovnaké prvky keramiky a možnosti výberu, len jednoduchšiu a elegantnejšiu prezentáciu. Zväčšite veľkosť a pozrite sa znova:
Pracovná plocha – 1600 x 992 pixelov, ktoré sa menia po mierke (0,3181)
Laptop – 1280 x 802 pixelov, ktoré sa líšia nad rámec rozsahu (0,277)
Tablet – 768 x 1024 pixelov, ktoré sa menia podľa mierky (0,219)
Mobil – 320 x 480 pixelov, ktoré sa mení po mierke (0,219)
Citujem predajcu: Toto nie je testovací nástroj, je dôležité pracovať na správnych zariadeniach. Ale s nástrojom Švédske snímky obrazovky(pre mňa) to dáva vizuálnu schopnosť „hovoriť“ v interakciách s klientmi, ktorých málo rešpektujete.“
zariadenie pozitívne
deviceponsive podobný webu Am I Responsive? Pretože jednoducho úhľadne zobrazuje vašu stránku, neexistujú žiadne ovládacie prvky ani dostupné možnosti, ak sú na pravej strane zariadenia. Všetky vône sú zobrazené súčasne na jednej stránke. Má veľa sily - hlavičku môžete upraviť zmenou farby pozadia a vložením svojho loga a potom „zipscreen“. Týmto spôsobom môžete jednoducho označiť svoj web pri zobrazovaní snímok obrazovky klientovi. Zariadenia a veľkosti obrazovky uvedené na tejto stránke:
Macbook – 1280 x 800
iPad (orientácia na výšku) – 768 x 1024
iPad (orientácia na šírku) – 1024 x 768
Kindle (orientácia knihy) – 600 x 1024
Kindle (orientácia na šírku) – 1024 x 600
iPhone (orientácia na výšku) – 320 x 480
iPhone (orientácia na šírku) – 480 x 320
Galaxy (orientácia knihy) – 240 x 320
Galaxia (orientácia na šírku) – 320 x 240
Ako vo väčšine podobných prístrojov, aj v malých zariadeniach sa objavujú rolovacie režimy. IN skutočné zariadenie pachy sa nezobrazia, ale ak chcete odstrániť možnosť posúvania sa v testovacom zobrazení na nezmyslovom zariadení, budete musieť postupovať podľa týchto krokov.
responzívny test
Keďže test odozvy na zariadenie zobrazuje váš web na rôznych zariadeniach, namiesto toho, aby ste ich všetky zobrazovali na jednej strane, vy si vyberiete, ktoré zariadenie chcete sledovať. jednoduché menu na vysokej strane. Pri pohľade na túto stránku na stredne veľkom notebooku som si všimol, že zmenená strana funguje dobre a umožňuje vám zobraziť celú stránku zo stredného okna testovacieho zariadenia.
Predvedie sa tu trinástka rôzne farby Vidím, od skvelého monitora stolného počítača až po takzvaný „Crappy Android“ (aby som bol spravodlivý, majú možnosť s názvom „ Android je lepší"(Lepší Android).
Skúšam Firefox na tejto stránke a trochu som narazil. Upozorňujeme, že na snímke obrazovky medzi zelenou hlavičkou a oblasťou obsahu s bielym pozadím je iba tmavý odtieň, na ktorom je možné zobraziť posúvač obrázka.
responzívny.je
Je veľmi podobný dvom predným a jediné, čo ich odlišuje, je responsive.is – ide o plynulú animáciu zobrazenia jedného zariadenia k druhému, ako aj o pripomínajúce prekrytie, ktoré ukazuje „nevýraznosť“ stránky, keď vypadne z okna, pozriem sa.
Jediné dostupné možnosti sú tu – automatické, ktoré uloží okno vášho prehliadača a zobrazí stránku tak, ako ste ju používali alebo prešli na novú: Pracovná plocha; Tablet (orientácia na šírku); Tablet (orientácia knihy); Smartphone (orientácia na šírku) a Smartphone (orientácia na výšku), rozmery v pixeloch nie sú uvedené.
Screenqueries
V stávke je opäť množstvo právomocí a možností, ako odlíšiť Screenqueries od iných stránok. K dispozícii je 14 telefónnych a 12 tabletových zariadení s prídavným prvkom na prepínanie medzi režimami orientácie na výšku a na šírku. Vône sú zobrazené na očíslovanej pixelovej obrazovke a veľkosť displeja je v pravej dolnej časti testovacieho displeja. Okraje displeja sú natiahnuté, takže si môžete otestovať veľkosť obrazovky. Pohnite myšou alebo kliknite na testovaciu oblasť a pozadie sa zmení na sivú, s menej skresleným vzhľadom.
Tsikava zvláštnosť Ktorá stránka – pre niektoré zariadenia existuje možnosť „True view“, ktorá zobrazuje vašu stránku zabalenú na danom zariadení prehliadač chrome. Bohužiaľ, ako už viem, Firefox nedokáže zobraziť posúvač obrázkov na testovacej stránke. Nebojte sa, z prehliadačov môžem ľahko uprednostniť Firefox, ale našťastie máme možnosti.
Screenfly
Screenfly skutočne zlepšuje použiteľnosť. Ponúka deväť zariadení väčších ako tablety, od 10-palcového notebooku po 24-palcový desktop, päť tabletov, deväť smartfónov, tri veľkosti televízorov a možnosť veľkosti obrazovky. Či už si vyberiete túto možnosť, môžete ju zabaliť na výšku alebo na šírku pre ďalšiu položku ponuky. Môžete si vybrať, povoliť rolovanie a jedným kliknutím na tlačidlo vygenerovať správu, ktorá je rozdelená.
Stránka je proaktívna v tom, že poskytuje informácie o rozmeroch pixelov. Veľkosť zariadenia s ponukou sa zobrazuje v rozmeroch pixelov, veľkosť okna vášho prehliadača sa zobrazuje v pravom hornom rohu okna a veľkosť vybratej možnosti sa zobrazuje v päte pod zobrazením z adresy URL stránky skúšaš byť. Táto malá funkcia uľahčuje dokumentovanie snímok obrazovky a zdieľanie informácií s klientmi.
Zo všetkého, čo bolo povedané, by mi už bolo zle ideálny nástroj Ale vývojári Screenfly objavili schopnosť vytvoriť túto jednoducho vynikajúcu triedu a dali silu proxy servera. Citujem z mojej webovej stránky: „Screenfly môže používať proxy server na napodobňovanie zariadení, keď sa pozeráte na vašu webovú stránku. Proxy server simuluje správanie klientskeho agenta zariadení, ktoré vyberiete, ale nie správanie týchto zariadení. Všetky ostatné otvorené nástroje sú zobrazené vpravo a vrátane CSS. Screenfly je jediný, ktorý umožňuje testovanie na platforme klientskeho agenta.
Protestovať proti tejto hodnosti jedného z výtvorov mojej stránky so samozrejmosťou mobilná verzia Môžem povedať, že výsledky boli veľmi dobré. Všetko sa zobrazilo presne tak, ako som to videl, a funkcie boli otestované. Netreba dodávať, že testovanie radov agenta koristuvach sa stalo tradičným, ale táto stránka bola vytvorená už dlho a sila proxy servera sa stala efektívnou hnedý prídavok do nového.
Višňovok
Vidíte, že existuje dostatok zdrojov na testovanie adaptívnych stránok. Zápach detegujú jedinečné úrady; Aké stránky sa vám budú podobať na tie vaše, a dúfam, že vás povzbudím, aby ste ich preskúmali a experimentovali s nimi. O to viac budeme mať my, maloobchodníci, poriadne hnedé nástroje, to je lepšie.
