Hva er DOM i Selenium WebDriver? Struktur og full form

by: Krishna Rungta Krishna Rungta
Hours oppdatert

⚡ Smart oppsummering

Dokumentobjektmodellen eksponerer en HTML-side for JavaSkript som et tre av objekter, slik at skript og Selenium WebDriver leser, finner og endrer ethvert element på siden mens nettleseren kjører.

  • 🔘 Fullstendig skjema: DOM står for Document Object Model, et W3C-standardisert grensesnitt for HTML- og XML-dokumenter.
  • ☑️ Trestruktur: Hver tag blir en node, så html, head, body, artikkel og p danner et foreldre-barn-hierarki.
  • ✅ Tre objekter: Window bryter fanen, Document markerer treroten, og Element representerer hver enkelt tagg.
  • 🧪 Kjernemetoder: getElementById, querySelector og querySelectorAll henter noder; innerHTML leser og skriver innholdet deres om.
  • 🛠️ Feilsøking: Verktøy for nettleserutviklere eksponerer det analyserte treet, og redigeringer som gjøres der varer bare til siden lastes inn på nytt.
  • 📊 Begivenheter: Handlinger som klikk og last inn kringkastingsmeldinger som onclick-attributter eller addEventListener kan fange opp.
Les mer

Hva er DOM i Selenium WebDriver-struktur og fullstendig form

Hva er DOM i Selenium WebDriver?

DOM in Selenium WebDriver er en viktig del av webutvikling ved hjelp av HTML5 og JavaManus. Den fullstendige formen for DOM er Document Object Model. DOM er ikke et datavitenskapelig konsept. Det er et enkelt sett med grensesnitt standardisert blant nettutviklere for å få tilgang til og manipulere dokumenter i HTML eller XML ved hjelp av JavaManus.

Disse standardene hjelper utviklere med å bygge en nettside uten å bekymre seg for implementeringsdetaljer. Noen av organisasjonene som er involvert i standardisering av disse grensesnittene er som Mozilla, Apple, Microsoft, Google, Adobe osv. Det er imidlertid W3C som formaliserer en standard og publiserer den – se her (https://dom.spec.whatwg.org/).

Avsnittene nedenfor dekker dokumentstruktur, objektene DOM-en eksponerer og hvordan man inspiserer dem. Mozilla beholder den gjeldende API-referansen på MDN-dokumentobjektmodellsider.

Hver Selenium locator løser opp mot dette samme treet, så strukturen nedenfor er det findElement() søk.

Forstå DOM-strukturen

Du må forstå DOM-strukturen hvis du bygger et nettsted som involverer skripting JavaManus. Å forstå DOM er enda viktigere hvis du gjør en eller alle de følgende kompliserte oppgavene på nettstedet ditt –

  1. Utviklingping innhold som oppdaterer seg selv kontinuerlig uten å oppdatere hele siden – som gjeldende pris på alle aksjene i brukerens portefølje
  2. Utviklingping avanserte brukerinteraksjoner, som å legge til eller endre innhold dynamisk – som muligheten til å legge til flere aksjer i porteføljen din
  3. Utviklingping innhold som kan tilpasses av brukeren – som muligheten til å endre oppsettet slik at fondsporteføljen vises før aksjeporteføljen
  4. Utviklingping responsivt innhold på nettstedet ditt, slik at nettstedet ditt automatisk tilpasser seg ulike medieskjermer, f.eks. iPhone, datamaskin, nettbrett osv.

En grunnleggende 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 ut for en nettlesers DOM PARSER?

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

Hvordan får du tilgang til kroppselementet?

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

Hvordan sier du "Hello World"?

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

Til slutt vil hele HTML-filen se ut

Open Windows Notisblokk og lim inn følgende innhold i den. Lagre deretter filen som "MyFileNewFile.html" (sørg for at filnavnet 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 slutt åpner du bare filen ved å bruke en av dine foretrukne nettlesere, og du vil se "Hello World!"

Komponenter av DOM i Selenium

Nedenfor er hovedkomponentene i DOM er Selenium WebDriver:

  • Vindu
  • Document
  • Element

Hver komponent sitter på et annet nivå i treet, og starter fra det ytterste.

Vindu

Window er objektet som inneholder dokumentobjektet i en DOM. Den sitter på toppen av alt.

For å komme til et vindusobjekt fra et gitt dokument

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

I et fanemiljø har hver fane sitt eget vindusobjekt. Men hvis man ønsker å fange opp og implementere hendelser som window.resizeTo og window.resizeBy, gjelder de for hele vinduet og ikke for fanen alene.

Egenskaper til Window Object i DOM

window.localStorage – gir tilgang til nettleserens lokale lagring. Den lokale lagringen kan brukes til å lagre og hente data fra en økt.

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

vindu.åpner - henter referansen til vindusobjektet som åpnet dette vinduet (enten ved å klikke på en lenke eller bruke window.open-metoden)

Nyttige metoder for vindusobjekt

window.alert() – viser en varseldialog med en melding.

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

Det er mange nyttige hendelser som vindusobjektet viser. Vi vil diskutere dem i "Arrangementer"-delen under Advance Topics

RELATERTE ARTIKLER

Document

Dokumentet markerer begynnelsen på et DOM-tre. Dokumentet er den første noden i en DOM. Det har flere metoder og egenskaper, hvis omfang gjelder for hele dokumentet, som URL, getElementById, querySelector osv.

Egenskaper for dokumentobjekt i DOM

Document.documentURI og Dokument.URL – Begge returnerer dokumentets nåværende plassering. Hvis dokumentet derimot ikke er av typen HTML-dokument.URL vil ikke fungere.

Document.activeElement – Denne metoden returnerer elementet i DOM-en som er i fokus. Dette betyr at hvis en bruker erping I en tekstboks vil Document.activeElement returnere referanse til den tekstboksen.

Document.title – Dette brukes til å lese eller angi en tittel på et gitt dokument.

Nyttige metoder for dokumentobjekt

Document.getElementById(String id) – dette er den klart mest relevante og nyttige metoden i DOM-manipulering. Den brukes til å slå opp et element i DOM-treet. ved hjelp av sin unike identifikatorOppslaget skiller mellom store og små bokstaver, dvs. i følgende eksempel er « ”-elementet kan ikke slås opp med 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(strengvelger) – dette er en annen mye brukt metode for å velge ett element til basert på regler for CSS-velger (Hvis du er kjent med jQuerys $-notasjon, bruker den i seg selv denne metoden). Vi skal ikke gå så mye inn på CSS-selektorer. En CSS-selektor er et sett med regler som du kan bruke til å få en liste over lignende elementer (basert på selektorregelen). Vi har brukt denne metoden før i «Hello World»-delen.

Element

Diagrammet nedenfor viser hvordan et Element-objekt sitter inne i DOM-treet, under dokumentnoden.

Elementobjekt vist som en node i DOM-trehierarkiet

Elementobjekt i DOM

Element er ethvert objekt representert av en node i et DOM-tre i et dokument. Som alltid er Element-objektet i seg selv bare en ulempe.tracav egenskaper, metoder og hendelser mellom en nettleser og et HTML-dokument. Det finnes spesielle typer elementer som HTMLElement, SVGElement, XULElement osv. Vi vil kun fokusere på HTMLElement i denne veiledningen.

Egenskaper for elementobjekt i DOM

Element.id – Denne egenskapen kan brukes til å angi eller lese "ID" (en unik identifikator) for et HTML-element. ID må være unik blant elementene i et DOM-tre. Som nevnt før, brukes ID også av Document.getElementById-metoden for å velge et bestemt Element-objekt i et DOM-tre.

HTMLElement.contentEditable – contentEditable-egenskapen til et element bestemmer om innholdet er av det elementet er redigerbart/modifiserbart. Denne egenskapen kan settes som vist i skriptet nedenfor. Denne egenskapen kan også brukes til å bestemme om et gitt element er redigerbart eller ikke. Prøv følgende skript i hvilken som helst HTML-tekst, og du vil legge merke til at du kan redigere innholdet i brødteksten.

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

Element.innerHTML – innerHTML er en annen viktig egenskap som vi bruker for å få tilgang til HTML-innhold i et element. Den brukes også til å angi nytt HTML-innhold for elementet. Det er mye brukt for å sette/endre innholdet i datafelt. Si for eksempel at du vil at nettsiden din skal oppdatere temperaturen i Mumbai City hver time, du kan kjøre skriptet i 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 for elementobjekt

HTMLElement.blur() & HTMLElement.focus() – uskarphet og fokusmetoder brukes til å fjerne fokus fra henholdsvis eller gi fokus til et HTML-element. Disse metodene er mest brukt for å flytte fokuset til en markør mellom tekstbokser på en nettside for dataregistrering.

Element.querySelectorAll – Denne metoden ligner den allerede diskuterte querySelector-metoden for dokumentobjektet. Denne metoden vil imidlertid begrense søket innenfor etterkommerne av selve elementet.

Nøyaktighetsmerknad: Blokken ovenfor er gjengitt som publisert. Bruk av arbeidskode dokument med en liten d og innerHTML egenskap, ikke setInnerHTML().

Feilsøking i DOM

Utviklerverktøy av Google Chrome, Mozilla Firefox, Internet Explorer (10 eller høyere) eller Safari tillater enkel feilsøking rett inne i nettleseren. Noen ganger tolker forskjellige nettlesere samme HTML-oppmerking forskjellig, og det er når feilsøking hjelper deg å inspisere DOM slik det har blitt tolket av den aktuelle nettleserens DOM-motor.

Merknad om nettleser: Internet Explorer ble pensjonert i 2022, så utviklerverktøyene finnes nå i Microsoft EdgeTrinnene nedenfor er uendret; DevTools åpnes med F12.

La oss nå si at du vil endre temperaturverdien fra 26oC til 32oC i ditt siste eksempel. Vi vil ta noen enkle trinn for å gjøre det. Skjermbilder som vises her er fra Mozilla's Firefox– trinnene er imidlertid de samme i alle andre nettlesere.

  1. Åpne MyFileNewFile.html (eller hvilket navn du ga til HTML-filen i veiledningene ovenfor) ved å bruke nettleseren din
  2. Bruk musen og høyreklikk på temperaturverdien 26oC og klikk på "Inspiser element"

    Høyreklikk på temperaturverdien og velg Inspiser element i nettleseren

  3. Legg merke til at elementet der du valgte å "Inspisere element" vises uthevet i nettleseren din (feilsøkingsvinduet vises vanligvis nederst på skjermen)

    Verktøy for nettleserutviklere som fremhever det inspiserte span-elementet i DOM-treet

  4. Åpne elementet ved å klikke på den skråstilte trekanten ved siden av det

    Utvide span-elementet i DOM-inspektøren ved hjelp av trekantbryteren

  5. Velg hva du vil redigere og dobbeltklikk på det. Du vil få en mulighet til å endre teksten. Gjør som anvist i det animerte bildet nedenfor.

    Animert demonstrasjon av redigering av DOM-tekstverdien fra 26 til 32 i inspektøren

  6. Legg merke til endringen i innholdet på HTML-siden din. Du kan lukke feilsøkingsvinduet nå.

    Vær oppmerksom på at endringene dine bare vil fortsette for denne økten. Så snart du laster inn eller oppdaterer (trykk F5) vil siden endres tilbake. Dette indikerer at du ikke endret den faktiske HTML-kilden, men bare den lokale tolkningen av nettleseren din.

    Prøv å gjøre følgende som en morsom øvelse. Åpne www.facebook.com i nettleseren din og bruk feilsøkingsverktøyet for å følge resultatet – legg merke til hvordan det står «Jeg har hacket Facebook».

Resultatet av øvelsen ser ut som skjermbildet nedenfor.

Facebook-siden er redigert live i nettleserinspektøren for å lese at jeg har hacket Facebook

Lesing og redigering av noder dekker statiske sider. Interaktive sider reagerer også på hva brukeren gjør.

DOM-hendelser

Hva er hendelser i DOM?

Hendelser er en programmeringsmodell der brukerutløste (eller nettlesersidens livssyklusutløste) hendelser kringkastes som meldinger. For eksempel, når en side er ferdig lastet, utløser den window.load-hendelsen og på lignende måte når brukeren klikker på en knapp som elementets klikkhendelse utløses.

Disse meldingene kan fanges opp av alle JavaScript kode og deretter en utviklerdefinert handling kan tas. La oss for eksempel si at du ønsker at tallene på nettsiden din bare skal oppdateres når brukeren klikker på en knapp. Du kan oppnå dette ved hjelp av en av følgende metoder –

  1. Tilordne handling til onclick-hendelsen til HTML-elementet
  2. Tilordne handling til klikkhendelsen ved å bruke 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>

Feilsøking i DOM

Merknad om eldre API: To av svarene nedenfor bruker document.write(). Det kjører fortsatt, men et kall etter sideinnlasting sletter dokumentet. Foretrekker console.log() eller innerHTML.

Sp. Hvordan vet jeg om et element eksisterer eller ikke?

A. Prøv å slå opp elementet ved å bruke en av velgerne og sjekk om elementet som returneres er en null. Se eksempel nedenfor -

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

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

A. Sørg for at metodenavnet samsvarer nøyaktig med API-metoden. Som i spørsmålet ovenfor - det er getElementById og ikke getElementByID.

Sp. Hva er forskjellen mellom barn og childNodes?

A. Metoden barn får oss samlingen av alle elementene innenfor det kallende elementet. Samlingen som returneres er av typen HTMLCollection. Imidlertid gir metoden childNodes oss samlingen av alle nodene i det kallende elementet. Legg til følgende skript til vårt eksempel og se forskjellen –

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 barnemetoden returnerer bare 7 elementer

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 lese egenskapen 'innerHTML' til undefined...

A. Sørg for at forekomsten av HTMLElement du kaller egenskapen innerHTML på ble satt etter den første deklarasjonen. Denne feilen oppstår vanligvis i følgende scenario. Se hvordan feilen kan unngås i neste kodeblokk...

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

Spørsmål og svar

Shadow DOM er en nettleserfunksjon som gir en komponent sitt eget isolerte undertre, slik at stiler og skript ikke lekker. Virtual DOM er en bibliotekteknikk, brukt av React og Vue, som differensierer en kopi i minnet for å minimere reelle oppdateringer.

WebDriver sender en locator til nettleseren, som går gjennom det analyserte treet til et treff dukker opp, og deretter returnerer en WebElement-håndtak. Lokalister som id, navn, CSS-selektor og XPath beskriver ganske enkelt forskjellige søkeregler over de samme nodene.

Bruk getElementById når målet har en unik ID; det er det raskeste oppslaget og returnerer én node. Bruk querySelector eller querySelectorAll når treffet avhenger av klasser, attributter eller en foreldre-barn-sti.

Den kjører fortsatt, men nettlesere fraråder det. Å kalle document.write() etter at siden er lastet inn erstatter hele dokumentet, og det blokkerer parsing under lasting. Bruk console.log() for tracing, eller innerHTML for å sette inn innhold.

DOM-modellenes sideinnhold: head, body og alle tagger. Nettleserobjektmodellen dekker den omkringliggende nettleseren, inkludert navigator, skjerm, plassering og historikk. Vindusobjektet er der begge møtes.

Internet Explorer ble pensjonert i 2022, så utviklerverktøyene finnes nå i den Microsoft EdgeArbeidsflyten er uendret: trykk F12 eller høyreklikk på et element, velg Inspiser, og rediger noden i panelet som åpnes.

Maskinlæringsverktøy scorer flere nodeattributter samtidig, slik at når en klasse eller ID endres, matcher de det samme elementet på nytt i stedet for å feile. Selvreparerende testplattformer bygger dette oppå vanlige DOM-spørringer.

copilot utkaster hendelseslyttere, querySelector-kjeder og traverseringsløkker fra en kommentar, og den er pålitelig på vanlige mønstre. Test alltid forslaget mot den virkelige siden, fordi den ikke kan se markupen din.

Oppsummer dette innlegget med: