Waar zit DOM in Selenium WebDriver: structuur, volledige vorm

Waar zit DOM in Selenium WebDriver?

ARREST in Selenium WebDriver is een essentieel onderdeel van webontwikkeling met behulp 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, Google, Adobe etc. Het is echter het W3C dat een standaard formaliseert en publiceert – zie hier (https://dom.spec.whatwg.org/).

Deze tutorial heeft als doel de basisconcepten van de HTML-documentstructuur te behandelen en hoe u deze kunt manipuleren met behulp van JavaScript. In deze tutorial behandelen we de volgende onderwerpen:

De DOM-structuur begrijpen
Onderdelen van DOM in Selenium
Foutopsporing in DOM
DOM-evenementen
Problemen oplossen in DOM

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:

Het ontwikkelen van inhoud die zichzelf voortdurend bijwerkt zonder de hele pagina te vernieuwen, zoals de huidige prijs van alle aandelen in de portefeuille van uw gebruiker
Het ontwikkelen van geavanceerde gebruikersinteracties, zoals het dynamisch toevoegen of wijzigen van inhoud, zoals de mogelijkheid om meer aandelen aan uw portefeuille toe te voegen
Het ontwikkelen van inhoud die door de gebruiker kan worden aangepast, zoals de mogelijkheid om de lay-out te wijzigen zodat de beleggingsfondsportefeuille vóór de aandelenportefeuille verschijnt
Het ontwikkelen van responsieve content op uw website, waardoor uw website zich automatisch aanpast aan verschillende mediaschermen, zoals iPhone, desktop, tablet etc.

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

Openen 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

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

Document

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

Eigenschappen van documentobject in DOM

Document.documentURI en Document.URL – Ze retourneren allebei de huidige locatie van het document. Als het document echter niet van het type HTML is, zal Document.URL niet werken.

Document.activeElement – Deze methode retourneert het element in de DOM dat in focus is. Dit betekent dat als een gebruiker in een tekstvak typt, Document.activeElement een referentie naar dat tekstvak retourneert.

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 veruit de meest relevante en bruikbare methode bij DOM-manipulatie. Het wordt gebruikt om een element in de DOM-boom op te zoeken met behulp van zijn unieke identifier. De opzoeking is hoofdlettergevoelig, d.w.z. in het volgende voorbeeld is de “ ” element kan niet worden opgezocht met behulp van woorden als IntroDiv of introdiv of iNtrodiv etc.

<!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 nog een element te selecteren op basis van de regels van de CSS-selector (als je bekend bent met de $-notatie van jQuery, die zelf deze methode gebruikt). We zullen niet veel ingaan op CSS-selectors. CSS-selector is een set regels waarmee u een lijst met vergelijkbare elementen kunt krijgen (gebaseerd op de selectorregel). We hebben deze methode eerder gebruikt in het gedeelte 'Hallo wereld'.

Element

Element is elk object dat wordt vertegenwoordigd door een knooppunt in een DOM-boom van een document. Zoals altijd is het Element-object zelf slechts een contract van eigenschappen, methoden en gebeurtenissen tussen een browser en een HTML-document. Er zijn speciale soorten elementen zoals HTMLElement, SVGElement, XULElement enz. We zullen ons in deze tutorial alleen op HTMLElement concentreren.

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.

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.

Laten we nu zeggen dat u de temperatuurwaarde wilt wijzigen van 26^oC 32^oC 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.

Open MyFileNewFile.html (of welke naam u ook aan uw HTML-bestand hebt gegeven in de bovenstaande tutorials) met uw browser
Gebruik uw muis en klik met de rechtermuisknop op de temperatuurwaarde 26^oC en klik op “Element inspecteren”
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)
Open het element door op het gekantelde driehoekje ernaast te klikken
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.
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".

Foutopsporingsproces in DOM

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 dan kan een door de ontwikkelaar gedefinieerde actie worden ondernomen. Stel bijvoorbeeld dat u wilt dat de nummers op uw webpagina alleen worden bijgewerkt wanneer de gebruiker op een knop klikt. U kunt dit bereiken met een van de volgende methoden:

Wijs actie toe aan de onclick-gebeurtenis van het HTML-element
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

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

Samenvatting

In deze tutorial hebben we geleerd wat een DOM is en hoe het een essentieel concept is om te begrijpen om dynamische webpagina's te bouwen.
We hebben ook soorten DOM-elementen besproken, zoals Window, Document en Element.
We hebben enkele nuttige DOM-methoden en -eigenschappen geleerd die binnen elke soort beschikbaar zijn.
We hebben gezien hoe de meeste browsers ontwikkelaarstools aanbieden om met elke webpagina die op internet beschikbaar is te spelen – en zo te leren hoe we problemen met onze eigen website kunnen debuggen en oplossen.
We hebben ook kort ingegaan op DOM Event-mechanismen.
Ten slotte hebben we enkele probleemoplossingsitems in DOM besproken.
Internet staat vol met bronnen over DOM. Een van de beste en actuele referentiematerialen is beschikbaar via het ontwikkelaarsnetwerk van Mozilla. Zien - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model