Hvad er DOM i Selenium WebDriver: Struktur, fuld form

Hvad er DOM i Selenium WebDriver?

DOM in Selenium WebDriver er en væsentlig komponent i webudvikling ved hjælp af HTML5 og JavaManuskript. Den fulde form for DOM er Document Object Model. DOM er ikke et datalogisk koncept. Det er et simpelt sæt grænseflader, der er standardiseret blandt webudviklere til at få adgang til og manipulere dokumenter i HTML eller XML vha. JavaManuskript.

Disse standarder hjælper udviklere med at bygge en webside uden at bekymre sig om implementeringsdetaljer. Nogle af de organisationer, der er involveret i standardisering af disse grænseflader, er som Mozilla, Apple, Microsoft, Google, Adobe etc. Det er dog W3C, der formaliserer en standard og udgiver den – se her (https://dom.spec.whatwg.org/).

Denne tutorial har til formål at dække grundlæggende begreber i HTML-dokumentstruktur og hvordan man manipulerer den ved hjælp af JavaManuskript. Vi vil dække følgende emner i denne tutorial:

Forståelse af DOM-strukturen
Komponenter af DOM i Selenium
Fejlretning i DOM
DOM-begivenheder
Fejlfinding i DOM

Forståelse af DOM-strukturen

Du bliver nødt til at forstå DOM-strukturen, hvis du bygger et websted, der involverer scripting JavaManuskript. At forstå DOM er endnu mere kritisk, hvis du udfører en eller alle af følgende komplicerede opgaver på dit websted –

Udvikling af indhold, der opdaterer sig selv løbende uden at opdatere hele siden – som den aktuelle pris på alle aktierne i din brugers portefølje
Udvikling af avancerede brugerinteraktioner såsom tilføjelse eller ændring af indhold dynamisk – såsom mulighed for at tilføje flere aktier til din portefølje
Udvikling af indhold, der kan tilpasses af brugeren – f.eks. evnen til at ændre layoutet, så porteføljen af investeringsforeninger vises før aktieporteføljen
Udvikling af responsivt indhold på din hjemmeside og dermed få din hjemmeside til at tilpasse sig forskellige medieskærme, dvs. iPhone, desktop, tablet etc. automatisk

En grundlæggende HTML-side

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

Hvordan ser det ud for en browsers DOM PARSER?

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

Hvordan får du adgang til kropselementet?

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

Hvordan siger man "Hej verden"?

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

Endelig vil hele HTML-filen se ud

Åbne Windows Notesblok og indsæt følgende indhold i den. Gem derefter filen som "MyFileNewFile.html" (sørg for, at dit filnavn slutter 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>

Til sidst skal du blot åbne filen ved hjælp af en af dine foretrukne browsere, og du vil se "Hello World!"

Komponenter af DOM i Selenium

Nedenfor er de vigtigste komponenter i DOM er Selenium WebDriver:

Window
Dokument
Element

Window

Window er det objekt, der indeholder dokumentobjektet i en DOM. Den sidder oven på alt.

For at komme til et vinduesobjekt fra et givet dokument

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

I et fanemiljø har hver fane sit eget vinduesobjekt. Men hvis man gerne vil fange og implementere begivenheder som window.resizeTo og window.resizeBy, gælder de for hele vinduet og ikke for fanen alene.

Egenskaber for vinduesobjekt i DOM

window.localStorage – giver adgang til browserens lokale lager. Det lokale lager kan bruges til at gemme og hente data fra en session.

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

vindue.åbner - henter referencen til vinduesobjektet, der åbnede dette vindue (enten ved at klikke på et link eller bruge window.open-metoden)

Nyttige metoder til vinduesobjekt

window.alert() – viser en advarselsdialog med en besked.

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

Der er mange nyttige hændelser, som vinduesobjektet afslører. Vi vil diskutere dem i afsnittet "Begivenheder" under Avancerede emner

Dokument

Dokument markerer begyndelsen af et DOM-træ. Dokument er den første node i en DOM. Det har flere metoder og egenskaber, hvis omfang gælder for hele dokumentet som URL, getElementById, querySelector osv.

Egenskaber for dokumentobjekt i DOM

Document.documentURI og Document.URL – De returnerer begge dokumentets aktuelle placering. Hvis dokumentet dog ikke er af typen HTML, vil Document.URL ikke fungere.

Document.activeElement – Denne metode returnerer elementet i DOM, som er i fokus. Dette betyder, at hvis en bruger skriver i en tekstboks, returnerer Document.activeElement reference til den tekstboks.

Document.title – Dette bruges til at læse eller angive en titel på et givet dokument.

Nyttige metoder til dokumentobjekt

Document.getElementById(String id) – dette er langt den mest relevante og brugbare metode i DOM-manipulation. Det bruges til at slå et element op i DOM-træet ved hjælp af dets unikke identifikator. Opslaget skelner mellem store og små bogstaver, dvs. i følgende eksempel " ” element kan ikke slås op ved hjælp af ord som IntroDiv eller introdiv eller introdiv osv.

<!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(strengvælger) – dette er en anden meget brugt metode til at vælge et element mere baseret på regler for CSS-vælger (hvis du er bekendt med jQuerys $-notation, bruger den selv denne metode). Vi vil ikke dykke meget ned i CSS-vælgere. CSS-vælger er et sæt regler, som du kan bruge til at få en liste over lignende elementer (baseret på vælgerreglen). Vi har brugt denne metode før i afsnittet "Hello World".

Element

Element er ethvert objekt repræsenteret af en node i et DOM-træ i et dokument. Som altid er Element-objektet i sig selv blot en kontrakt af egenskaber, metoder og hændelser mellem en browser og et HTML-dokument. Der er specielle slags elementer som HTMLElement, SVGElement, XULElement osv. Vi vil kun fokusere på HTMLElement i denne tutorial.

Egenskaber for elementobjekt i DOM

Element.id – Denne egenskab kan bruges til at indstille eller læse "ID" (en unik identifikator) for et HTML-element. ID skal være unikt blandt elementerne i et DOM-træ. Som nævnt før bruges ID også af Document.getElementById-metoden til at vælge et bestemt Element-objekt i et DOM-træ.

HTMLElement.contentEditable – contentEditable-egenskaben for et element bestemmer, om indholdet er af det element, er redigerbart/modificerbart. Denne egenskab kan indstilles som vist i scriptet nedenfor. Denne egenskab kan også bruges til at bestemme, om et givet element er redigerbart eller ej. Prøv følgende script i enhver HTML-tekst, og du vil bemærke, at du kan redigere ethvert indhold i brødteksten.

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

Element.innerHTML – innerHTML er en anden vigtig egenskab, som vi bruger til at få adgang til HTML-indhold inde i et element. Det bruges også til at indstille nyt HTML-indhold for elementet. Det er meget brugt til at indstille/ændre indholdet af datafelter. Sig for eksempel, at du vil have din webside til at opdatere temperaturen i Mumbai City hver time, du kan køre scriptet i det følgende eksempel hver time.

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

Nyttige metoder til elementobjekt

HTMLElement.blur() & HTMLElement.focus() – sløring og fokusmetoder bruges til at fjerne fokus fra henholdsvis eller give fokus til et HTML-element. Disse metoder er mest brugt til at flytte en markørs fokus mellem tekstbokse på en dataindtastningswebside.

Element.querySelectorAll – Denne metode ligner den allerede diskuterede querySelector-metode for dokumentobjektet. Denne metode vil dog begrænse dens søgning inden for efterkommerne af selve elementet.

Fejlretning i DOM

Udviklerværktøjer af Google Chrome, Mozilla Firefox, Internet Explorer (10 eller derover) eller Safari tillader nem fejlfinding direkte inde i browseren. Nogle gange fortolker forskellige browsere den samme HTML-markering forskelligt, og det er når fejlretning hjælper dig med at inspicere DOM, som det er blevet fortolket af den pågældende browsers DOM-motor.

Lad os nu sige, at du vil ændre temperaturværdien fra 26^oC til 32^oC i dit sidste eksempel. Vi vil tage nogle få enkle trin for at gøre det. Skærmbilleder vist her er fra Mozilla's Firefox– trinene er dog de samme i alle andre browsere.

Åbn MyFileNewFile.html (eller hvilket som helst navn du gav til din HTML-fil i øvelserne ovenfor) ved hjælp af din browser
Brug din mus og højreklik på temperaturværdien 26^oC og klik på "Inspicer element"
Bemærk, at det element, hvor du valgte at "Inspicere element", vises fremhævet i din browser (debugger-vindue vises normalt nederst på skærmen)
Åbn elementet ved at klikke på den skrå trekant ved siden af det
Vælg, hvad du vil redigere, og dobbeltklik på det. Du får mulighed for at ændre teksten. Gør som anvist i det animerede billede nedenfor.
Bemærk ændringen i indholdet på din HTML-side. Du kan lukke fejlfindingsvinduet nu.

Bemærk, at dine ændringer kun bevares for denne session. Så snart du genindlæser eller opdaterer (tryk F5), vil ændringerne blive ført tilbage. Dette indikerer, at du ikke har ændret den faktiske HTML-kilde, men blot den lokale fortolkning af din browser.

Prøv at gøre følgende som en sjov øvelse. Åben www.facebook.com i din browser og brug debugger-værktøjet til at følge resultatet – læg mærke til, hvordan der står "Jeg har hacket Facebook".

Fejlretningsproces i DOM

DOM-begivenheder

Hvad er begivenheder i DOM?

Hændelser er en programmeringsmodel, hvor brugerudløste (eller browsersidens livscyklusudløste) hændelser udsendes som beskeder. Når en side f.eks. er færdig med at indlæse, udløser den window.load-hændelsen og på samme måde, når brugeren klikker på en knap, der elementets klikhændelse udløses.

Disse beskeder kan opsnappes af enhver JavaScript kode, og derefter kan en udviklerdefineret handling udføres. Lad os sige, at du kun vil have, at tallene på din webside opdateres, når brugeren klikker på en knap. Du kan opnå det ved hjælp af en af følgende metoder -

Tildel handling til onclick-hændelsen for HTML-elementet
Tildel handling til klikhændelsen ved hjælp af addEventListener-metoden

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

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

Fejlfinding i DOM

Q. Hvordan ved jeg, om et element eksisterer eller ej?

A. Prøv at slå elementet op ved hjælp af en af vælgerne og tjek, om det returnerede element er et nul. Se eksempel nedenfor –

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

Q. Jeg får TypeError: document.getElementByID er ikke en funktion...

A. Sørg for, at metodenavnet svarer nøjagtigt til API-metoden. Ligesom i spørgsmålet ovenfor - det er getElementById og ikke getElementByID.

Q. Hvad er forskellen mellem børn og childNodes?

A. Metoden børn får os til samlingen af alle elementer inden for det kaldende element. Den returnerede samling er af typen HTMLCollection. Metoden childNodes giver os dog samlingen af alle noderne i det kaldende element. Tilføj følgende scripts til vores eksempel og se forskellen –

childNodes-metoden returnerer 14 elementer

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

Mens børnemetoden kun returnerer 7 varer

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

Q. Jeg får Uncaught TypeError: Kan ikke læse egenskaben 'innerHTML' af undefined...

A. Sørg for, at den forekomst af HTMLElement, du kalder egenskaben innerHTML på, blev indstillet efter den første erklæring. Denne fejl opstår generelt i følgende scenarie. Se, hvordan fejlen kan undgås i næste kodeblok...

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

Resumé

I denne tutorial lærte vi, hvad en DOM er, og hvordan det er vigtigt at forstå for at bygge dynamiske websider.
Vi kom også ind på typer af DOM-elementer som Window, Document og Element.
Vi lærte nogle nyttige DOM-metoder og egenskaber tilgængelige inden for hver type.
Vi så, hvordan de fleste browsere tilbyder udviklerværktøjer til at spille med en hvilken som helst webside, der er tilgængelig på internettet – og dermed lære at fejlsøge og løse problemer med vores egen hjemmeside.
Vi kom også kort ind på DOM-hændelsesmekanismer.
Til sidst dækkede vi nogle fejlfindingselementer i DOM.
Internettet er fyldt med ressourcer på DOM. Et af de bedste og opdaterede referencematerialer er tilgængeligt på Mozillas udviklernetværk. Se - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model