Siemano witam na moim blogu ! 😀 #zostańwdomu – > kliknij o informacje
Pewna osoba z grupy Testowanie Oprogramowania, pod jednym z moich ostatnich postów, napisała prośbę bym poruszył temat trybu dewelopera.
Tryb dewelopera czyli potocznie wszystkim znane F12 w przeglądarce.
Dla mnie to żaden problem, tak więc zaczynamy !
Na początek mem
Czym są narzędzia dewelopera ?
Po pierwsze z czym mamy do czynienia ? Czym jest tryb deweloperski przeglądarki ? To taki zbiór narzędzi upakowanych w jeden ‘kontener’, służący do tego by dowiedzieć się technicznych aspektów strony czy aplikacji webowych.
W skład owego trybu wchodzi między innymi konsola, zakładka sieć (network) czy np. cała struktura html dokumentu.
Różnice między przeglądarkami w kwestiach owych narzędzi, są niewielkie, dlatego używajcie, której chcecie.
Zakładka sieć – network
Zacznijmy od zakładki sieć, co kryje się pod tą zakładką ?
Kryją się tam żądania wysyłane oraz odbierane, między przeglądarką a serwerem.
Zerknijmy na bardzo prosty pojedynczy przykładowy wiersz żądania.
Mamy tabele która składa się z kolumny Name, w niej będzie lista żądań posortowana domyślnie najnowsze na dole (można to zmienić klikając na label name).
Klikając na dany wpis żądania mamy po lewej pokazane szczegóły z sześcioma kartami. Najbardziej interesujące są trzy z nich są to :
Headers czyli nagłówki, przybliżmy trochę screena aby zobaczyć szczegóły.
Tab nagłówek składa się też z sekcji.
Pierwsza sekcja general dotyczy, tego gdzie się dobijamy, jaka jest metoda żądania (o tym później). Bardzo ważny status code z kolorem, zielony najlepszy kolor sugeruje, że wszystko jest dobrze. 🙂
Kolejna sekcja responder headers czyli nagłówek odpowiedzi, zawiera często mniej wykorzystywane informacje o ustawionym ciasteczku, o kodzie statusu odpowiedzi i takie tam mniej lub bardziej przydatne informacje. Wszystko zależy od kontekstu, w którym wykorzystujemy informacje. Ostatnia sekcja to request headers czyli nagłówki requesta- pytania do serwera.
Karta parametry
Kolejna karta parametry to lista parametrów typu mapa czyli klucz – wartość.
Są to wszystkie parametry, które przekazuje przeglądarka do komunikacji z serwerem lub odwrotnie serwer do przeglądarki.
Jeśli pracujemy nad aplikacją czy stroną która posiada, różnorakie interakcje np. z bazą danych i frontend strony, jest oparty o tabele.
To będziemy dostawać często bardziej złożone odpowiedzi niż wyświetlone wyżej.
Karta odpowiedzi
Ostatnia z interesujących najbardziej kart, karta służy do ogólne podsumowania danego żądania w kontekście odpowiedzi.
Są też requesty, które dopiero się przetwarzają i nie posiadają jeszcze tego co będzie omawiane za chwile czyli kody statusów HTTPs.
Ale za nim przeczytacie muszę wam przekazać bardzo ważną wiadomość !
Kody odpowiedzi HTTP
Na chłopski rozum do numerek – odpowiada danej odpowiedzi 😀
I tak to można najprościej interpretować.
Ale do rzeczy owe kody są podzielone w grupy i są to :
- Numero uno to 1** – tutaj znajdziemy kody informacyjne
na przykład : 111 to odrzucenie połączenia przez serwer - Numero dos to kody powodzenia sukcesu
200 najlepszy komunikat ok, 202 przyjęte i trwa jego realizacja - Numero tres są to kody przekierowania 305 use proxy, że trzeba dobijać się przez proxy 301 trwale przeniesiony i pod tym nowym adresem będzie dostępny
- Numero cuatro kody 400 czyli źle 😀
404 – nie znaleziono np. obrazek czy coś innego zasobu z url
401 – nieautoryzowany dostęp wymagane uwierzytelnienie
400 – niepoprawne zapytania, serwer używa złej składni zapytania - No i numero cinco kody 500 kody błędów ale serwera
503 – np. my używamy tomcata i jak go restartujemy to mamy 503
Czyli serwer jak wstanie to już 503 nie będzie 😀 ale też np. jeśli serwer w danej chwili jest przeciążony
500 – to coś co oznacza, że serwer raczej wywalił w kosmos 🙁 😀
Wszystkie kody tutaj (tutaj ładniej sformatowane)
http://www.ulos.pl/kody-odpowiedzi-http-czyli-popularne-404-403-301-302-200 lub wiki :
https://pl.wikipedia.org/wiki/Kod_odpowiedzi_HTTP
Typ żądań metody HTTP
Oprócz wspomnianych grup i numerków istnieje jeszcze typ żądań HTTP.
A są to :
GET – czyli weź, pobierz
POST – stwórz lub zaktualizuj zasób ale dynamicznie tworzy nowy wygenerowany numer id i adres docelowy jest inny
PUT – to samo co POST z tą różnicą, że bazuje na ‘statycznych’ adresach
najczęściej jednak służy do aktualizacji zasobu
Metoda HEAD – robi to samo co GET jednak z samym nagłówkiem odpowiedzi
Metoda DELETE – metoda usuwa podany zasób np. parametrami
OPTIONS – to metoda informacyjna, można wydobyć dostępne metody możliwe do używania dla danego zasobu lub całego serwera.
Kolejna metoda ze standardu HTTP to metoda PATCH
Jest to częściowa zmiana elementów danego zasobu.
O kodach można poczytać :
https://www.diwebsity.com/2015/10/16/metoda-put/
https://www.ibm.com/support/knowledgecenter/pl/SSFGJ4_7.6.0/com.ibm.mif.doc/gp_intfrmwk/rest_api/c_ctr_put_post_delete.html
https://www.ibm.com/support/knowledgecenter/pl/SSFGJ4_7.6.0/com.ibm.mif.doc/gp_intfrmwk/rest_api/r_rest_get_method.htmlhttps://www.diwebsity.com/2015/10/29/metoda-patch/https://www.diwebsity.com/2015/10/01/metoda-options/
I parę przykładów kodów
Jak widzicie aby sobie kody odpowiedzi sprawdzać wystarczy zrobić sobie tak pół monitora, kody błędów lista, drugie pół monitora strona :
https://httpstat.us/xxx
Gdzie zamiast xxx wpisujecie kod błędu który chcecie uzyskać, otwieracie F12 robicie odświeżenie strony F5 i macie przykład kodów, które wkliłem wyżej 🙂
Inne karty opisowo
Muszę jednak opisać inne karty które są dostępne w trybie dewelopera.
Inspektor pokazuje cały dokument danej strony, dzieli widok na elementy, model pudełkowy czy siatkę.
Klikając dany element możemy zobaczyć jego właściwości.
Debuger zakładka bo tak nazywa się w FF to nic innego jak struktura plików strony.
Zakładka arkusz stylów czyli plików .css strony, być może niektóre testy wymagają czegoś z tego 🙂
Zakładka wydajność odpowiada i może pomóc w testowaniu wydajności serwisu lub aplikacji webowej 🙂
Kolejna zakładka pamięć sprawdzanie wykorzystanej pamięć i ev. wycieków. Bez bicia przyznam się, że do niczego tego nie używałem nigdy.
Dane czyli pliki ciasteczek i lokalnej pamięci etc.
Często testy np. logowania czy innych akcji będą wymagały podmian, modyfikacji ciasteczek, ale często są bardzo fajne wtyczki do tego typu roboty 🙂
Zakładka dostępność czyli autytor do sprawdzania dostępności strony przez czytniki ekranowe, tego też nie używałem więc się więcej nie wypowiem 😀
W chrome dodatkowo jest auditor, taka ala analiza strony pod różnym kątem np. seo czy wydajności.
Zakładka security
W firefoxie trzeba kliknąć w kłódkę strony
W chromiaku mamy tak plus view certificate
Podsumowanie
Dziś dowiedzieliśmy się lub usystematyzowaliśmy wiedzę na temat trybu dewelopera w przeglądarce, metod http oraz kodów odpowiedzi.
Ta wiedza pomoże nam w codziennych problemach związanych z testowaniem WEBa.
A tutaj bonus, bonus rpk, człowieku !
Takie ćwiczenie dla was 🙂
https://duckduckgo.com/ wchodzimy sobie na tą stronę, jest to znana lub nieznana wam alternatywna wyszukiwarka treści w internecie.
Wciskamy F12 czyścimy console najlepiej skrót ctrl + l.
Wklejamy do konsoli to : document.getElementById("search_form_input_homepage").setAttribute("value", 'pogodalublin');
document.getElementById("search_button_homepage").click();
Co zrobi ta akacja ? Wstrzyknie przez javascript ustawienie value pola.
Za pomocą setAttribute robi to wykorzystując id elementu, następnie na tego przekazanego stringa, tam wstawia.
Druga linijka kliknie przycisk szukajki za pomocą funkcji click() i tyle.
Aby odnaleźć dany element klikamy zbadaj i wtedy otworzy nam się wcześniej omawiana przez mnie karta o nazwie Elements i podświetli nam element który badamy 🙂
Znajomość badania elementów to początek do testów automatycznych.
Jeśli was to interesuje polecam na samym początku bez żadnych narzędzi pobawić się prostą konsolą java scriptu w chromie.
Wklejacie i działacie, jeśli ktoś jest zainteresowany samym głębszym tematem JSa w konsoli, na razie bez frameworków narzędzi, żebym coś więcej pokazał np. przykładową stronę, śmiało możecie pisać.
Polecam także sekcję sław czyli osoby, które inspirują :
https://gregkaqa.pl/index.php/sekcja-slaw/
Jeśli chcesz być wołany emailowo zapisz się na listę newsletter dostępną :
https://gregkaqa.pl/index.php/newsletter/
Tym czasem miłego i do następnego wpisu !
Mosz coś śmiesznego
Dzięki za tego posta. 😉