$30 off During Our Annual Pro Sale. View Details »

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

Ł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/

Aleksandra Kornecka

July 24, 2018
Tweet

More Decks by Aleksandra Kornecka

Other Decks in Technology

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)
  15. None
  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

  31. None
  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

  34. None
  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

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

  40. None
  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