ŁuczniczQA, Bydgoszcz meetup (PL): Mini-warsztat testera webowego

Hereby I challenge myself to give the audience the startup knowledge about how to test web applications, how to deal with web browser and how to dive into browsers' devtools.
The main point of this presentation is to embolden the beginners to discover web solutions, to play with publicly available features and to break their uncertainty of playing with software.
:-)
Source: https://evenea.pl/imprezy/szkolenia/bydgoszcz/luczniczqa-meetup-2-warsztatowo-o-narzedziach-pomocnych-w-testach-webowych-199617/ and https://www.facebook.com/events/194935438031249/

Transcript

1. Mini-warsztat testera
   webowego
   Aleksandra Kornecka
   OLX Group
   Girls Who Test
   

   View Slide

2. whoami
   ● QA Engineer
   ● lider i społecznik
   ● mgr kognitywistyki
   ● lekkoatleta
   

   View Slide

3. Agenda
   1. Web = ?
   2. Narzędzia testera webowego - przeglądarki oraz inne.
   3. Komunikacja web.
   4. Mobile web i Progressive Web Apps.
   5. Bezpieczeństwo aplikacji webowych.
   6. Dobre praktyki i ciekawostki. :-)
   

   View Slide

4. Web = ?
   

   View Slide

5. Jeszcze strona czy już aplikacja webowa?
   

   View Slide

6. Strona internetowa
   HTML (HyperText Markup Language)
   CSS (Cascading Style Sheets):
   Np. http://annawybierala.eu/
   

   View Slide

7. Aplikacja webowa
   ● Coś więcej, niż statyczny HTML z
   CSS
   ● Funkcjonalności np. logowanie,
   odpytywanie do bazy itd.
   ● Strony oparte na CMS są już
   trochę aplikacjami webowymi (np.
   blogi na WordPress)
   Np. https://www.facebook.com/
   

   View Slide

8. Co testować w aplikacjach webowych?
   ● Wydajność
   ● Użyteczność
   ● Dostępność
   ● Bezpieczeństwo
   ● Funkcjonalność
   ● Protokoły, certyfikaty
   ● Ciasteczka (cookies)
   ● Martwe linki (dead links)
   ● Międzyplatformowość
   ● Poprawność użycia tagów
   (znaczników) HTML, CSS
   + Automatyzacja testów
   … itd.
   

   View Slide

9. Narzędzia
   

   View Slide

10. Przeglądarka internetowa i jej zakamarki
    Narzędzia programistyczne przeglądarki / “devtoolsy” / “F12” / “konsola”
    Skróty dla Google Chrome*:
    ● F12
    ● Cmd + Shift + C lub Ctrl + Shift + I
    ● ‘Prawy przycisk myszy’
    *skróty mogą się trochę różnić w zależności od przeglądarki, systemu operacyjnego (OS) lub urządzenia (Lenovo, Apple, HP
    itd.). Na szczęście bardzo łatwo można wyszukać w internecie skrót, który zadziała na Twoim urządzeniu, jakkolwiek
    “egzotyczne” by ono nie było :-)
    

    View Slide

11. Inspect / Zbadaj element
    

    View Slide

12. View-source: / Pokaż źródło
    

    View Slide

13. Pasek adresu
    

    View Slide

14. Incognito mode / Tryb prywatny
    Nie dają tu ciasteczek :-( … ale dają trochę prywatności! :-)
    Skrót klawiszowy:
    ● Cmd + Shift + N (Apple) lub
    ● Ctrl + Shift + N (Windows, Linux)
    

    View Slide

15. View Slide

16. Pluginy
    /wtyczki,
    extensions
    /rozszerzenia,
    add-ons
    /dodatki
    

    View Slide

17. Przykłady pluginów
    ● Bug magnet: https://bugmagnet.org/
    ● Requestly:
    https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldc
    miljblolnjhpnblkcekpdkpa
    ● HTTP Headers:
    https://chrome.google.com/webstore/detail/http-headers/nioieekamcpjfleokdc
    difpmclkohddp
    ● User-Agent Switcher:
    https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojb
    ojppdojfeeikdkgiae
    

    View Slide

18. Webowe narzędzia do testowania web
    ● https://jigsaw.w3.org/css-validator/
    ● https://validator.w3.org/checklink
    ● https://tools.pingdom.com/
    ● https://testmysite.withgoogle.com/intl/en-gb
    ● https://developers.google.com/speed/pagespeed/insights/
    ● https://developers.google.com/web/tools/
    

    View Slide

19. Narzędzia do testowania web
    ● https://www.testingexcellence.com/10-best-open-source-web-testing-tool/
    ● https://www.softwaretestinghelp.com/most-popular-web-application-testing-to
    ols/
    ● JMeter - testy obciążeniowe, przeciążeniowe itp.
    ● HTTP load runner - testy “łączności”, protokołów
    ● Selenium, Capybara, CypressJS, itd. (...) - wspierające automatyzację testów
    ● Cross-browser platformy, testy międzyplatformowe - wygląd, obciążenie,
    użyteczność, dostępność, interoperacyjność
    

    View Slide

20. Więcej o przeglądarkach
    Istnieją różne przeglądarki internetowe, czyli aplikacje desktopowe
    umożliwiające przeglądanie stron oraz aplikacji webowych.
    Są to m.in.: Google Chrome, Mozilla Firefox, Apple Safari, Opera, Internet
    Explorer (IE), Edge i inne (np. UC Browser, Dolphin itd.)
    Różnią się m.in. takimi parametrami:
    ● szybkość działania
    ● silnik (np. Chrome = Opera)
    ● użyteczność
    ● funkcje wbudowane a pluginy
    ● poziom wsparcia użytkownika, Help, FAQ, społeczność
    

    View Slide

21. Popularność przeglądarek
    

    View Slide

22. Komunikacja web
    

    View Slide

23. Web = client gada z serwerem
    

    View Slide

24. Tak to działa front-endowo
    

    View Slide

25. Tak to działa back-endowo
    

    View Slide

26. Komunikacja
    Co się dzieje, kiedy wchodzisz na stronę internetową?
    Klient (Twój komputer) wysyła z tymczasowego adresu IP request do serwera, sieć
    komputerowa (internet lub intranet) przenosi wiadomość i rozpoznaje IP za pomocą
    usługi DNS oraz tłumaczy IP na adres internetowy serwera.
    Serwer wysyła HTTP response, a Twój komputer jako klient za pomocą
    przeglądarki internetowej odbiera ten serwerowy HTTP response. Wtedy
    przeglądarka odtwarza stronę na Twoim komputerze.
    Pojęcia do sprawdzenia: client > request, server > response, host, IP, World Wide
    Web, http (Hypertext Transfer Protocol), https (Hypertext Transfer Protocol Secure).
    

    View Slide

27. Statusy HTTP / kody błędów
    1xx information
    2xx success
    3xx redirection
    4xx client errors
    5xx server errors
    Do podejrzenia np. w “devtoolsach” przeglądarki pod “Network” / “Sieć” :-)
    

    View Slide

28. Dekodujemy URLe (Uniform Resource Locator)
    

    View Slide

29. Przepis na “ciasteczka” (cookies)
    ● “Ciasteczka” też lecą przez HTTP
    ● Po co? Tracking, śledzenie rodzaju i zachowania użytkownika, platform
    ● Rodzaje cookies: sesyjne, stałe, zewnętrzne (np. Google Analytics)
    ● Czyszczenie, podglądanie, zakres
    ● Ciasteczkowe “RODO” od 2012 r. - obowiązek informacyjny
    http://wszystkoociasteczkach.pl/po-co-sa-ciasteczka/
    

    View Slide

30. Cache - miejsce przechowywania informacji
    

    View Slide

31. View Slide

32. Możliwe warstwy cache’owania
    ● Przeglądarka
    ● Poszczególne widoki strony
    ● Dziwne miejsca w aplikacji,
    specyficzna architektura (tu
    przyda się dokumentacja lub
    “wiedza gminna” w firmie)
    ● Związane z bazą danych (patrz
    “2nd Tier Cache”)
    

    View Slide

33. Mweb i PWA
    

    View Slide

34. View Slide

35. PWA (Progressive Web App)
    ● Działa offline
    ● Działa na różnych przeglądarkach, po URLu
    ● Zachowuje się i wygląda jak aplikacja mobilna, a jest webowa
    ● Można umieścić skrót do niej na ekranie telefonu za pomocą opcji przeglądarki
    internetowej w smartfonie
    https://developers.google.com/web/progressive-web-apps/checklist
    https://react-etc.net/entry/facebook-takes-first-steps-to-progressive-web-apps-pwa
    

    View Slide

36. Devtools dla mobile web
    https://m.facebook.com/
    https://www.facebook.com/
    … łatwiej wejść na mobile web (mobilną wersję strony lub aplikacji webowej),
    niż pobierać, otwierać i poznawać narzędzia do badania aplikacji mobilnych. Dzięki
    badaniu mobile web, nawet kiedy nie jesteś testerem aplikacji mobilnych, możesz
    poznać kawałek specyfiki świata aplikacji mobilnych.
    

    View Slide

37. Bezpieczeństwo web
    

    View Slide

38. View Slide

39. XSS vulnerability (podatność na XSS)
    Cross-site scripting: https://pl.wikipedia.org/wiki/Cross-site_scripting
    

    View Slide

40. View Slide

41. SQL injection vulnerability
    SELECT cośCzegoś coś FROM pieniążki WHERE uczciwy_obywatel = 0 OR 1=1
    

    View Slide

42. Pomoc dla nas: OWASP
    https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf
    

    View Slide

43. DOBRE PRAKTYKI
    

    View Slide

44. Zaczynaj z czystą kartą
    ● Nowy kod potrzebuje odpowiedniego środowiska - czystego lub
    odpowiedniego ;-)
    ● Wyczyść cache przeglądarki (np. w devtools)
    ● Wyczyść cache aplikacji (np. specjalna komenda aplikacji)
    ● Wyczyść pamięć lokalną (np. w devtools)
    ● Wyczyść cookies (np. w devtools)
    

    View Slide

45. Bądź ciekawska/i
    ● Zaglądaj w różne zakamarki devtoolsów
    ● Zaglądaj w certyfikaty, sprawdzaj “paszport” strony, aplikacji
    ● Korzystaj z walidatorów
    ● Pobaw się DOMem
    ● Pamiętaj o stronie serwera, jak i o stronie klienta
    ● Nie bój się prawego przycisku myszy lub dwukliku!
    

    View Slide

46. Testuj narzędzia do testowania
    ● Pogłębiaj wiedzę o używanym narzędziu
    ● Śledź aktualizacje narzędzi
    ● Poszukuj nowych narzędzi
    ● Sprawdzaj jak dane narzędzia, platformy, systemy operacyjne zachowują się w
    różnych interfejsach i warunkach
    

    View Slide

47. Ciekawostki
    

    View Slide

48. Oj tam oj tam security… :-(
    

    View Slide

49. W Internecie naprawdę nic nie ginie
    https://web.archive.org/web/*/girlswhotest.pl
    

    View Slide

50. “Can I use…”
    Skarbnica wiedzy programistów i nie tylko :-) https://caniuse.com/#tables
    

    View Slide

51. Dziękuję za uwagę!
    aleksandrakornecka.com
    girlswhotest.pl
    tech.OLX.com
    Źródła: https://goo.gl/Rn2Hri
    

    View Slide