Testy przeglądarkowe – co i jak?

Każdy kto chociaż raz miał styczność z procesem tworzenia strony internetowej słyszał o „testach przeglądarkowych”. Pod tą nazwą kryje się zestaw dość prozaicznych czynności – przeglądanie strony w różnych przeglądarkach i poprawianie błędów (cokolwiek rozumiemy pod tym słowem…). Większość webmasterów (delikatnie rzecz ujmując) nie przepada za tym etapem pracy i mimo że nie żyjemy już w czasach wojen przeglądarek (głównie chodzi o wojnę IE vs Netscape) to jednak do dzisiaj różnice w implementacji standardów i „fanaberie” twórców oprogramowania do przeglądania stron www potrafią przyśpieszyć proces siwienia nie jednego twórcy stron www. Jak radzić sobie z tym problemem? Zachęcam do lektury!

O co chodzi?

Z grubsza testy przeglądarkowe to czynność, która ma poprostu zapewnić. iż nasza strona dobrze wyświetla się w przeglądarkach, dla których jest optymalizowana. Dzięki sprawdzeniu sposobu wyświetlania strony pod różnymi konfiguracjami systemów operacyjnych, przeglądarek i rozdzielczości zyskujemy pewność, iż nic nigdzie się „nie rozjechało”.

Jednak już tutaj istnieją pewne problemy związane z definicjami. Przykładowo – jeśli jesteśmy deweloperami w firmie gdzie panuje filozofia tzw. pixel perfect design a ponad to oczekuje się od nas, iż strona będzie kompatybilna z przeglądarkami pokroju IE6 no to mamy problem na horyzoncie… Testy przeglądarkowe na pewno wykażą różne dziwne „bugi” i kilka następnych weekendów możemy wykreślić z życiorysu.

Jeśli jednak pracujemy w firmie o bardziej nowoczesnym podejściu, która stawia na RWD i stopniowe ulepszanie połączone ze zrozumieniem faktu, iż współczesny Internet to przede wszystkim interakcje (uff rozmarzyłem się) to testy przeglądarkowe zyskają bardziej realistyczny przebieg i to co będziemy musieli sprawdzić to „ogólna zgodność” z założeniem wyglądu oraz działanie różnych mechanizmów zaczynając od najbardziej banalnych sliderów itp. Oczywiście można powiedzieć, że takie podejście daje mniejsza kontrolę nad projektem, ale i na to jest remedium.

To do czego zmierzam to po prostu stwierdzenie, że testy testom nierówne, ale chodzi bardziej o podejście do tematu i ogólną filozofię projektową.

Klasyka gatunku

Jeśli podejść do kwesti tzw. testów przeglądarkowych bardzo ortodoksyjnie to musimy mieć na swoim komputerze zainstalowane kilka różnych przeglądarek i to w różnych wersjach. Do tego najlepiej gdybyśmy mieli kilka monitorów i na dokładkę więcej niż jeden system operacyjny. A i jeszcze oprócz tego powinniśmy mieć kilka tabletów i smartphoneów bo w dzisiejszych czasach RWD to raczej standard. Jeśli mamy to wszystko to możemy stwierdzić, że jesteśmy gotowi do tego by przeprowadzić testy przegldarkowe z prawdziwego zdarzenia.

Ok są łatwiejsze sposoby…

Printscreen vs. emulator

Internet (jak często to bywa) dostarcza nam wielu aplikacji, które mogą zaoczszczędzić finansowych trudów zakupu kilku tabletów i smarthponeów albo chociażby instalowania kilku przeglądarek. Najczęściej dostajemy do wyboru narzędzia, które emulują daną platformę albo robią printscreeny strony wygenerowane na danej konfiguracji. Co lepsze? Osobiście uważam, że emulator, ale to też kwestia gustu ;) Poniżej znajdziecie listę aplikacji, z którymi Wasze życie stanie się łatwiejsze.

Sauce Lab

Browsera

browserling

Adobe BrowserLab

Browsershots

Browserstack

BrowserCam

Litmus

Takie portale okazują się być wyjątkowo przydatne jeśli tworzymy stronę, która ma być wyświetlana na urządzeniach mobilnych. Widok responsywny w przeglądarce Firefox (Ctrl + Shift + M) pozwala sprawdzić ułożenie elementów, ale nie powie nam nic o tym czy np. udało się skutecznie wyświetlić jakąś konkretną właściwość CSS3 na jakimś konkretnym systemie i przeglądarce.

Realia

W rzeczywistości nigdy nie jesteśmy w stanie zapewnić identycznego (dosłownie identycznego) wyglądu stron internetowej na każdej konfiguracji. Nie ma co nawet mówić o samych przeglądarkach, kwestie rozdzielczości czy chociażby nasycenia kolorów też odgrywają ogromną rolę, więc nie obiecujmy klientom „obrazków” wyświetlonych w przeglądarce. Z drugiej strony współcześnie jest też łatwiej bo mamy takie przeglądarki jak np. Chrome czy Firefox, które są często aktualizowane i w zawrotnym tempie wdrażają nowości z zakresu HTML5 i CSS3. Niedaleko za nimi jest Opera i Safari zaś od czasu IE9 nawet przeglądarka firmy Microsoft zaczyna pozytywnie zaskakiwać, a jej następca IE10 ma być już przeglądarką, która „sśie mniej”

Jak więc widać nie ma się co przejmować. Internet to miejsce dynamiczne gdzie dla użytkownika najważniesza jest interakcja ze stroną, a nie jej idealna kompatybilność z jakimś projektem graficznym, którego ostateczny użytkownik witryny i tak nigdy nie zobaczy. Jeśli pamiętamy o tym to testy przeglądarkowe będą czystą przyjemnością, która sprawi iż wyłapiemy detale związane z wyświetlaniem naszej strony i upewnimy się, że elementy wyświetlają się poprawnie.

Całe szczęście co raz rzadziej słyszy się o jakiś hackach itp zabiegach. Standardy są co raz bardziej szanowne i jedyną przeszkodą jest tempo implementacji kolejnych nowości. Co więcej wielu projektantół stosuje metodę stopniowego ulepszania, która w naturalny sposób pozwala radzić sobie z problemami kompatybilności międzyprzeglądarkowej.

Zdjęcie pochodzi z: http://www.freedigitalphotos.net/