Testování napříč prohlížeči

Jistě nejsem jediný, kdo řeší otázku, zda se mu budou webové stránky vykreslovat ve všech prohlížečích stejně (i v zaměstnání, kde je podpora Internet Explorer 6 a podobných archaických prohlížečů platná). Často jsem si pokládal otázku, zda jsou některé nabízené nástroje použitelné, zda je jejich vykreslovací jádro totožné s „nativní“ verzí a co je v nich jinak. A především, zda se dají brát jejich výsledky jako relevantní.

Vyzkoušel jsem mnoho nástrojů, použitelné aplikace i aplikace poskytující grafické snímky stránky, a zvykl jsem si na pár způsobů, jak tuto problematiku řešit. Možnosti, které jsem zkoušel byly například kvůli multiplatformní podpoře nebo podpoře prohlížečů (a především testování na jiné platformě) a někomu se to může zdát zbytečné (na velkém projektu by to měla být nejspíše práce testerů).

Když jsem tento článek připravoval (tedy formuloval své myšlenky, poznámky a připravoval na publikaci), byl zveřejněn článek Tools to Check for Cross-browser Compatibility na tripwire magazine. Ve zmíněném článku naleznete některé podobné nástroje, které zde zmiňuji, ale které jsem vyzkoušel a případně používám.

Jaké jsou možnosti?

Jak jsem zmínil v úvodu článku, existují nástroje pro přímé zobrazení stránek s možností procházení (chová se jako prohlížeč) a nástroje, které pořízují z jednotlivých stránek screenshoty a zobrazují tak případné chyby v rozložení stránky, avšak stránky není možné procházet a testovat tak funkčnost např. JavaScriptu.

Jako první se zmíním o nástrojích, které pořizují snímky obrazovek vybrané stránky. Těchto nástrojů je poměrně hodně a dají se poměrně slušně využít pro kontrolu zobrazení v mnoha prohlížečích, avšak není možné samozřejme testovat funkčnost. Dají se tak poměrně rychle (což samozřejmě závisí na množství požadovaných prohlížečů) odladit velké nedostatky v „nasekaném“ designu. Má to ale velkou nevýhodu, protože není možné, jak jsem již zmiňoval, otestovat další funkčnost a vlastně ani rozložení při různých rozlišeních (pokud to sama služba nenabízí).

Nástroje pro přímé testování jsou vlastně takové prohlížeče (a prohlížeče v podstatě totožné, jako ty, které emulují / simulují), kde je možné otestovat zobrazení, funkčnosti a rozložení, jako v normálním prohlížeči. Je to asi nejlepší varianta pro testování napříč prohlížeči, tzv. cross-browser testing.

Poslední možností, kterou bych zmínil a kterou osobně používám, je možnost používat virtuální prohlížeče a nebo prohlížeče z cloudu. Je tak možné mít na svém počítači nainstalováno mnoho verzí jednotlivých prohlížečů i na mnoha platformách. Je to už poměrně obskurní řešení, které vyžaduje poměrně značné množství času, ale vývojář nebo tester bude přesně vědět, jak se bude stránka v daném prohlížeči a na dané platformě chovat.

Snímání stránek – získání screenshotů

Pomocí této metody, jak jsem již zmínil, je možné získat snímky vybrané stránky v mnoha prohlížečích. Asi nejpoužitelnější službu, kterou jsem našel a kterou občasně využívám, je IE NetRenderer, který umí stránku vykreslit jako v prohlížeči Internet Explorer ve verzích 5.5 až 9, ale pouze v tomto prohlížeči. Je to poměrně známá a využívaná služba, avšak pro testování webových stránek pro prohlížeč Internet Explorer bych snímání nepoužil (i když pro vyzkoušení úprav na straně CSS a HTML to může stačit).

Má stránka vykreslená v Internet Explorer 9 pomocí IE NetRenderer.
Má stránka vykreslená v Internet Explorer 9 pomocí IE NetRenderer.

Jistě velice zajímavou se jeví služba browsershots.org, která nabízí k využití 73 prohlížečů (i ty samé prohlížeče, ale v různých verzích) na 3 platformách, což je opravdu veliké množství. U této služby to chce chvilku trpělivosti, než pořídí pro vybrané prohlížeče snímky vybrané stránky. Zkoušel jsem vybrat všechny nabízené možnosti a zabralo to dobrých pár hodin. Vývojář nebo tester tak ale získá poměrně značné množství přehledů z různých prohlížečů na různých platformách.

Nabídka až 73 prohlížečů služby browsershots.org
Nabídka až 73 prohlížečů služby browsershots.org.

Nástroje jako prohlížeče

Takových aplikací není tolik nebo já osobně jich asi příliš moc neznám. Setkal jsem se s poměrně dobře použitelným nástrojem IE Tester, ve kterém je možné vyzkoušet fungování webové stránky jako v prohlížeči Internet Explorer verze 5.5 až 9 (pouze na Windows 7). Co jsem zkoušel „nativní“ Internet Explorer 6, nenašel jsem žádné markantní rozdíly v chování či vykreslování a používajího (včetně mě), kolegové v zaměstnání.

Má stránka v prohlížeči IE Tester vykreslená pro Internet Explorer 7.
Má stránka v prohlížeči IE Tester vykreslená pro Internet Explorer 7.

Co jsem v něm vyzkoušel mnoho webů, stává se, že oproti „nativní“ verzi vyhazuje až příliš mnoho chyb týkajících se JavaScriptu (takový ten známý ladící dialog). Po odklikání však stránka funguje tak jak má. Nespoléhal bych se tedy na tuto aplikaci vždy, pokud bych měl pevně daný požadavek na některou verzi prohlížeče Internet Explorer, ale využíval bych jej pro „vychytání“ těch nejzávaznějších a nejviditelnějších chyb.

Virtuální prohlížeče a nebo prohlížeče z cloudu

V době rozvoje cloudu a cloudových aplikací se dá využívat i této technologie pro testování napříč prohlížeči. Služeb, které jsou zdarma je velice málo. Placených služeb je hodně a je zde možnosti využít 30 denní zkušební dobu. Osobně jsem některé z nich vyzkoušel, ale nejvíce jsem si oblíbil službu Spoon Browsers, kterou si musíte zaplatit, pouze pokud chcete využít možností pro prohlížeč Internet Explorer. Ostatní prohlížeče, tedy Mozilla Firefox, Google Chrome a Opera jsou zdarma a v několika verzích (např. Firefox 2, Opera 9 nebo Chrome 5). Služba Spoon nabízí možnosti cloudu, takže je možné pod svým účtem využívat nainstalované aplikace například v zaměstnání i doma bez nutnosti cokoliv instalovat (vyjma spoon pluginu, který slouží pro stahování aplikací, přihlašování a synchronizaci) a odezva je velice rychlá. Osobně tuto službu velice rád využívám, neboť není snadný způsob, jak mít na svém počítači nainstalovány různé verze prohlížečů.

Díky Spoon Browser si mohu zobrazit svou stránku například v prohlížeči Mozilla Firefox 3.
Díky Spoon Browser si mohu zobrazit svou stránku například v prohlížeči Mozilla Firefox 3.

Využívané prohlížeče se chovají naprosto stejně, jako když by jste měli prohlížeč nainstalovaný v přímo v počítači. Pokud se ještě někdo nerozhodl nainstalovat si Mozilla Firefox 4, je možné si jej zde vyzkoušet (i když je zde pouze jako 2. beta verze).

Virtuální prohlížeče

V poslední době jsem si já osobně velice oblíbil možnosti využívat virtuální počítač pro cross-browser testování. Mohlo by se zdát, že je to poměrně obskurní metoda a zbytečná, ale já využívám virtuální stroj pro distribuci Linuxu (Ubuntu a Debian), na kterém mi běží vývojový webový server.

Je tak možné otestovat webovou stránku i na této platformě, kde se vyskytují jíná písma (mně osobně se vykreslování písma v Linuxu příliš nelíbí) a kde jsou i další prohlížeče, které mohou uživatelé používat (například prohlížeč Konqueror jsem na Windows nesehnal a ten se docela dost používá – i když testovat pro jádro KHTML je téměř stejné jako pro starší Gecko). Díky tomu, že jsou distribuce Linuxu zdarma a aplikace umožňující virtuální počítač také, není problém provádět i toto testování.

Má webová stránka v prohlížeči Midori operačního systému Ubuntu Linux.
Má webová stránka v prohlížeči Midori operačního systému Ubuntu Linux.

Tímto způsobem je také možné zkoušet mnohé verze na vlastním operačním systému (kde není možné starší verzi nainstalovat) virtuálně a zajistit tak bezproblémový chod stránky i ve starším prohlížeči. Protože co může být horšího, než když vše nefunguje správně a zákazník se zlobí.

Internet Explorer 6 – není trnem v oku pouze vývojářům, ale i Microsoftu.
Internet Explorer 6 – není trnem v oku pouze vývojářům, ale i Microsoftu.

Je to opravdu nutné?

Po přečtení tohoto článku si někdo možná řekne, že je to všechno zbytečné a že na starší verze kašle. Bohužel to ale není tak jednoduché, pokud vyvíjíte velký projekt s velkou návštěvností (například 200 000 lidí měsíčně), kde pouhých 10% využívá starou verzi prohlížeče (což je 2000 lidí a to už není málo) nebo jiný prohlížeč, který nemáte nainstalovaný. Jistě není potřeba zřizovat virtuální stroj na cross-browser testování vlastního blogu, ale spíše na nějaký větší projekt nebo webovou aplikaci, která má daný obchodní model a špatné zobrazování by mohlo způsobit ztrátu případného zákazníka.

Mohlo by se také řici, že není potřeba testovat pro tolik verzí, protože se chovají téměř stejně. Je tam ale důležité to slovo téměř. Já osobně nemívám problém s vývojem pro majoritní verze prohlížečů na první dobrou (u větších úprav je to složitější). Avšak u některých elementů (v dnešní době především CSS3 a HTML5) je takové testování potřeba, ale také kvůli zobrazování v Internet Exploreru, kde i poslední 9. verze neumí to, co by měl umět moderní webových prohlížeč.

Komentáře

  1. Zdravím, jen jsem chtěl ze své zkušenosti říct, že všechny zde zmíněné nástroje + ještě použití standalone Exploreru vykazovali stejnou chybu při pokusu o rozchození průhledného PNG v MSIE < 6.0. Jakmile jsem však použil virtuální pc s danou verzí, tak vše chodilo jak mělo. Tedy je to asi jediná opravdu fungující možnost testování. Jediné na co to naráží jsou licence a legalita software.

  2. Jojo, zatím strip_tags, dokud nedodělám texy 😉

    Ano, pro starší verze Internet Explorer je možný vynutit podporu pro PNG transparenci.

Napsat komentář