Kod strony HTML

TIP: Ta lekcja jest częścią rozwijanego Programu Testy Automatyczne z Playwright 🎭

Prezentacja

Kod strony HTML

Dodatkowe materiały

Link do testowanej strony

DevTools, czyli narzędzia developerskie w przeglądarce

DevTools jest zestawem narzędzi wbudowanych w przeglądarkę. Narzędzia te pozwalają w szybki sposób przeanalizować i edytować stronę. Podobne narzędzia możemy znaleźć w przeglądarkach Chrome, FireFox, Safari czy Opera.

DevTools w Chrome pozwalają na:

  • podejrzenie kodu strony (zakładka Elements),
  • podejrzenie ruchu sieciowego (zakładka Network),
  • podejrzenie kodu strony (zakładka Source),
  • możliwość wykorzystania konsoli (zakładka Console),
  • możliwość zbadania wydajności strony (zakładka Performance),
  • podejrzenie danych aplikacji, cookies etc. (zakładka Application),

W zakładce Elements poza kodem strony, mamy również informacje o zaaplikowanych stylach CSS.

Strona internetowa i elementy

Czym jest strona internetowa?

  • Jest to plik przesyłany z backendu. Plik ten zawiera kod (w formacie HTML), który jest interpretowany przez przeglądarkę, która następnie wyświetla stronę.
  • Przechodzimy do przeglądarki i podglądamy zawartość strony w narzędziach deweloperskich, czyli DevTools. Aby je otworzyć, możesz użyć opcji z menu podręcznego, albo skrótu CTRL+SHIFT+I.
  • Język HTML to zestaw znaczników, które zawierają w sobie treść np.
    <znacznik>wyświetlany tekst</znacznik>
    

    Znaczniki mogą być również zagnieżdżone w sobie:

    <znacznik_1>
         <znacznik_2>wyświetlany tekst</znacznik_2>
    </znacznik_1>
    

    Zauważ, że występują pary znaczników – otwierający <znacznik> oraz zamykający </znacznik_1>.

    Warto tutaj wspomnieć o konwencji nazewnictwa rodzic-dziecko. Najlepiej można zobrazować to na poniższym przykładzie:

    <rodzic>
         <dziecko>wyświetlany tekst</dziecko>
    </rodzic>
    

    Rodzicem jest element główny, a dzieckiem – element w nim zagnieżdżony.

  • Gdy przeglądarka ładuje stronę, tworzy z kodu HTML obiekt zwany drzewem DOM.
  • Drzewo DOM (Document Object Model) jest więc zbiorem węzłów o ustalonej hierarchii. Wyjątkiem jest element jest on elementem pierwotnym(nazywanym korzeniem), rozpoczynającym każdą stronę HTML.
    Drzewo DOM
  • Jaka jest różnica między kodem HTML a drzewem DOM? Kod HTML strony to po prostu tekst (albo strong), natomiast drzewo DOM to obiekt, który powstał w oparciu o kod HTML. Elementy w drzewie DOM posiadają dodatkowe właściwości, które nie są widoczne w kodzie HTML.
  • Drzewo DOM pozwala na łatwą i szybką manipulację obiektami na stronie w przeglądarce za pomocą kodu JavaScript. Możemy zmieniać style obiektów, ich położenie, wielkośc etc.

Linki i zasoby

Linki i zasoby zewnętrzne:

2 komentarze

  1. Hej,

    Znalazłam mały błąd. W opisie lekcji jest napisane:
    “DevTools w Chrome pozwalają na:
    podejrzenie kodu strony (zakładka Edit)
    (…)”
    Chodzi oczywiście o zakładkę Elements 🙂

    Avatar Martyna Kowalczyk

Dodaj komentarz

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