Nedávno jsem plánoval velký projekt refaktoringu CSS s cílem převést velký web elektronického obchodu ze zastaralého 1024px designu na modernější, responzivní design.
Tato situace samozřejmě není ojedinělá. Responzivní design se oficiálně dostal z UX blogů do kanceláře na rohu – web bude od nynějška pružný.
Nebezpečí responzivního vývoje
Když vstupujeme do této éry budování pro použitelnost více zařízení, je důležité zmírnit běžné nástrahy responzivního vývoje, mezi které mimo jiné patří:
-
Responzivní multiplikační efekt Pokud jste si dříve mysleli, že css je nepředvídatelné, pak si možná budete chtít sednout k tomuto:Dovybavení vašeho webu novými responzivními body přerušení znásobí tuto záhadu 2 nebo 3 nebo více – zvláště pokud nejste schopni použít bitvu. -testovaný framework jako Bootstrap nebo Foundation atd...
-
Spící draci I když máte ten luxus začít svůj css projekt od nuly, při vývoji css se často stávají chyby v bodech přerušení, které nevidíte. Například při ladění mobilního zobrazení může zobrazení na ploše získat regresi – a protože vizuální testování vyžaduje fyzickou manipulaci s velikostí a polohou posouvání výřezu prohlížeče, není prostě možné, aby vývojář zachytil vše.
-
Smrt tisícem chyb Pokud neautomatizujete vizuální regresní testování, velký refaktor může snadno zahltit skupinu QA zbytečně vysokým počtem chyb CSS v jediném sprintu.
Reakce na citlivý vývoj
Zodpovědná věc, kterou je třeba udělat vzhledem k těmto expozicím, je zmírnit vizuální chyby pomocí automatizovaného vizuálního testování – to je v tomto případě programově porovnat vykreslování responzivního obsahu v různých velikostech výřezu, aby se zajistilo, že změny provedené na jedné velikosti obrazovky nenaruší rozložení na jiné. velikost obrazovky. Automatizace tohoto procesu je klíčová – protože váš počítač se nikdy neomrzí porovnáváním stejného designu znovu a znovu. To je zásadní pro snížení počtu chyb, které jdou do vašeho procesu kontroly kvality, nebo v horším případě do výroby.
Zde přichází na řadu BackstopJS. BackstopJS je přímočarý nástroj založený na konfiguraci, který vývojářům usnadňuje automatizaci vizuálního testování více adres URL na různých velikostech obrazovky. Zde je základní myšlenka:
-
Nejprve pořiďte referenční snímky obrazovky Jakmile budete mít funkční implementaci CSS, BackstopJS vezme sadu referencí snímky obrazovky. Tyto snímky obrazovky budou uloženy pro pozdější srovnání.
-
Po provedení změn otestujte CSS: Řekněme, že v kroku 1 výše jste měli perfektní zobrazení na ploše a poté jste začali pracovat na mobilním zobrazení. Po práci na mobilním zobrazení můžete spustit test, abyste se ujistili, že žádná z vašich změn na mobilním zařízení nenarušila zobrazení počítače.
-
Opakujte Můžete pokračovat v opakování referenčního/testovacího procesu, abyste se ujistili, že se ve všech zobrazeních vždy posouváte vpřed.
Tento přístup je ještě efektivnější při provádění změn ve stávajících projektech, kde chcete zajistit, aby přidání nové funkce do stávajících návrhů nenarušilo ostatní oblasti.
Načasování je všechno
Původním případem použití BackstopJS bylo testování více statických webových stránek, takže zpočátku vykresloval snímek obrazovky hned po načtení požadované stránky. To fungovalo skvěle pro velké, primárně statické aplikace na straně serveru, ale co aplikace s jednou stránkou a stránky, které používají progresivní vylepšení? Toto jsou případy, kdy potřebujeme explicitně sdělit BackstopJS, když je stránka připravena, že je "detailní".
Ve svém nejnovějším vydání (0.4.0) řeší BackstopJS tento hlavolam dvěma novými možnostmi konfigurace:readyEvent a delay . readyEvent určuje řetězec (který je vaší aplikací přihlášen do konzole), na který se má čekat před pořízením snímku obrazovky. delay parametr určuje dobu (v milisekundách), po kterou se má čekat před pořízením snímku obrazovky. Mohou být také použity společně, v takovém případě BackstopJS nejprve čeká na readyEvent pak čeká na další trvání delay parametr pro pořízení snímku obrazovky.
Podívejme se na to v akci!
Zřejmý scénář, kdy byste chtěli počkat, než pořídíte snímek obrazovky, je, když čekáte na dokončení volání ajax a odeslání informací do zobrazení. Ale zajímavější (a možná složitější) scénář může být, když čekáte na dokončení vsunuté animace. Pojďme se na ten případ podívat...
Upozornění:toto cvičení vyžaduje instalaci Node a NPM, více informací zde
Připravil jsem pro nás jednoduchou aplikaci AngularJS k testování. Zde si stáhněte soubor myAngularProject.zip a rozbalte projekt někam do vašeho vývojářského prostředí.
Podívejme se na adresář projektu:
Nainstalujte BackstopJS
Toto je jednoduchý projekt AngularJS, na kterém budeme pracovat. Dalším krokem je instalace BackstopJS. Ve vašem terminálu cd na váš ./myAngularProject umístění a spuštění
$ npm install backstopjs
Výše uvedený příkaz vytvoří strukturu složek ./node_modules/backstopjs v rámci ./myAngularProject jako na obrázku níže.
Pro BackstopJS existují tři další závislosti. V současné době nejsou součástí balíčku BackstopJS.
Pokud ještě nemáte aktuální globální instanci Gulp...
$ sudo npm install -g gulp
Pokud ještě nemáte aktuální globální instalaci PhantomJS...
$ sudo npm install -g phantomjs
Pokud ještě nemáte aktuální globální instalaci CasperJS…
$ sudo npm install -g casperjs
Prohlédněte si soubory našich projektů
Podívejme se na stránku, kterou budeme testovat. Otevřete ./simple.html .
Toto je soubor, který použijeme pro naši demonstraci testu. Skládá se z nadpisu a dvou šedých rámečků obsahu. Dost jednoduché...
Nyní se podívejme na konfigurační soubor backstopjs. Otevřete ./backstop.json
Toto je konfigurační soubor, který BackstopJS hledá při spouštění testů na vašem projektu. První uzel:viewports bere seznam objektů výřezu sestávající z názvu a rozměrů výřezu, který simulujeme - v tomto případě nastavujeme tři velikosti. Druhý uzel:scenarios je seznam scénářů pro test, kde zadáváme testName , url , DOM selectors chceme otestovat a volitelně readyEvent a delay parametry.
Vezměte prosím na vědomí:parametr adresy URL funguje jako značka kotvy href vlastnictví. Pokud řetězec cesty k souboru začínáte http:// vytáhnete stránku na zadané internetové doméně. Pokud jednoduše zadáte test/simple.html budete vytvářet relativní požadavek na soubor, který je relativní k ./node_modules/backstopjs/ adresář, např. ../../simple.html odkazuje na soubor v kořenovém adresáři myAngularProject .
Takže s naším projektem na místě a načteným BackstopJS, pojďme na to.
Poprvé spusťte naše testy
Nejprve se ujistěte, že váš pracovní adresář je ./myAngularProject/node_modules/backstopjs
Dále Vytvořte referenční soubory pro projekt...
$ gulp reference
...a okamžitě spusťte test:
$ gulp test
Po skončení testovací sekvence by měl BackstopJS otevřít výsledky v Chrome. Vzhledem k tomu, že jsme neprovedli žádné změny mezi našimi referenčními obrazovkami a našimi testovacími obrazovkami, vše by mělo projít...
Proveďte změny a znovu otestujte
Nyní udělejme změnu. Otevřete simple.html znovu a odkomentujte řádky 30 až 38. Do naší jednoduché aplikace tak přidáte oslnivou animaci.
A měli byste vidět... 
Vím. Oslnivý, že?
Tak pojďme otestovat to . Měli bychom získat velmi odlišný výsledek...
$ gulp test
Takže nepropadejte panice – to se zcela očekává. Tyto prvky chybí, protože náš snímek obrazovky byl pořízen právě po dokončení načítání stránky. Abychom mohli pořídit snímky obrazovky, musíme chvíli počkat, až bude naše animace dokončena.
Vylepšete komunikační dovednosti své aplikace
Tak jak dlouho máme čekat? S vývojem webu v praxi většinou nevíme. Ve většině webových aplikací se obvykle dějí nejrůznější asynchronní věci a je opravdu nejlepší, když aplikace dokáže určit, kdy je veškerá závislá aktivita (např. volání ajaxu, animace, načítání písem atd.) dokončena – a poté odeslat signál.
V našem případě už to bylo hotové. Naše aplikace Angular poslouchá animationEnd událost druhého bloku obsahu a protokolování textu backstop.ready do konzole.
Využijme toho a aktualizujme naše backstop.json config, aby BackstopJS věděl, kdy je aplikace skutečně připraveno k vyhodnocení.
Otevřete ./backstop.json znovu a změňte readyEvent parametr na "backstop.ready"
Nyní to zkusme znovu.
Nejprve "požehnej" naše změna konfigurace... (viz poznámka níže k gulp bless *)
$ gulp bless
A za druhé, znovu spusťte náš nový a vylepšený test...
$ gulp test
A Viola! (A tím „Viola“ myslím, že všechny testy by měly projít úspěšně.)
Místo toho jsme mohli použít vlastnost delay -- pokračujte a nastavte readyEvent na null a změňte hodnotu zpoždění na 2000. Podívejte se, co se stane.
Nakonec můžete preferovat metodu události nebo metodu zpoždění nebo obojí. je na vás, abyste se rozhodli, která metoda je pro vás nejlepší.
Shrnutí
V tuto chvíli si možná někteří z vás pomyslí:ahoj, Garrisi, BackstopJS je skvělý nástroj a tak dále, ale neukázali jste, jak nachází citlivé chyby . Důvodem je, že již existují dema ilustrující toto téma. Touto ukázkou jsem chtěl zdůraznit speciální (a možná nezřejmé) úvahy týkající se vizuálního testování aplikací na straně klienta (na rozdíl od aplikací na straně serveru).
Tuto techniku lze použít ve všech druzích SPA, scénářích progresivního vylepšení a widgetech třetích stran (např. Twitter, Facebook, akcie, počasí, posuvníky hrdinských obrázků atd.)
Jako u většiny testovacích metod opravdu pomáhá mít datové pahýly, abyste se ujistili, že pokaždé porovnáváte jablka s jablky. To znamená, že pro případy, kdy to není možné, BackstopJS přijímá také černou listinu selektorů DOM, takže se můžete rozhodnout ignorovat věci, jako jsou bannery nebo jiný dynamický obsah – více informací v dokumentaci.
BackstopJS je optimalizován pro testování velkého počtu stránek (nebo stavů URL, pokud se jedná o SPA). Na rozdíl od hlubokých interakcí je BackstopJS myšlen spíše jako kontrola zdravého rozumu, kterou můžete aktivně používat během vývoje CSS.
Pro hlubší vizuální testování aplikací (včetně přechodných stavů a mikrointerakcí) doporučuji vyzkoušet PhantomCSS nebo si napsat vlastní skripty CasperJS. Pokud jste postupovali podle tohoto návodu, pak již máte na svém stroji nahráno mnoho nástrojů, které potřebujete.
Zjistil jsem, že jakmile jsem si zvykl na automatizaci vizuálního testování, je těžké bez něj začít nový velký projekt.
Rád bych od vás slyšel, jestli používáte BackstopJS ve vaší vývojové skupině. Napište mi a dejte mi vědět! @garris
* Ve většině případů budete chtít znovu spustit gulp reference při aktualizaci konfiguračního souboru. U této ukázky toto chování potlačujeme. Děláme to pomocí gulp bless jak je uvedeno výše.