Ł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
2. whoami • QA Engineer • lider i społecznik • mgr kognitywistyki • lekkoatleta
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. :-)
4. Web = ?
5. Jeszcze strona czy już aplikacja webowa?
6. Strona internetowa HTML (HyperText Markup Language) CSS (Cascading Style Sheets): Np. http://annawybierala.eu/
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/
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.
9. Narzędzia
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 :-)
11. Inspect / Zbadaj element
12. View-source: / Pokaż źródło
13. Pasek adresu
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)
16. Pluginy /wtyczki, extensions /rozszerzenia, add-ons /dodatki
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
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/
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ść
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ść
21. Popularność przeglądarek
22. Komunikacja web
23. Web = client gada z serwerem
24. Tak to działa front-endowo
25. Tak to działa back-endowo
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).
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ć” :-)
28. Dekodujemy URLe (Uniform Resource Locator)
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/
30. Cache - miejsce przechowywania informacji
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”)
33. Mweb i PWA
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
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.
37. Bezpieczeństwo web
39. XSS vulnerability (podatność na XSS) Cross-site scripting: https://pl.wikipedia.org/wiki/Cross-site_scripting
41. SQL injection vulnerability SELECT cośCzegoś coś FROM pieniążki WHERE uczciwy_obywatel = 0 OR 1=1
42. Pomoc dla nas: OWASP https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf
43. DOBRE PRAKTYKI
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)
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!
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
47. Ciekawostki
48. Oj tam oj tam security… :-(
49. W Internecie naprawdę nic nie ginie https://web.archive.org/web/*/girlswhotest.pl
50. “Can I use…” Skarbnica wiedzy programistów i nie tylko :-) https://caniuse.com/#tables
51. Dziękuję za uwagę! aleksandrakornecka.com girlswhotest.pl tech.OLX.com Źródła: https://goo.gl/Rn2Hri