Kod strony HTML

Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright

Kod strony HTML

Prezentacja

Dodatkowe materiały

Link do testowanej strony

• https://demo-bank.vercel.app/

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.
  
• 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:

• Firefox DevTools
• Chrome DevTools