Waar zit DOM in Selenium WebDriver? Structuur en volledige vorm

Door: Krishna Rungta Krishna Rungta
Hours Bijgewerkt

⚡ Slimme samenvatting

Het Document Object Model (DOM) maakt een HTML-pagina toegankelijk voor JavaScript als een boomstructuur van objecten, waardoor scripts en Selenium WebDriver kan elk element op de pagina lezen, lokaliseren en wijzigen terwijl de browser actief is.

  • 🔘 Volledige vorm: DOM staat voor Document Object Model, een door W3C gestandaardiseerde interface voor HTML- en XML-documenten.
  • ☑️ Boomstructuur: Elke tag wordt een knooppunt, dus html, head, body, article en p vormen een ouder-kind hiërarchie.
  • ✅ Drie objecten: Window omsluit het tabblad, Document markeert de hoofdstructuur en Element vertegenwoordigt elke afzonderlijke tag.
  • 🧪 Kernmethoden: getElementById, querySelector en querySelectorAll halen knooppunten op; innerHTML leest en herschrijft hun inhoud.
  • ️ Foutopsporing: De ontwikkelaarstools van de browser tonen de geparseerde boomstructuur, en wijzigingen die daarin worden aangebracht, blijven slechts van kracht tot de pagina opnieuw wordt geladen.
  • 📊 Evenementen: Acties zoals klikken en laden zenden berichten uit die kunnen worden onderschept door onclick-attributen of addEventListener.
Meer informatie

Waar zit DOM in Selenium WebDriver-structuur en volledige vorm

Waar zit DOM in Selenium WebDriver?

ARREST in Selenium WebDriver is een essentieel onderdeel van webontwikkeling gebruikmakend van HTML5 en JavaScript. De volledige vorm van DOM is Document Object Model. DOM is geen computerwetenschappelijk concept. Het is een eenvoudige set interfaces die gestandaardiseerd zijn onder webontwikkelaars om documenten in HTML of XML te openen en te manipuleren met behulp van JavaScript.

Deze standaarden helpen ontwikkelaars een webpagina te bouwen zonder zich zorgen te maken over implementatiedetails. Sommige organisaties die betrokken zijn bij het standaardiseren van deze interfaces zijn bijvoorbeeld Mozilla, Apple, Microsoft, GoogleAdobe, enzovoort. Het is echter het W3C dat een standaard formaliseert en publiceert – zie hier (https://dom.spec.whatwg.org/).

De onderstaande secties behandelen de documentstructuur, de objecten die de DOM beschikbaar stelt en hoe je deze kunt inspecteren. Mozilla houdt de actuele API-referentie bij op de website. MDN Document Object Model-pagina's.

Elke Selenium De locator wordt opgelost ten opzichte van dezelfde boomstructuur, dus de onderstaande structuur is wat zoekElement() zoekopdrachten.

De DOM-structuur begrijpen

U moet de DOM-structuur begrijpen als u een website bouwt waarbij gebruik wordt gemaakt van scripts JavaScript. DOM begrijpen is nog belangrijker als u een of alle van de volgende ingewikkelde taken op uw website uitvoert:

  1. Ontwikkelping Inhoud die zichzelf continu bijwerkt zonder de hele pagina te vernieuwen – zoals de actuele koers van alle aandelen in de portefeuille van uw gebruiker.
  2. Ontwikkelping Geavanceerde gebruikersinteracties, zoals het dynamisch toevoegen of wijzigen van content – ​​bijvoorbeeld de mogelijkheid om meer aandelen aan je portfolio toe te voegen.
  3. Ontwikkelping Inhoud die door de gebruiker kan worden aangepast – zoals de mogelijkheid om de lay-out te wijzigen, zodat de beleggingsportefeuille met beleggingsfondsen vóór de aandelenportefeuille wordt weergegeven.
  4. Ontwikkelping Responsieve content op uw website zorgt ervoor dat uw website zich automatisch aanpast aan verschillende schermformaten, zoals iPhone, desktop, tablet, enz.

Een eenvoudige HTML-pagina

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

Hoe ziet de DOM PARSER van een browser eruit?

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

Hoe krijg je toegang tot het lichaamselement?

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

Hoe zeg je ‘Hallo wereld’?

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

Uiteindelijk zal het volledige HTML-bestand er zo uitzien

Open Windows Notepad en plak de volgende inhoud erin. Sla het bestand vervolgens op als "MyFileNewFile.html" (zorg ervoor dat uw bestandsnaam eindigt op .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>

Open ten slotte het bestand met een van uw favoriete browsers en u ziet "Hallo wereld!"

Onderdelen van DOM in Selenium

Hieronder staan ​​de belangrijkste componenten van DOM Selenium Webstuurprogramma:

  • venster
  • Document
  • Element

Elk onderdeel bevindt zich op een ander niveau in de boomstructuur, te beginnen bij het buitenste onderdeel.

venster

Venster is het object dat het documentobject in een DOM bevat. Het zit bovenop alles.

Om vanuit een bepaald document naar een vensterobject te gaan

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

In een omgeving met tabbladen heeft elk tabblad zijn eigen vensterobject. Als je echter gebeurtenissen als window.resizeTo en window.resizeBy wilt vastleggen en implementeren, zijn ze van toepassing op het hele venster en niet alleen op het tabblad.

Eigenschappen van vensterobject in DOM

venster.localStorage – geeft toegang tot de lokale opslag van de browser. De lokale opslag kan worden gebruikt om gegevens uit een sessie op te slaan en op te halen.

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

raamopener - krijgt de verwijzing naar het vensterobject dat dit venster heeft geopend (door op een link te klikken of door de methode window.open te gebruiken)

Handige methoden voor vensterobjecten

venster.alert() – geeft een waarschuwingsvenster met een bericht weer.

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

Er zijn veel nuttige gebeurtenissen die door het vensterobject worden weergegeven. We zullen ze bespreken in de sectie “Evenementen” onder Geavanceerde onderwerpen

GERELATEERDE ARTIKELEN

Document

Een document markeert het begin van een DOM-boom. Een document is het eerste knooppunt in een DOM. Het heeft verschillende methoden en eigenschappen waarvan het bereik van toepassing is op het hele document, zoals URL, getElementById, querySelector enz.

Eigenschappen van documentobject in DOM

Document.documentURI en Document.URL – Beide geven de huidige locatie van het document terug. Als het document echter niet van het type HTML-document is.URL zal niet werken.

Document.activeElement – Deze methode retourneert het element in de DOM dat de focus heeft. Dit betekent dat als een gebruiker typt...ping Als een tekstvak is geopend, zal Document.activeElement een verwijzing naar dat tekstvak retourneren.

Document titel – Dit wordt gebruikt om een ​​titel van een bepaald document te lezen of in te stellen.

Handige methoden voor documentobjecten

Document.getElementById(String-ID) – Dit is verreweg de meest relevante en nuttige methode voor DOM-manipulatie. Het wordt gebruikt om een ​​element in de DOM-boom op te zoeken. met behulp van zijn unieke identificatiecodeDe opzoekfunctie is hoofdlettergevoelig, d.w.z. in het volgende voorbeeld staat " Het element "" kan niet worden opgezocht met woorden als IntroDiv, introdiv, iNtrodiv, enz.

<!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-selector) – dit is een andere veelgebruikte methode om een ​​of meer elementen te selecteren op basis van regels van CSS-selector (Als je bekend bent met de $ notatie van jQuery, die gebruikt zelf ook deze methode.) We zullen niet dieper ingaan op CSS-selectors. Een CSS-selector is een set regels waarmee je een lijst met vergelijkbare elementen kunt krijgen (gebaseerd op de selectorregel). We hebben deze methode al eerder gebruikt in het "Hello World"-gedeelte.

Element

Het onderstaande diagram laat zien hoe een Element-object zich in de DOM-structuur bevindt, onder het documentknooppunt.

Elementobject weergegeven als een knooppunt binnen de DOM-boomstructuur.

Elementobject in DOM

Een element is elk object dat wordt weergegeven door een knooppunt in de DOM-boom van een document. Zoals altijd is het elementobject zelf slechts een constructie.tracDe uitwisseling van eigenschappen, methoden en gebeurtenissen tussen een browser en een HTML-document. Er bestaan ​​speciale soorten elementen, zoals HTMLElement, SVGElement, XULElement, enzovoort. In deze handleiding zullen we ons alleen richten op HTMLElement.

Eigenschappen van elementobject in DOM

Element.id – Deze eigenschap kan worden gebruikt om “ID” (een unieke identificatie) voor een HTML-element in te stellen of te lezen. ID moet uniek zijn tussen de elementen in een DOM-boom. Zoals eerder vermeld, wordt ID ook gebruikt door de Document.getElementById-methode om een ​​bepaald Element-object binnen een DOM-boom te selecteren.

HTMLElement.contentEditable – contentEditable eigenschap van een element bepaalt of de inhoud van dat element bewerkbaar/wijzigbaar is. Deze eigenschap kan worden ingesteld zoals weergegeven in het onderstaande script. Deze eigenschap kan ook worden gebruikt om te bepalen of een bepaald element bewerkbaar is of niet. Probeer het volgende script in een HTML-body en u zult merken dat u alle inhoud van de body kunt bewerken.

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

Element.innerHTML – innerHTML is een andere belangrijke eigenschap die we gebruiken om toegang te krijgen tot HTML-inhoud binnen een element. Het wordt ook gebruikt om nieuwe HTML-inhoud van het element in te stellen. Het wordt veel gebruikt om de inhoud van gegevensvelden in te stellen/te wijzigen. Stel dat u bijvoorbeeld wilt dat uw webpagina de temperatuur van Mumbai City elk uur bijwerkt, dan kunt u het script in het volgende voorbeeld elk uur uitvoeren.

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

Handige methoden voor elementobject

HTMLElement.blur() & HTMLElement.focus() – blur- en focusmethoden worden gebruikt om de focus van een HTML-element te verwijderen of om de focus te geven. Deze methoden worden het meest gebruikt om de focus van een cursor te verplaatsen tussen tekstvakken op een webpagina voor gegevensinvoer.

Element.querySelectorAll – Deze methode is vergelijkbaar met de reeds besproken querySelector-methode voor het documentobject. Deze methode beperkt het zoeken echter binnen de afstammelingen van het element zelf.

Nauwkeurigheidsopmerking: Het bovenstaande codeblok is overgenomen zoals gepubliceerd. Werkende code gebruikt document met een kleine letter d en de innerlijkeHTML eigenschap, niet setInnerHTML().

Foutopsporing in DOM

Ontwikkelaarstools van Google Chrome, Mozilla Firefox, Internet Explorer (10 of hoger) of Safari maken eenvoudig foutopsporing rechtstreeks in de browser mogelijk. Soms interpreteren verschillende browsers dezelfde HTML-opmaak anders en dat is wanneer foutopsporing u helpt de DOM te inspecteren zoals deze is geïnterpreteerd door de DOM-engine van die specifieke browser.

Browsernotitie: Internet Explorer is in 2022 uitgefaseerd, dus de DevTools ervan zijn nu beschikbaar in Microsoft EdgeDe onderstaande stappen blijven ongewijzigd; DevTools openen met F12.

Laten we nu zeggen dat u de temperatuurwaarde wilt wijzigen van 26oC 32oC in je laatste voorbeeld. We zullen een paar eenvoudige stappen nemen om dat te doen. De hier getoonde schermafbeeldingen zijn van Mozilla Firefox– de stappen zijn echter hetzelfde in alle andere browsers.

  1. Open MyFileNewFile.html (of welke naam u ook aan uw HTML-bestand hebt gegeven in de bovenstaande tutorials) met uw browser
  2. Gebruik uw muis en klik met de rechtermuisknop op de temperatuurwaarde 26oC en klik op “Element inspecteren”

    Klik met de rechtermuisknop op de temperatuurwaarde en kies 'Element inspecteren' in de browser.

  3. Merk op dat het element waar u voor "Element inspecteren" hebt gekozen, gemarkeerd wordt weergegeven in uw browser (debuggervenster verschijnt meestal onder aan het scherm)

    De ontwikkelaarstools van de browser markeren het geïnspecteerde span-element in de DOM-boom.

  4. Open het element door op het gekantelde driehoekje ernaast te klikken

    Het span-element in de DOM-inspector uitbreiden met behulp van de driehoekschakelaar.

  5. Selecteer wat u wilt bewerken en dubbelklik erop. U krijgt een optie om de tekst te wijzigen. Doe zoals aangegeven in de geanimeerde afbeelding hieronder.

    Geanimeerde demonstratie van het bewerken van de DOM-tekstwaarde van 26 naar 32 in de inspector.

  6. Let op de verandering in de inhoud van uw HTML-pagina. U kunt het foutopsporingsvenster nu sluiten.

    Houd er rekening mee dat uw wijzigingen alleen voor deze sessie behouden blijven. Zodra u de pagina opnieuw laadt of vernieuwt (druk op F5), worden de wijzigingen teruggedraaid. Dit geeft aan dat u niet de daadwerkelijke HTML-bron hebt gewijzigd, maar alleen de lokale interpretatie van uw browser.

    Probeer als leuke oefening het volgende: Open www.facebook.com in uw browser en gebruik de debuggertool om het volgende resultaat te krijgen - let op de tekst "Ik heb Facebook gehackt".

Het resultaat van die oefening ziet eruit zoals op de onderstaande schermafbeelding.

De Facebookpagina is live in de browserinspecteur bewerkt en er staat nu: "Ik heb Facebook gehackt".

Het lezen en bewerken van knooppunten heeft betrekking op statische pagina's. Interactieve pagina's reageren ook op wat de gebruiker doet.

DOM-evenementen

Wat zijn evenementen in DOM?

Gebeurtenissen zijn een programmeermodel waarbij door de gebruiker geactiveerde incidenten (of door de levenscyclus van de browserpagina geactiveerde) incidenten als berichten worden uitgezonden. Wanneer een pagina bijvoorbeeld klaar is met laden, wordt de gebeurtenis window.load geactiveerd, en op dezelfde manier wanneer de gebruiker op een knop klikt De klikgebeurtenis van het element wordt geactiveerd.

Deze berichten kunnen door iedereen worden onderschept JavaScript code en vervolgens een ontwikkelaar gedefinieerde actie kan worden gedaan. Stel bijvoorbeeld dat u wilt dat de cijfers op uw webpagina alleen worden bijgewerkt wanneer een gebruiker op een knop klikt. U kunt dit bereiken met een van de volgende methoden:

  1. Wijs actie toe aan de onclick-gebeurtenis van het HTML-element
  2. Wijs actie toe aan de klikgebeurtenis met behulp van de addEventListener-methode

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>

Problemen oplossen in DOM

Opmerking over de oude API: Twee van de onderstaande antwoorden gebruiken document.write(). Het werkt nog steeds, maar een aanroep na het laden van de pagina wist het document. Gebruik liever console.log() of innerHTML.

V. Hoe weet ik of een element bestaat of niet?

A. Probeer het element op te zoeken met een van de selectors en controleer of het geretourneerde element nul is. Zie voorbeeld hieronder –

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

V. Ik krijg TypeError: document.getElementByID is geen functie...

A. Zorg ervoor dat de methodenaam exact overeenkomt met de API-methode. Zoals in de bovenstaande vraag: het is getElementById en niet getElementByID.

V. Wat is een verschil tussen kinderen en childNodes?

A. De methode children geeft ons de verzameling van alle elementen binnen het aanroepende element. De geretourneerde verzameling is van het type HTMLCollection. De methode childNodes geeft ons echter de verzameling van alle knooppunten binnen het aanroepende element. Voeg de volgende scripts toe aan ons voorbeeld en zie het verschil –

De childNodes-methode retourneert 14 items

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

Terwijl de kindermethode slechts 7 items retourneert

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

V. Ik krijg Uncaught TypeError: Kan eigenschap 'innerHTML' van undefined… niet lezen

A. Zorg ervoor dat het exemplaar van HTMLElement waarop u de eigenschap innerHTML aanroept, is ingesteld na de eerste declaratie. Deze fout treedt over het algemeen op in het volgende scenario. Bekijk hoe de fout kan worden vermeden in het volgende codeblok…

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

Veelgestelde vragen

Shadow DOM is een browserfunctie die een component een eigen, geïsoleerde substructuur geeft, zodat stijlen en scripts niet doorlekken. Virtual DOM is een techniek uit bibliotheken, gebruikt door React en Vue, die een kopie in het geheugen vergelijkt om daadwerkelijke updates te minimaliseren.

WebDriver stuurt een locator naar de browser, die de geparseerde boomstructuur doorloopt totdat een overeenkomst wordt gevonden en vervolgens een WebElement-handle retourneert. Zoekers Termen zoals id, naam, CSS-selector en XPath beschrijven simpelweg verschillende zoekregels voor dezelfde knooppunten.

Gebruik `getElementById` wanneer het doel een unieke ID heeft; dit is de snelste manier om op te zoeken en retourneert één element. Gebruik `querySelector` of `querySelectorAll` wanneer de overeenkomst afhankelijk is van klassen, attributen of een ouder-kindrelatie.

Het wordt nog steeds uitgevoerd, maar browsers raden het af. Het aanroepen van `document.write()` nadat de pagina is geladen, vervangt het hele document en blokkeert het parsen tijdens het laden. Gebruik `console.log()` voor tracing, of innerHTML om inhoud in te voegen.

Het DOM-model beschrijft de pagina-inhoud: de head, de body en elke tag. Het Browser Object Model (BOM) beschrijft de omringende browser, inclusief de navigator, het scherm, de locatie en de geschiedenis. Het window-object is de plek waar beide samenkomen.

Internet Explorer is in 2022 uitgefaseerd, dus de ontwikkelaarstools ervan bevinden zich nu in Microsoft EdgeDe workflow blijft ongewijzigd: druk op F12 of klik met de rechtermuisknop op een element, kies 'Inspecteren' en bewerk het knooppunt in het paneel dat verschijnt.

Machine learning-tools beoordelen meerdere knooppuntkenmerken tegelijk, zodat ze, wanneer een klasse of ID verandert, hetzelfde element opnieuw herkennen in plaats van een foutmelding te geven. Zelfherstellende testplatforms bouwen hierop voort, bovenop gewone DOM-query's.

Copilot Het genereert eventlisteners, querySelector-ketens en traversal-loops vanuit een commentaar en is betrouwbaar op basis van veelvoorkomende patronen. Test de suggestie altijd op de daadwerkelijke pagina, omdat deze uw markup niet kan zien.

Vat dit bericht samen met: