DevTools – przyjaciel testera
Dziś wpis o narzędziu, które powinien znać każdy tester testujący aplikacje webowe mowa oczywiście o popularnych DevTools, czyli narzędziach deweloperskich.
Same DevToolsy są przydatne dla testerów na wielu płaszczyznach, zaczynając od takich rzeczy jak audyt strony, wyszukiwanie elementów potrzebnych do testów automatycznych aż po wykonywanie audytu strony.
Zakładki
Poniżej znajdziesz listę funkcjonalności, z którymi jako początkujący testerzy powinni się zaznajomić.
Będą to zakładki:
- Elements
- Console
- Network
- Device toolbar
- Lighthouse (audyty)
- Application
Elements
Zakładka ta jest totalną podstawą. Znajdziemy w jej DOM, czyli strukturę HTML strony, na której aktualnie się znajdujemy. Jest to szczególnie przydatna zakładka jeśli automatyzujemy testy, gdyż możemy znaleźć tam elementy potrzebne do automatyzacji.
Console
Konsola służy to zarejestrowanych komunikatów Kiedy przeglądarka przetwarza JavaScript i natrafi na wyrażenie mające wyświetlić daną treść, to znajdzie się ona tam. Możemy też w konsoli uruchamiać kod JavaScript. Znajdziemy tam również informacje o błędach.
Network
Network – zakładka network przedstawia nam ruch HTTP. Możemy również podejrzeć w status code, adres, metodę HTTP, czas czy rozmiar. Jest to jedna z najczęściej używanych zakładek przy testach aplikacji webowych.
Device toolbar
Device toolbar -Funkcja ta pozwala nam symulować działanie naszej strony bądź aplikacji na wybranych rozdzielczościach, które są rozdzielczościami urządzeń mobilnych. Przeglądarka ma wgrane kilkanaście rozmiarów urządzeń mobilnych.
Dzięki temu możemy zobaczyć jak nasza strona wygląda na iPhonie czy najnowszym Samsungu. Device toolbar pozwala też symulować wydajność urządzeń mobilnych z niskiej półki cenowej czy średniej, aby włączyć tą funkcję, wystarczy kliknąć Online i wybrać Mid-thier mobile bądź Low-end mobile.
Lighthouse
Lighthouse (audyty) – lighthouse służy do wykonania audytu strony, na jakiej się znajdujemy. Możemy przeprowadzić audyt naszej strony pod kątem takich aspektów jak wydajność, dostępność, dobrych praktyk, seo oraz pwa.
Application
Application – zakładka application jest dość obszerna, dlatego skupię się w tym wpisie zaledwie na kilku ważnych aspektach.
Pierwszą z opcji, jaką możemy sprawdzić, są ciasteczka (cookies), możemy sprawdzić ich nazwę wartość czy domenę, z której są. Mamy również możliwość sprawdzenia session storage oraz local storage, warto zapamiętać, że różnica, jaka jest między nimi to fakt, że zawartość session storage jest kasowana po zakończeniu sesji strony natomiast local storage jest przetrzymywana bez daty wygaśnięcia.
W zakładce storage możemy również wyczyścić wszystkie dane, jakie obecnie przetrzymujemy, co również jest przydatną funkcją podczas testowania w przypadku kiedy chcemy zacząć ponownie przeglądać zasób bez zapamiętanych danych.
Photo by Pankaj Patel on Unsplash
