Project Quality
  • Home
  • Blog
  • 18 Narzędzi dla testera
  • Testowanie oprogramowania dla początkujących
  • Kontakt
27 lutego, 2021 przez admin

DevTools – przyjaciel testera

DevTools – przyjaciel testera
27 lutego, 2021 przez admin

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:

  1. Elements
  2. Console
  3. Network
  4. Device toolbar
  5. Lighthouse (audyty)
  6. Application
Obrazek pokazuje chrome devtools, podkreślone główne zakładki
Aby uruchomić narzędzia developerskie w Google Chrome, klikamy prawy przycisk myszki, następnie wybieramy Inspect (Zbadaj).

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.

Obrazek pokazuje chrome DevTools, podkreślona zakładka elements

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.

Obrazek pokazuje chrome DevTools, podkreślona zakładka console

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.

Obrazek pokazuje chrome DevTools, podkreślona zakładka network

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.

Obrazek pokazuje podkreśloną zakładkę device toolbar

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.

Obrazek pokazuje podkreśloną zakładkę lighthouse

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.

Obrazek pokazuje podkreśloną zakładkę elements

Każdy tester potrzebuje dobrych narzędzi 💻

Zapisz się do newslettera i poznaj 18 narzędzi które wspierają pracę testera!

Twój dokument już czeka na Ciebie 🎉

Wejdź na swoją skrzynkę e-mail i pobierz dokument „18 narzędzi dla testera aplikacji webowych”

.

Photo by Pankaj Patel on Unsplash

Podziel się:

  • Twitter
  • Facebook
Poprzedni wpisSelenide - wstęp do automatyzacji UI - Twój pierwszy test w 10 minutNastępny wpis Błąd, defekt, awaria - podstawy testowania oprogramowania

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ostatnie wpisy

7 zasad testowania w 5 minut8 stycznia, 2022
Role w obszarze zapewniania jakości18 grudnia, 2021
Shift-left testing, czyli testuj jak najwcześniej25 listopada, 2021

Kategorie

  • Automatyzacja testów
  • Kariera testera
  • Narzędzia
  • podsumowanie
  • Produktywność
  • programowanie
  • Quality
  • Testowanie oprogramowania
  • Testowanie oprogramowania podstawy
  • ui
  • Uncategorized
  • warsztaty

Wpadnij na nasze social media

Jeśli jesteś pasjonatem jakości dołącz do naszej grupy!

Polityka prywatności

Rife Wordpress Theme ♥ Proudly built by Apollo13

About This Sidebar

You can quickly hide this sidebar by removing widgets from the Hidden Sidebar Settings.

Ostatnie wpisy

7 zasad testowania w 5 minut8 stycznia, 2022
Role w obszarze zapewniania jakości18 grudnia, 2021
Shift-left testing, czyli testuj jak najwcześniej25 listopada, 2021

Kategorie

  • Automatyzacja testów
  • Kariera testera
  • Narzędzia
  • podsumowanie
  • Produktywność
  • programowanie
  • Quality
  • Testowanie oprogramowania
  • Testowanie oprogramowania podstawy
  • ui
  • Uncategorized
  • warsztaty

Meta

  • Zaloguj się
  • Kanał wpisów
  • Kanał komentarzy
  • WordPress.org