Was ist DOM? Selenium WebDriver? Struktur & Abkürzung

By: Krishna Runta Krishna Runta
Hours Aktualisiert

⚡ Intelligente Zusammenfassung

Das Document Object Model stellt eine HTML-Seite bereit für JavaSkript als Baum von Objekten, der Skripte und Selenium WebDriver kann jedes Element auf der Seite lesen, lokalisieren und ändern, während der Browser ausgeführt wird.

  • 🔘 Vollständige Form: DOM steht für Document Object Model, eine vom W3C standardisierte Schnittstelle für HTML- und XML-Dokumente.
  • ☑️ Baumstruktur: Jedes Tag wird zu einem Knoten, sodass html, head, body, article und p eine Eltern-Kind-Hierarchie bilden.
  • ✅ Drei Objekte: Das Fenster umschließt den Tab, das Dokument markiert die Baumwurzel und das Element repräsentiert jedes einzelne Tag.
  • 🧪 Kernmethoden: getElementById, querySelector und querySelectorAll rufen Knoten ab; innerHTML liest und überschreibt deren Inhalt.
  • ️ Debugging: Die Entwicklertools des Browsers zeigen den analysierten Baum an, und die dort vorgenommenen Änderungen bleiben nur bis zum Neuladen der Seite erhalten.
  • 📊 Events in Kürze: Aktionen wie Klick und Laden senden Broadcast-Nachrichten, die durch onclick-Attribute oder addEventListener abgefangen werden können.
MEHR LESEN

Was ist DOM? Selenium WebDriver-Struktur und vollständige Form

Was ist DOM? Selenium WebDriver?

DOM in Selenium WebDriver ist ein wesentlicher Bestandteil der Webentwicklung unter Verwendung von HTML5 und JavaSkript. Die vollständige Form von DOM ist Document Object Model. DOM ist kein Informatikkonzept. Es handelt sich um einen einfachen Satz von Schnittstellen, die unter Webentwicklern standardisiert sind, um auf Dokumente in HTML oder XML zuzugreifen und diese zu bearbeiten, indem JavaSkript.

Diese Standards helfen Entwicklern, eine Webseite zu erstellen, ohne sich um Implementierungsdetails kümmern zu müssen. Einige der Organisationen, die an der Standardisierung dieser Schnittstellen beteiligt sind, sind beispielsweise Mozilla, Apple, Microsoft, GoogleAdobe usw. Allerdings ist es das W3C, das einen Standard formalisiert und veröffentlicht – siehe hier (https://dom.spec.whatwg.org/).

Die folgenden Abschnitte behandeln die Dokumentstruktur, die vom DOM bereitgestellten Objekte und deren Untersuchung. Die aktuelle API-Referenz von Mozilla finden Sie auf der Website. MDN-Dokumentobjektmodell-Seiten.

Jede Selenium Der Locator wird im selben Baum aufgelöst, daher ergibt sich folgende Struktur: findElement() durchsucht.

Die DOM-Struktur verstehen

Sie müssen die DOM-Struktur verstehen, wenn Sie eine Website erstellen, die Skripting verwendet JavaSkript. Das Verständnis von DOM ist noch wichtiger, wenn Sie eine oder alle der folgenden komplizierten Aufgaben auf Ihrer Website ausführen –

  1. Entwickelnping Inhalte, die sich kontinuierlich aktualisieren, ohne dass die gesamte Seite neu geladen werden muss – wie beispielsweise der aktuelle Kurs aller Aktien im Portfolio Ihres Nutzers.
  2. Entwickelnping Erweiterte Benutzerinteraktionen wie das dynamische Hinzufügen oder Ändern von Inhalten – beispielsweise die Möglichkeit, weitere Aktien zum Portfolio hinzuzufügen.
  3. Entwickelnping Inhalte, die vom Benutzer individuell angepasst werden können – wie die Möglichkeit, das Layout so zu ändern, dass das Investmentfondsportfolio vor dem Aktienportfolio angezeigt wird.
  4. Entwickelnping Responsive Inhalte auf Ihrer Website sorgen dafür, dass sich Ihre Website automatisch an verschiedene Bildschirmgrößen wie iPhone, Desktop-PC, Tablet usw. anpasst.

Eine einfache HTML-Seite

<!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>

Wie sieht es für den DOM-PARSER eines Browsers aus?

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

Wie greifen Sie auf das Körperelement zu?

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

Wie sagt man „Hallo Welt“?

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

Schließlich sieht die gesamte HTML-Datei so aus

Öffne Windows Notepad und fügen Sie den folgenden Inhalt ein. Speichern Sie die Datei dann als „MyFileNewFile.html“ (stellen Sie sicher, dass Ihr Dateiname mit .html endet).

<!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>

Zum Schluss öffnen Sie die Datei einfach mit einem Ihrer bevorzugten Browser und Sie sehen „Hello World!“

Komponenten von DOM in Selenium

Nachfolgend sind die Hauptkomponenten von DOM aufgeführt Selenium WebDriver:

  • Window
  • DokumentAAA
  • Element

Jede Komponente befindet sich auf einer anderen Ebene des Baums, beginnend mit der äußersten.

Window

Window ist das Objekt, das das Dokumentobjekt in einem DOM enthält. Es liegt über allem.

Um von einem bestimmten Dokument aus zu einem Fensterobjekt zu gelangen

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

In einer Umgebung mit Registerkarten verfügt jede Registerkarte über ein eigenes Fensterobjekt. Wenn man jedoch Ereignisse wie window.resizeTo und window.resizeBy abfangen und implementieren möchte, gelten diese für das gesamte Fenster und nicht nur für die Registerkarte.

Eigenschaften des Fensterobjekts im DOM

window.localStorage – gewährt Zugriff auf den lokalen Speicher des Browsers. Der lokale Speicher kann zum Speichern und Abrufen von Daten aus einer Sitzung verwendet werden.

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

Fensteröffner - Ruft den Verweis auf das Fensterobjekt ab, das dieses Fenster geöffnet hat (entweder durch Klicken auf einen Link oder mithilfe der Methode window.open).

Nützliche Methoden des Fensterobjekts

window.alert() – Zeigt einen Warndialog mit einer Meldung an.

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

Es gibt viele nützliche Ereignisse, die das Fensterobjekt offenlegt. Wir werden sie im Abschnitt „Veranstaltungen“ unter „Vorabthemen“ besprechen

ÄHNLICHE ARTIKEL

DokumentAAA

Das Dokument markiert den Beginn eines DOM-Baums. Es ist der erste Knoten im DOM und verfügt über verschiedene Methoden und Eigenschaften, deren Gültigkeitsbereich sich auf das gesamte Dokument bezieht. URL, getElementById, querySelector usw.

Eigenschaften des Dokumentobjekts im DOM

Document.documentURI und Dokument.URL – Beide geben den aktuellen Speicherort des Dokuments zurück. Wenn es sich bei dem Dokument jedoch nicht um ein HTML-Dokument handelt.URL wird nicht funktionieren.

Document.activeElement Diese Methode gibt das Element im DOM zurück, das den Fokus hat. Das bedeutet, wenn ein Benutzer ...ping In einem Textfeld gibt Document.activeElement eine Referenz auf dieses Textfeld zurück.

Dokumenttitel – Dies wird verwendet, um einen Titel eines bestimmten Dokuments zu lesen oder festzulegen.

Nützliche Methoden des Dokumentobjekts

Document.getElementById(String-ID) Dies ist mit Abstand die relevanteste und nützlichste Methode zur DOM-Manipulation. Sie dient dazu, ein Element im DOM-Baum zu finden. unter Verwendung seiner eindeutigen KennungDie Suche unterscheidet zwischen Groß- und Kleinschreibung, d. h. im folgenden Beispiel „ Das Element kann nicht mit Wörtern wie IntroDiv, introdiv oder iNtrodiv usw. gesucht werden.

<!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(String-Selektor) – Dies ist eine weitere weit verbreitete Methode, um ein oder mehrere Elemente auszuwählen, basierend auf Regeln des CSS-Selektors (Wenn Sie mit der jQuery-Notation $ vertraut sind, wissen Sie, dass diese Methode selbst verwendet.) Wir werden CSS-Selektoren nicht weiter behandeln. Ein CSS-Selektor ist eine Reihe von Regeln, mit denen Sie eine Liste ähnlicher Elemente (basierend auf der Selektorregel) erhalten. Wir haben diese Methode bereits im Abschnitt „Hello World“ verwendet.

Element

Das folgende Diagramm zeigt, wie sich ein Element-Objekt innerhalb des DOM-Baums unterhalb des Dokumentknotens befindet.

Ein Elementobjekt wird als Knoten innerhalb der DOM-Baumhierarchie dargestellt.

Elementobjekt im DOM

Ein Element ist ein beliebiges Objekt, das durch einen Knoten im DOM-Baum eines Dokuments repräsentiert wird. Wie immer ist das Element-Objekt selbst nur eine Konstruktion.tracDie Kommunikation zwischen Browser und HTML-Dokument umfasst Eigenschaften, Methoden und Ereignisse. Es gibt spezielle Elementtypen wie HTMLElement, SVGElement, XULElement usw. In diesem Tutorial konzentrieren wir uns ausschließlich auf HTMLElement.

Eigenschaften des Elementobjekts im DOM

Element.id – Mit dieser Eigenschaft kann „ID“ (ein eindeutiger Bezeichner) für ein HTML-Element gesetzt oder gelesen werden. Die ID muss unter den Elementen in einem DOM-Baum eindeutig sein. Wie bereits erwähnt, wird die ID auch von der Methode Document.getElementById verwendet, um ein bestimmtes Elementobjekt innerhalb eines DOM-Baums auszuwählen.

HTMLElement.contentEditable – Die contentEditable-Eigenschaft eines Elements bestimmt, ob der Inhalt dieses Elements editierbar/veränderbar ist. Diese Eigenschaft kann wie im folgenden Skript gezeigt festgelegt werden. Diese Eigenschaft kann auch verwendet werden, um zu bestimmen, ob ein bestimmtes Element editierbar ist oder nicht. Probieren Sie das folgende Skript in einem beliebigen HTML-Textkörper aus und Sie werden feststellen, dass Sie jeden Inhalt des Textkörpers bearbeiten können.

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

Element.innerHTML – innerHTML ist eine weitere wichtige Eigenschaft, die wir verwenden, um auf HTML-Inhalte innerhalb eines Elements zuzugreifen. Sie wird auch verwendet, um neue HTML-Inhalte des Elements festzulegen. Sie wird häufig verwendet, um den Inhalt von Datenfeldern festzulegen/zu ändern. Angenommen, Sie möchten beispielsweise, dass Ihre Webseite die Temperatur von Mumbai stündlich aktualisiert, können Sie das Skript im folgenden Beispiel stündlich ausführen.

<!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>

Nützliche Methoden des Elementobjekts

HTMLElement.blur() & HTMLElement.focus() – Unschärfe- und Fokusmethoden werden verwendet, um den Fokus von einem HTML-Element zu entfernen bzw. ihm den Fokus zu geben. Diese Methoden werden am häufigsten verwendet, um den Fokus eines Cursors zwischen Textfeldern auf einer Dateneingabe-Webseite zu verschieben.

Element.querySelectorAll – Diese Methode ähnelt der bereits besprochenen querySelector-Methode für das Dokumentobjekt. Diese Methode beschränkt jedoch die Suche auf die Nachkommen des Elements selbst.

Genauigkeitshinweis: Der obige Codeblock wird in der veröffentlichten Form wiedergegeben. Funktionierender Code verwendet Dokument mit einem kleinen d und dem innerHTML Eigenschaft, nicht setInnerHTML().

Debuggen im DOM

Entwicklertools von Google ChromeMozilla Firefox, Internet Explorer (10 oder höher) oder Safari ermöglichen ein einfaches Debuggen direkt im Browser. Manchmal interpretieren verschiedene Browser dasselbe HTML-Markup unterschiedlich. Dann hilft Ihnen das Debuggen dabei, das DOM so zu überprüfen, wie es von der DOM-Engine dieses bestimmten Browsers interpretiert wurde.

Browserhinweis: Der Internet Explorer wurde 2022 eingestellt, daher befinden sich seine Entwicklertools jetzt in Microsoft EdgeDie folgenden Schritte bleiben unverändert; die Entwicklertools werden mit F12 geöffnet.

Nehmen wir nun an, Sie möchten den Temperaturwert von 26 ändernoC bis 32oC in Ihrem letzten Beispiel. Dazu werden wir einige einfache Schritte unternehmen. Die hier gezeigten Screenshots stammen von Mozilla Firefox– Die Schritte sind jedoch in allen anderen Browsern gleich.

  1. Öffnen Sie MyFileNewFile.html (oder den Namen, den Sie Ihrer HTML-Datei in den obigen Tutorials gegeben haben) mit Ihrem Browser
  2. Klicken Sie mit der Maus mit der rechten Maustaste auf den Temperaturwert 26oC und klicken Sie auf „Element prüfen“

    Klicken Sie mit der rechten Maustaste auf den Temperaturwert und wählen Sie im Browser „Element untersuchen“.

  3. Beachten Sie, dass das Element, bei dem Sie „Element prüfen“ ausgewählt haben, in Ihrem Browser hervorgehoben angezeigt wird (das Debugger-Fenster erscheint normalerweise am unteren Bildschirmrand).

    Die Browser-Entwicklertools heben das untersuchte Span-Element im DOM-Baum hervor.

  4. Öffnen Sie das Element, indem Sie auf das geneigte Dreieck daneben klicken

    Das Span-Element im DOM-Inspektor mithilfe des Dreieck-Schalters erweitern.

  5. Wählen Sie aus, was Sie bearbeiten möchten, und doppelklicken Sie darauf. Sie erhalten die Option, den Text zu ändern. Gehen Sie wie im animierten Bild unten beschrieben vor.

    Animierte Demonstration der Bearbeitung des DOM-Textwerts von 26 auf 32 im Inspektor

  6. Beachten Sie die inhaltliche Änderung Ihrer HTML-Seite. Sie können das Debugging-Fenster jetzt schließen.

    Beachten Sie, dass Ihre Änderungen nur für diese Sitzung gespeichert werden. Sobald Sie die Seite neu laden oder aktualisieren (F5 drücken), werden die Änderungen rückgängig gemacht. Dies weist darauf hin, dass Sie nicht die eigentliche HTML-Quelle, sondern nur die lokale Interpretation Ihres Browsers geändert haben.

    Versuchen Sie als unterhaltsame Übung Folgendes. Öffnen www.facebook.com in Ihrem Browser und verwenden Sie das Debugger-Tool, um das folgende Ergebnis zu erhalten – beachten Sie die Meldung „Ich habe Facebook gehackt“.

Das Ergebnis dieser Übung sieht aus wie im folgenden Screenshot.

Facebook-Seite live im Browser-Inspektor bearbeitet, sodass dort steht: „Ich habe Facebook gehackt.“

Das Lesen und Bearbeiten von Knoten umfasst statische Seiten. Interaktive Seiten reagieren zusätzlich auf die Aktionen des Benutzers.

DOM-Ereignisse

Was sind Ereignisse in DOM?

Ereignisse sind ein Programmiermodell, bei dem vom Benutzer (oder vom Lebenszyklus der Browserseite ausgelöste) Vorfälle als Nachrichten gesendet werden. Wenn beispielsweise eine Seite vollständig geladen ist, löst sie das window.load-Ereignis aus, und ebenso, wenn der Benutzer auf eine entsprechende Schaltfläche klickt Das Klickereignis des Elements wird ausgelöst.

Diese Nachrichten können von jedem abgefangen werden JavaSkript Code und dann ein Entwicklerdefinierte Aktion Das kann man beispielsweise so umsetzen. Angenommen, Sie möchten, dass sich die Zahlen auf Ihrer Webseite nur aktualisieren, wenn der Benutzer auf eine Schaltfläche klickt. Dies lässt sich mit einer der folgenden Methoden erreichen:

  1. Weisen Sie dem onclick-Ereignis des HTML-Elements eine Aktion zu
  2. Weisen Sie dem Klickereignis mithilfe der Methode addEventListener eine Aktion zu

Methode 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>

Methode 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>

Fehlerbehebung im DOM

Hinweis zur Legacy-API: Zwei der unten stehenden Antworten verwenden `document.write()`. Das funktioniert zwar, aber ein Aufruf nach dem Laden der Seite löscht das Dokument. Verwenden Sie stattdessen lieber `console.log()` oder `innerHTML`.

F. Woher weiß ich, ob ein Element existiert oder nicht?

A. Versuchen Sie, das Element mit einem der Selektoren nachzuschlagen und prüfen Sie, ob das zurückgegebene Element eine Null ist. Siehe Beispiel unten –

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

F. Ich erhalte TypeError: document.getElementByID ist keine Funktion ...

A. Stellen Sie sicher, dass der Methodenname genau mit der API-Methode übereinstimmt. Wie in der Frage oben – es ist getElementById und nicht getElementByID.

F. Was ist der Unterschied zwischen Children und ChildNodes?

A. Die Methode children liefert uns die Sammlung aller Elemente innerhalb des aufrufenden Elements. Die zurückgegebene Sammlung ist vom Typ HTMLCollection. Die Methode childNodes liefert uns jedoch die Sammlung aller Knoten innerhalb des aufrufenden Elements. Fügen Sie unserem Beispiel die folgenden Skripts hinzu und sehen Sie den Unterschied –

Die Methode childNodes gibt 14 Elemente zurück

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);

Während die Methode „Children“ nur 7 Elemente zurückgibt

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);

F. Ich erhalte die Meldung Uncaught TypeError: Cannot read property 'innerHTML' of undefined…

A. Stellen Sie sicher, dass die Instanz von HTMLElement, für die Sie die Eigenschaft innerHTML aufrufen, nach der ersten Deklaration festgelegt wurde. Dieser Fehler tritt im Allgemeinen in folgendem Szenario auf. Sehen Sie im nächsten Codeblock, wie der Fehler vermieden werden kann …

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';
}

Häufig gestellte Fragen

Shadow DOM ist eine Browserfunktion, die jeder Komponente einen eigenen, isolierten Teilbaum zuweist, sodass Stile und Skripte nicht nach außen dringen. Virtual DOM ist eine Bibliothekstechnik, die von React und Vue verwendet wird und eine Kopie im Arbeitsspeicher vergleicht, um die Anzahl der tatsächlichen Aktualisierungen zu minimieren.

WebDriver sendet einen Locator an den Browser, der den analysierten Baum durchläuft, bis eine Übereinstimmung gefunden wird, und dann ein WebElement-Handle zurückgibt. Locators Begriffe wie id, name, CSS-Selektor und XPath beschreiben lediglich unterschiedliche Suchregeln für dieselben Knoten.

Verwenden Sie `getElementById`, wenn das Ziel eine eindeutige ID besitzt; dies ist die schnellste Suchmethode und gibt einen Knoten zurück. Verwenden Sie `querySelector` oder `querySelectorAll`, wenn die Übereinstimmung von Klassen, Attributen oder einem Eltern-Kind-Pfad abhängt.

Es wird zwar ausgeführt, aber Browser raten davon ab. Ein Aufruf von `document.write()` nach dem Laden der Seite überschreibt das gesamte Dokument und blockiert das Parsen während des Ladevorgangs. Verwenden Sie stattdessen `console.log()`. tracing oder innerHTML, um Inhalte einzufügen.

Das DOM modelliert den Seiteninhalt: Head, Body und alle Tags. Das Browserobjektmodell (BOM) umfasst den umgebenden Browser, einschließlich Navigator, Bildschirm, Standort und Verlauf. Das Fensterobjekt ist der Schnittpunkt beider Modelle.

Der Internet Explorer wurde 2022 eingestellt, daher befinden sich seine Entwicklertools jetzt im Internet Explorer. Microsoft EdgeDer Arbeitsablauf bleibt unverändert: Drücken Sie F12 oder klicken Sie mit der rechten Maustaste auf ein Element, wählen Sie „Untersuchen“ und bearbeiten Sie den Knoten im sich öffnenden Bedienfeld.

Werkzeuge für maschinelles Lernen bewerten mehrere Knotenattribute gleichzeitig. Wenn sich also eine Klasse oder ID ändert, wird dasselbe Element erneut gefunden, anstatt ein Fehler auszulösen. Selbstheilende Testplattformen bauen darauf auf herkömmlichen DOM-Abfragen auf.

Copilot Es erstellt Event-Listener, QuerySelector-Ketten und Traversierungsschleifen aus einem Kommentar und ist bei gängigen Mustern zuverlässig. Testen Sie die Vorschläge immer auf der echten Seite, da Ihr Markup nicht sichtbar ist.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: