W czym jest DOM Selenium WebDriver? Struktura i pełna forma

Przez: Krishna Szczebel Krishna Szczebel
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Model obiektów dokumentu udostępnia stronę HTML JavaSkrypt jako drzewo obiektów, pozwalające skryptom i Selenium WebDriver odczytuje, lokalizuje i zmienia dowolny element na stronie podczas działania przeglądarki.

  • 🔘 Pełna forma: DOM to skrót od Document Object Model, standardowego interfejsu W3C dla dokumentów HTML i XML.
  • ️ Struktura drzewa: Każdy tag staje się węzłem, więc html, head, body, article i p tworzą hierarchię nadrzędny-podrzędny.
  • ✅ Trzy obiekty: Okno otacza zakładkę, Dokument oznacza korzeń drzewa, a Element reprezentuje każdy indywidualny tag.
  • 🧪 Metody podstawowe: getElementById, querySelector i querySelectorAll pobierają węzły; innerHTML odczytuje i przepisuje ich zawartość.
  • 🛠️. Debugowanie: Narzędzia programistyczne przeglądarek udostępniają przeanalizowane drzewo, a zmiany w nim wprowadzone są widoczne tylko do momentu ponownego załadowania strony.
  • 📊 Wydarzenia: Akcje takie jak kliknięcie i załadowanie wiadomości rozgłoszeniowych, które mogą być przechwytywane przez atrybuty onclick lub addEventListener.
Czytaj więcej

W czym jest DOM Selenium Struktura i pełna forma WebDrivera

W czym jest DOM Selenium Sterownik sieciowy?

DOM in Selenium WebDriver to niezbędny element rozwoju sieci korzystając z HTML5 i JavaSkrypt. Pełna forma DOM to Document Object Model. DOM nie jest koncepcją informatyki. Jest to prosty zestaw interfejsów standaryzowanych wśród programistów internetowych w celu uzyskiwania dostępu i manipulowania dokumentami w HTML lub XML za pomocą JavaScenariusz.

Te standardy pomagają deweloperom tworzyć strony internetowe bez martwienia się o szczegóły implementacji. Niektóre organizacje zaangażowane w standaryzację tych interfejsów to Mozilla, Apple, Microsoft, Google, Adobe itd. Jednak to W3C formalizuje standard i go publikuje – patrz tutaj (https://dom.spec.whatwg.org/).

Poniższe sekcje obejmują strukturę dokumentu, obiekty udostępniane przez DOM oraz sposób ich inspekcji. Mozilla utrzymuje aktualną dokumentację API na Strony modelu obiektów dokumentu MDN.

Każdy Selenium lokalizator rozwiązuje się względem tego samego drzewa, więc struktura poniżej jest taka, jaka jest znajdźElement() wyszukiwania.

Zrozumienie struktury DOM

Będziesz musiał zrozumieć strukturę DOM, jeśli budujesz jakąkolwiek witrynę internetową wymagającą użycia skryptów JavaSkrypt. Zrozumienie DOM jest jeszcze ważniejsze, jeśli wykonujesz jedno lub wszystkie z następujących skomplikowanych zadań na swojej stronie internetowej –

  1. Developing treść, która aktualizuje się automatycznie bez odświeżania całej strony – np. aktualna cena wszystkich akcji w portfelu użytkownika
  2. Developing zaawansowane interakcje użytkownika, takie jak dynamiczne dodawanie lub modyfikowanie treści – na przykład możliwość dodania większej liczby akcji do portfela
  3. Developing treść, którą użytkownik może dostosować – na przykład możliwość zmiany układu, tak aby portfel funduszy inwestycyjnych pojawiał się przed portfelem akcji
  4. Developing responsywna treść na Twojej stronie internetowej, dzięki której Twoja strona automatycznie dopasowuje się do różnych ekranów urządzeń multimedialnych, np. iPhone'a, komputera stacjonarnego, tabletu itp.

Podstawowa strona HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

Jak to wygląda w PARSER DOM przeglądarki?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Jak uzyskać dostęp do elementu body?

<script>
    var body = window.document.body;
</script>

Jak powiedzieć „Witaj, świecie”?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Wreszcie będzie wyglądał cały plik HTML

Otwarte Windows Notatnik i wklej do niego następującą treść. Następnie zapisz plik jako „MyFileNewFile.html” (upewnij się, że nazwa pliku kończy się na .html).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Na koniec po prostu otwórz plik za pomocą dowolnej preferowanej przeglądarki, a zobaczysz „Hello World!”

Komponenty DOM w Selenium

Poniżej znajdują się główne komponenty DOM Selenium Sterownik sieciowy:

  • okno
  • dokument
  • Element

Każdy komponent znajduje się na innym poziomie drzewa, zaczynając od tego najdalej położonego.

okno

Okno to obiekt zawierający obiekt dokumentu w DOM. Znajduje się na szczycie wszystkiego.

Aby dostać się do obiektu okna z danego dokumentu

<script>
      var window = document.defaultView;
</script>

W środowisku z kartami każda karta ma swój własny obiekt okna. Jeśli jednak ktoś chciałby przechwycić i zaimplementować zdarzenia takie jak window.resizeTo i window.resizeBy, dotyczą one całego okna, a nie samej zakładki.

Właściwości obiektu Window w DOM

window.localStorage – daje dostęp do lokalnej pamięci przeglądarki. Magazyn lokalny może służyć do przechowywania i pobierania danych z sesji.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

otwieracz do okien - pobiera referencję do obiektu okna, który otworzył to okno (poprzez kliknięcie łącza lub użycie metody window.open)

Przydatne metody obiektu Window

okno.alert() – wyświetla okno dialogowe alertu z komunikatem.

<script>
		window.alert('say hello');
</script>

Istnieje wiele przydatnych zdarzeń, które ujawnia obiekt okna. Omówimy je w sekcji „Wydarzenia” w dziale Tematy zaawansowane

Nie przegap:

dokument

Dokument oznacza początek drzewa DOM. Dokument jest pierwszym węzłem w DOM. Posiada kilka metod i właściwości, których zakres dotyczy całego dokumentu, takich jak: URL, getElementById, querySelector itp.

Właściwości obiektu dokumentu w DOM

Dokument.documentURI oraz Dokument.URL – Oba zwracają bieżącą lokalizację dokumentu. Jeśli jednak dokument nie jest typu HTML.URL nie będzie działać.

Dokument.aktywnyElement – Ta metoda zwraca element w DOM, który jest w centrum uwagi. Oznacza to, że jeśli użytkownik jestping w polu tekstowym Document.activeElement zwróci odniesienie do tego pola tekstowego.

Tytuł dokumentu – Służy do odczytania lub ustawienia tytułu danego dokumentu.

Przydatne metody obiektu dokumentu

Document.getElementById (identyfikator ciągu) – to zdecydowanie najistotniejsza i najprzydatniejsza metoda w manipulacji DOM. Służy do wyszukiwania elementu w drzewie DOM. używając swojego unikalnego identyfikatora. Wyszukiwanie uwzględnia wielkość liter, np. w poniższym przykładzie „ „elementu nie można wyszukiwać używając słów takich jak IntroDiv, introdiv lub iNtrodiv itp.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(selektor ciągu) – to kolejna powszechnie stosowana metoda, która pozwala na wybranie jeszcze jednego elementu na podstawie zasady selektora CSS (Jeśli znasz notację $ w jQuery, to ona sama korzysta z tej metody). Nie będziemy się zbytnio zagłębiać w selektory CSS. Selektor CSS to zestaw reguł, dzięki którym można uzyskać listę podobnych elementów (na podstawie reguły selektora). Używaliśmy tej metody już wcześniej w sekcji „Hello World”.

Element

Poniższy diagram pokazuje, jak obiekt Element jest umiejscowiony w drzewie DOM, poniżej węzła dokumentu.

Obiekt elementu wyświetlany jako węzeł wewnątrz hierarchii drzewa DOM

Obiekt elementu w DOM

Element to dowolny obiekt reprezentowany przez węzeł w drzewie DOM dokumentu. Jak zawsze, sam obiekt Element jest jedynie oszustwem.tracWłaściwości, metody i zdarzenia między przeglądarką a dokumentem HTML. Istnieją specjalne rodzaje elementów, takie jak HTMLElement, SVGElement, XULElement itp. W tym samouczku skupimy się tylko na HTMLElement.

Właściwości obiektu elementu w DOM

Element.id – Ta właściwość może być używana do ustawiania lub odczytywania „ID” (unikalnego identyfikatora) elementu HTML. Identyfikator musi być unikalny wśród elementów drzewa DOM. Jak wspomniano wcześniej, identyfikator jest również używany przez metodę Document.getElementById do wybierania konkretnego obiektu Element w drzewie DOM.

HTMLElement.contentEditable – właściwość contentEditable elementu określa, czy zawartość tego elementu jest edytowalna/modyfikowalna. Tę właściwość można ustawić tak, jak pokazano w poniższym skrypcie. Tę właściwość można również wykorzystać do określenia, czy dany element jest edytowalny, czy nie. Wypróbuj poniższy skrypt w dowolnym ciele HTML, a zauważysz, że możesz edytować dowolną zawartość ciała.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML to kolejna ważna właściwość, której używamy do dostępu do zawartości HTML wewnątrz elementu. Służy ona również do ustawiania nowej zawartości HTML elementu. Jest szeroko stosowana do ustawiania/zmiany zawartości pól danych. Powiedzmy na przykład, że chcesz, aby Twoja strona internetowa aktualizowała temperaturę miasta Mumbai co godzinę, możesz uruchomić skrypt w poniższym przykładzie co godzinę.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Przydatne metody obiektu elementowego

HTMLElement.blur() & Element HTML.focus() – metody rozmycia i skupienia służą do usuwania lub skupiania elementu HTML. Metody te są najczęściej używane do przenoszenia skupienia kursora między polami tekstowymi na stronie internetowej do wprowadzania danych.

Element.querySelectorAll – Metoda ta jest podobna do omówionej już metody querySelector dla obiektu dokumentu. Ta metoda jednak ograniczy wyszukiwanie w obrębie elementów potomnych samego elementu.

Uwaga dotycząca dokładności: Powyższy blok jest odtworzony w formie opublikowanej. Działający kod używa dokument z małą literą d i innerHTML właściwość, nie setInnerHTML().

Debugowanie w DOM

Narzędzia deweloperskie Google Chrome, Mozillę Firefox, Internet Explorer (10 lub nowszy) lub Safari umożliwiają łatwe debugowanie bezpośrednio w przeglądarce. Czasami różne przeglądarki różnie interpretują ten sam znacznik HTML i wtedy debugowanie pomaga sprawdzić DOM zgodnie z interpretacją silnika DOM tej konkretnej przeglądarki.

Uwaga dotycząca przeglądarki: Internet Explorer został wycofany w 2022 r., więc jego narzędzia programistyczne są teraz dostępne Microsoft EdgePoniższe kroki pozostają niezmienione; narzędzia DevTools otwierają się za pomocą klawisza F12.

Załóżmy teraz, że chcesz zmienić wartość temperatury z 26oOd C do 32oC w twoim ostatnim przykładzie. Aby to zrobić, wykonamy kilka prostych kroków. Pokazane tutaj zrzuty ekranu pochodzą z Mozilli Firefox– jednak kroki są takie same we wszystkich innych przeglądarkach.

  1. Otwórz plik MyFileNewFile.html (lub inną nazwę, którą nadałeś swojemu plikowi HTML w powyższych tutorialach) za pomocą przeglądarki
  2. Użyj myszki i kliknij prawym przyciskiem myszy wartość temperatury 26oC i kliknij „Sprawdź element”

    Kliknij prawym przyciskiem myszy wartość temperatury i wybierz opcję „Zbadaj element” w przeglądarce

  3. Zwróć uwagę, że element, w którym wybrałeś opcję „Sprawdź element”, jest podświetlony w przeglądarce (okno debugera zwykle pojawia się na dole ekranu)

    Narzędzia programistyczne przeglądarek podświetlające sprawdzany element span w drzewie DOM

  4. Otwórz element, klikając znajdujący się obok niego pochylony trójkąt

    Rozszerzanie elementu span w inspektorze DOM za pomocą przełącznika trójkątnego

  5. Wybierz, co chcesz edytować i kliknij dwukrotnie. Otrzymasz opcję zmiany tekstu. Postępuj zgodnie z instrukcjami na animowanym obrazku poniżej.

    Animowana demonstracja edycji wartości tekstu DOM z 26 na 32 w inspektorze

  6. Zwróć uwagę na zmianę treści swojej strony HTML. Możesz teraz zamknąć okno debugowania.

    Pamiętaj, że zmiany zostaną zachowane tylko w tej sesji. Gdy tylko ponownie załadujesz lub odświeżysz stronę (naciśnij F5), zmiany zostaną cofnięte. Oznacza to, że nie zmieniłeś rzeczywistego źródła HTML, a jedynie lokalną interpretację przeglądarki.

    Jako zabawne ćwiczenie spróbuj wykonać następujące czynności. Otwórz www.facebook.com w przeglądarce i użyj narzędzia debugera, aby uzyskać następujący wynik – zwróć uwagę, że wyświetla się komunikat „Zhakowałem Facebooka”.

Wynik tego ćwiczenia wygląda tak, jak na zrzucie ekranu poniżej.

Strona na Facebooku edytowana na żywo w inspektorze przeglądarki, aby przeczytać, że zhakowałem Facebooka

Odczyt i edycja węzłów obejmują strony statyczne. Strony interaktywne również reagują na działania użytkownika.

Wydarzenia DOM

Czym są zdarzenia w DOM?

Zdarzenia to model programowania, w którym zdarzenia wywołane przez użytkownika (lub wywołane cyklem życia strony przeglądarki) są transmitowane jako komunikaty. Na przykład, gdy strona zakończy ładowanie, wyzwala zdarzenie window.load i podobnie, gdy użytkownik kliknie przycisk wyzwalane jest zdarzenie kliknięcia elementu.

Wiadomości te mogą zostać przechwycone przez każdego JAVASCRIPT kod, a następnie akcja zdefiniowana przez programistę Można to zrobić. Załóżmy na przykład, że chcesz, aby liczby na Twojej stronie internetowej aktualizowały się tylko po kliknięciu przycisku przez użytkownika. Możesz to osiągnąć, stosując dowolną z następujących metod –

  1. Przypisz akcję do zdarzenia onclick elementu HTML
  2. Przypisz akcję do zdarzenia kliknięcia za pomocą metody addEventListener

Metoda 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Metoda 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

Rozwiązywanie problemów w DOM

Uwaga dotycząca starszego interfejsu API: Dwie odpowiedzi poniżej używają document.write(). Nadal działa, ale wywołanie po załadowaniu strony usuwa dokument. Preferuj console.log() lub innerHTML.

P. Skąd mam wiedzieć, czy element istnieje, czy nie?

A. Spróbuj wyszukać element za pomocą dowolnego selektora i sprawdź, czy zwrócony element ma wartość null. Zobacz przykład poniżej –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

P. Dostaję błąd TypeError: document.getElementByID nie jest funkcją…

A. Upewnij się, że nazwa metody jest dokładnie zgodna z metodą API. Podobnie jak w pytaniu powyżej – jest to getElementById, a nie getElementByID.

P. Jaka jest różnica pomiędzy dziećmi i childNodes?

A. Metoda children pobiera nam kolekcję wszystkich elementów w elemencie wywołującym. Zwracana kolekcja jest typu HTMLCollection. Jednak metoda childNodes pobiera nam kolekcję wszystkich węzłów w elemencie wywołującym. Dodaj poniższe skrypty do naszego przykładu i zobacz różnicę –

Metoda childNodes zwraca 14 elementów

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Podczas gdy metoda dzieci zwraca tylko 7 elementów

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

P. Dostaję Uncaught TypeError: Nie można odczytać właściwości „innerHTML” niezdefiniowanego...

A. Upewnij się, że wystąpienie HTMLElement, dla którego wywołujesz właściwość innerHTML, zostało ustawione po początkowej deklaracji. Ten błąd występuje zazwyczaj w następującym scenariuszu. Zobacz, jak można uniknąć błędu w następnym bloku kodu…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

FAQ

Shadow DOM to funkcja przeglądarki, która zapewnia komponentowi własne, izolowane poddrzewo, zapobiegając wyciekom stylów i skryptów. Virtual DOM to technika biblioteczna, używana w React i Vue, która różnicuje kopię w pamięci, aby zminimalizować liczbę rzeczywistych aktualizacji.

WebDriver wysyła lokalizator do przeglądarki, która przegląda przeanalizowane drzewo, aż znajdzie pasujące elementy, a następnie zwraca uchwyt WebElement. Lokalizatory takie jak id, nazwa, selektor CSS i XPath po prostu opisują różne reguły wyszukiwania w tych samych węzłach.

Użyj getElementById, gdy cel ma unikalny identyfikator; jest to najszybsze wyszukiwanie i zwraca jeden węzeł. Użyj querySelector lub querySelectorAll, gdy dopasowanie zależy od klas, atrybutów lub ścieżki nadrzędny-podrzędny.

Nadal się uruchamia, ale przeglądarki tego nie zalecają. Wywołanie document.write() po załadowaniu strony zastępuje cały dokument i blokuje parsowanie podczas ładowania. Użyj console.log() do tracing lub innerHTML do wstawiania treści.

Modele DOM obejmują zawartość strony: nagłówek, treść i każdy tag. Model obiektów przeglądarki obejmuje otaczającą przeglądarkę, w tym nawigatora, ekran, lokalizację i historię. Obiekt okna jest miejscem, w którym oba te elementy się spotykają.

Internet Explorer został wycofany w 2022 r., więc jego narzędzia programistyczne są teraz dostępne w Microsoft EdgePrzepływ pracy pozostaje niezmieniony: naciśnij klawisz F12 lub kliknij prawym przyciskiem myszy element, wybierz opcję Zbadaj i edytuj węzeł w otwartym panelu.

Narzędzia uczenia maszynowego oceniają kilka atrybutów węzłów jednocześnie, więc gdy klasa lub identyfikator ulegają zmianie, dopasowują ponownie ten sam element, zamiast powodować błąd. Platformy testowe z funkcją samonaprawy opierają się na standardowych zapytaniach DOM.

Drugi pilot Tworzy nasłuchiwacze zdarzeń, łańcuchy selektorów zapytań i pętle przechodzenia z komentarza i jest niezawodny w przypadku typowych wzorców. Zawsze testuj sugestię na rzeczywistej stronie, ponieważ nie widzi ona Twojego znacznika.

Podsumuj ten post następująco: