Vad är DOM i Selenium WebDriver: Struktur, fullständig form

Vad är DOM i Selenium WebDriver?

DOM in Selenium WebDriver är en viktig komponent i webbutveckling med HTML5 och JavaManus. Den fullständiga formen av DOM är Document Object Model. DOM är inte ett datavetenskapligt koncept. Det är en enkel uppsättning gränssnitt standardiserade bland webbutvecklare för att komma åt och manipulera dokument i HTML eller XML med JavaManus.

Dessa standarder hjälper utvecklare att bygga en webbsida utan att oroa sig för implementeringsdetaljer. Några av de organisationer som är involverade i att standardisera dessa gränssnitt är som Mozilla, Apple, Microsoft, Google, Adobe etc. Det är dock W3C som formaliserar en standard och publicerar den – se här (https://dom.spec.whatwg.org/).

Denna handledning syftar till att täcka grundläggande begrepp för HTML-dokumentstruktur och hur man manipulerar den med hjälp av JavaManus. Vi kommer att täcka följande ämnen i denna handledning:

Förstå DOM-strukturen
Komponenter av DOM i Selenium
Felsökning i DOM
DOM-händelser
Felsökning i DOM

Förstå DOM-strukturen

Du måste förstå DOM-strukturen om du bygger en webbplats som involverar skriptanvändning JavaManus. Att förstå DOM är ännu viktigare om du gör någon eller alla av följande komplicerade uppgifter på din webbplats –

Utveckla innehåll som uppdateras kontinuerligt utan att uppdatera hela sidan – som aktuellt pris på alla aktier i din användares portfölj
Utveckla avancerade användarinteraktioner som att lägga till eller ändra innehåll dynamiskt – som möjligheten att lägga till fler aktier till din portfölj
Utveckla innehåll som är anpassningsbart av användare – som möjligheten att ändra layouten så att fondportföljen visas före aktieportföljen
Utveckla responsivt innehåll på din webbplats och på så sätt anpassa din webbplats till olika medieskärmar, dvs. iPhone, stationär, surfplatta etc. automatiskt

En grundläggande HTML-sida

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

Hur ser det ut för en webbläsares DOM PARSER?

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

Hur kommer du åt kroppselementet?

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

Hur säger man "Hello World"?

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

Äntligen kommer hela HTML-filen att se ut

Öppen Windows Anteckningar och klistra in följande innehåll i den. Spara sedan filen som "MyFileNewFile.html" (se till att ditt filnamn slutar med .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>

Till sist öppnar du bara filen med någon av dina favoritwebbläsare och du kommer att se "Hello World!"

Komponenter av DOM i Selenium

Nedan är huvudkomponenterna i DOM Selenium WebDriver:

Fönster
Dokument
Elementet

Fönster

Window är objektet som innehåller dokumentobjektet i en DOM. Den sitter ovanpå allt.

För att komma till ett fönsterobjekt från ett givet dokument

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

I en flikmiljö har varje flik sitt eget fönsterobjekt. Men om man skulle vilja fånga och implementera händelser som window.resizeTo och window.resizeBy gäller de för hela fönstret och inte bara på fliken.

Egenskaper för fönsterobjekt i DOM

window.localStorage – ger tillgång till webbläsarens lokala lagring. Den lokala lagringen kan användas för att lagra och hämta data från en session.

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

fönsteröppnare - hämtar referensen till fönsterobjektet som öppnade detta fönster (antingen genom att klicka på en länk eller använda metoden window.open)

Användbara metoder för fönsterobjekt

window.alert() – visar en varningsdialogruta med ett meddelande.

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

Det finns många användbara händelser som fönsterobjektet exponerar. Vi kommer att diskutera dem i avsnittet "Händelser" under Förhandsämnen

Dokument

Dokument markerar början på ett DOM-träd. Dokument är den första noden i en DOM. Den har flera metoder och egenskaper, vars omfattning gäller för hela dokumentet som URL, getElementById, querySelector etc.

Egenskaper för dokumentobjekt i DOM

Document.documentURI och Document.URL – De returnerar båda dokumentets aktuella plats. Om dokumentet däremot inte är av typen HTML fungerar inte Document.URL.

Document.activeElement – Denna metod returnerar elementet i DOM som är i fokus. Detta betyder att om en användare skriver i en textruta kommer Document.activeElement att returnera referens till den textrutan.

Dokument titel – Detta används för att läsa eller ställa in en titel på ett visst dokument.

Användbara metoder för dokumentobjekt

Document.getElementById(String id) – detta är den överlägset mest relevanta och användbara metoden för DOM-manipulation. Den används för att slå upp ett element i DOM-trädet med hjälp av dess unika identifierare. Sökningen är skiftlägeskänslig, dvs i följande exempel är " ”-element kan inte slås upp med ord som IntroDiv eller introdiv eller 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(Strängväljare) – detta är en annan allmänt använd metod för att välja ytterligare ett element baserat på reglerna för CSS-väljaren (om du är bekant med jQuerys $-notation använder den i sig den här metoden). Vi kommer inte att fördjupa oss mycket i CSS-väljare. CSS-väljaren är en uppsättning regler genom vilka du kan få en lista med liknande element (baserat på väljarregeln). Vi har använt den här metoden tidigare i avsnittet "Hello World".

Elementet

Element är vilket objekt som helst som representeras av en nod i ett DOM-träd i ett dokument. Som alltid är Element-objektet i sig bara ett kontrakt av egenskaper, metoder och händelser mellan en webbläsare och ett HTML-dokument. Det finns speciella typer av element som HTMLElement, SVGElement, XULElement etc. Vi kommer endast att fokusera på HTMLElement i denna handledning.

Egenskaper för elementobjekt i DOM

Element.id – Den här egenskapen kan användas för att ställa in eller läsa "ID" (en unik identifierare) för ett HTML-element. ID måste vara unikt bland elementen i ett DOM-träd. Som tidigare nämnts används ID också av metoden Document.getElementById för att välja ett visst elementobjekt i ett DOM-träd.

HTMLElement.contentEditable – contentEditable-egenskapen för ett element avgör om innehållet är av det elementet är redigerbart/modifierbart. Den här egenskapen kan ställas in som visas i skriptet nedan. Den här egenskapen kan också användas för att avgöra om ett givet element är redigerbart eller inte. Prova följande skript i vilken HTML-kropp som helst och du kommer att märka att du kan redigera vilket innehåll som helst i brödtexten.

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

Element.innerHTML – innerHTML är en annan viktig egenskap som vi använder för att komma åt HTML-innehåll inuti ett element. Det används också för att ställa in nytt HTML-innehåll för elementet. Det används ofta för att ställa in/ändra innehållet i datafält. Säg till exempel att du vill att din webbsida ska uppdatera temperaturen i Mumbai City varje timme. Du kan köra skriptet i följande exempel varje timme.

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

Användbara metoder för elementobjekt

HTMLElement.blur() & HTMLElement.focus() – oskärpa och fokusmetoder används för att ta bort fokus från respektive ge fokus till ett HTML-element. Dessa metoder används mest för att flytta markörens fokus mellan textrutor på en webbsida för datainmatning.

Element.querySelectorAll – Denna metod liknar den redan diskuterade querySelector-metoden för dokumentobjektet. Denna metod kommer dock att begränsa dess sökning inom ättlingarna till själva elementet.

Felsökning i DOM

Utvecklarverktyg av Google Chrome, Mozilla Firefox, Internet Explorer (10 eller högre) eller Safari möjliggör enkel felsökning direkt i webbläsaren. Ibland tolkar olika webbläsare samma HTML-uppmärkning olika och det är då felsökning hjälper dig att inspektera DOM som har tolkats av just den webbläsarens DOM-motor.

Låt oss nu säga att du vill ändra temperaturvärdet från 26^oC till 32^oC i ditt senaste exempel. Vi kommer att ta några enkla steg för att göra det. Skärmdumparna som visas här är från Mozilla's Firefox– stegen är dock desamma i alla andra webbläsare.

Öppna MyFileNewFile.html (eller vilket namn du än gav till din HTML-fil i handledningarna ovan) med din webbläsare
Använd musen och högerklicka på temperaturvärdet 26^oC och klicka på "Inspektera element"
Observera att elementet där du valde att "Inspektera element" visas markerat i din webbläsare (felsökningsfönster visas vanligtvis längst ner på skärmen)
Öppna elementet genom att klicka på den lutande triangeln bredvid den
Välj vad du vill redigera och dubbelklicka på det. Du kommer att få ett alternativ att ändra texten. Gör enligt anvisningarna i den animerade bilden nedan.
Lägg märke till förändringen i innehållet på din HTML-sida. Du kan stänga felsökningsfönstret nu.

Observera att dina ändringar endast kommer att finnas kvar under denna session. Så snart du laddar om eller uppdaterar (tryck F5) kommer ändringarna att återställas. Detta indikerar att du inte ändrade den faktiska HTML-källan utan bara den lokala tolkningen av din webbläsare.

Försök att göra följande som en rolig övning. Öppna www.facebook.com i din webbläsare och använd felsökningsverktyget för att följa resultatet – lägg märke till hur det står "Jag har hackat Facebook".

Felsökningsprocess i DOM

DOM-händelser

Vad är händelser i DOM?

Händelser är en programmeringsmodell där användarutlösta (eller webbläsarsidans livscykelutlösta) incidenter sänds som meddelanden. Till exempel, när en sida har laddats färdigt utlöser den window.load-händelsen och på liknande sätt när användaren klickar på en knapp som elementets klickhändelse utlöses.

Dessa meddelanden kan fångas upp av vilken som helst JavaScript kod och sedan kan en utvecklardefinierad åtgärd vidtas. Säg till exempel att du vill att siffrorna på din webbsida bara ska uppdateras när användaren klickar på en knapp. Du kan uppnå det med någon av följande metoder -

Tilldela åtgärd till onclick-händelsen för HTML-elementet
Tilldela åtgärd till klickhändelsen med metoden addEventListener

Förfarande 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>

Förfarande 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>

Felsökning i DOM

F. Hur vet jag om ett element finns eller inte?

A. Försök att slå upp elementet med någon av väljaren och kontrollera om elementet som returneras är en noll. Se exempel nedan -

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

F. Jag får TypeError: document.getElementByID är inte en funktion...

A. Se till att metodnamnet exakt matchar API-metoden. Som i frågan ovan – det är getElementById och inte getElementByID.

F. Vad är skillnaden mellan barn och barnnoder?

A. Metoden barn får oss samlingen av alla element inom det anropande elementet. Samlingen som returneras är av typen HTMLCollection. Men metoden childNodes ger oss samlingen av alla noder inom det anropande elementet. Lägg till följande skript till vårt exempel och se skillnaden –

Metoden childNodes returnerar 14 objekt

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

Medan barnmetoden bara returnerar 7 objekt

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. Jag får Uncaught TypeError: Kan inte läsa egenskapen 'innerHTML' för undefined...

A. Se till att instansen av HTMLElement du anropar egenskapen innerHTML på ställdes in efter den första deklarationen. Detta fel inträffar vanligtvis i följande scenario. Se hur felet kan undvikas i nästa kodblock...

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

Sammanfattning

I den här handledningen lärde vi oss vad en DOM är och hur det är viktigt att förstå för att bygga dynamiska webbsidor.
Vi berörde också typer av DOM-element som fönster, dokument och element.
Vi lärde oss några användbara DOM-metoder och egenskaper tillgängliga inom varje typ.
Vi såg hur de flesta webbläsare erbjuder utvecklarverktyg för att spela med vilken webbsida som helst på Internet – och lär oss att felsöka och lösa problem med vår egen webbplats.
Vi berörde också kort DOM Event-mekanismer.
Slutligen täckte vi några felsökningsobjekt i DOM.
Internet är fyllt med resurser på DOM. Ett av de bästa och uppdaterade referensmaterialen finns på Mozillas utvecklarnätverk. Ser - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model