U čemu je DOM Selenium Struktura i puni oblik WebDrivera

By: Krishna Rungta Krishna Rungta
Hours Ažurirano

⚡ Pametni sažetak

Objektni model dokumenta (Document Object Model) izlaže HTML stranicu JavaSkripta kao stablo objekata, dopuštanje skriptama i Selenium WebDriver čita, locira i mijenja bilo koji element na stranici dok je preglednik pokrenut.

  • 🔘 Cijela forma: DOM je kratica za Document Object Model, W3C standardizirano sučelje za HTML i XML dokumente.
  • ☑️ Struktura stabla: Svaka oznaka postaje čvor, pa html, head, body, article i p tvore hijerarhiju roditelj-dijete.
  • ✅ Tri objekta: Prozor omotava karticu, Dokument označava korijen stabla, a Element predstavlja svaku pojedinačnu oznaku.
  • 🧪 Osnovne metode: getElementById, querySelector i querySelectorAll dohvaćaju čvorove; innerHTML čita i prepisuje njihov sadržaj.
  • 🛠️ Otklanjanje pogrešaka: Alati za razvojne programere preglednika otkrivaju parsirano stablo, a izmjene napravljene tamo traju samo dok se stranica ponovno ne učita.
  • 📊 Događaji: Radnje poput klika i učitavanja broadcast poruka koje onclick atributi ili addEventListener mogu presresti.
Pročitaj više

U čemu je DOM Selenium Struktura i puni oblik WebDrivera

U čemu je DOM Selenium WebDriver?

PRESUDA in Selenium WebDriver je bitna komponenta web razvoja korištenjem HTML5 i JavaSkripta. Puni oblik DOM-a je Document Object Model. DOM nije koncept informatike. To je jednostavan skup sučelja standardiziranih među web programerima za pristup i manipuliranje dokumentima u HTML ili XML JavaSkripta.

Ovi standardi pomažu programerima da izgrade web stranicu bez brige o detaljima implementacije. Neke od organizacija uključenih u standardizaciju ovih sučelja su poput Mozille, Applea, Microsoft, Google, Adobe itd. Međutim, W3C formalizira standard i objavljuje ga – pogledajte ovdje (https://dom.spec.whatwg.org/).

Odjeljci u nastavku pokrivaju strukturu dokumenta, objekte koje DOM izlaže i kako ih pregledati. Mozilla zadržava trenutnu API referencu na Stranice MDN modela objekta dokumenta.

Svaki Selenium lokator se rješava prema istom stablu, pa je struktura ispod ono što pronađiElement() pretraga.

Razumijevanje DOM strukture

Morat ćete razumjeti strukturu DOM-a ako gradite bilo koju web stranicu koja uključuje korištenje skripti JavaSkripta. Razumijevanje DOM-a još je kritičnije ako radite bilo koji ili sve od sljedećih kompliciranih zadataka na svojoj web stranici –

  1. Razvojping sadržaj koji se kontinuirano ažurira bez osvježavanja cijele stranice – poput trenutne cijene svih dionica u portfelju vašeg korisnika
  2. Razvojping napredne korisničke interakcije poput dinamičkog dodavanja ili mijenjanja sadržaja – poput mogućnosti dodavanja više dionica u vaš portfelj
  3. Razvojping sadržaj koji korisnik može prilagoditi – poput mogućnosti promjene izgleda tako da se portfelj investicijskih fondova prikazuje prije portfelja dionica
  4. Razvojping responzivni sadržaj na vašoj web stranici, čime se vaša web stranica automatski prilagođava različitim medijskim ekranima, npr. iPhoneu, računalu, tabletu itd.

Osnovna HTML stranica

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

Kako to izgleda DOM PARSER-u preglednika?

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

Kako pristupate elementu tijela?

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

Kako se kaže "Zdravo svijete"?

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

Konačno će cijela HTML datoteka izgledati ovako

Otvoren Windows Notepad i u njega zalijepite sljedeći sadržaj. Zatim spremite datoteku kao “MyFileNewFile.html” (provjerite da naziv datoteke završava s .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>

Na kraju samo otvorite datoteku pomoću bilo kojeg preglednika po želji i vidjet ćete "Hello World!"

Komponente DOM-a u Selenium

Ispod su glavne komponente DOM-a Selenium Web Driver:

  • Prozor
  • dokument
  • Element

Svaka komponenta se nalazi na drugoj razini stabla, počevši od najudaljenije.

Prozor

Prozor je objekt koji sadrži objekt dokumenta u DOM-u. Sjedi povrh svega.

Da biste došli do objekta prozora iz danog dokumenta

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

U okruženju s karticama svaka kartica ima vlastiti objekt prozora. Međutim, ako netko želi uhvatiti i implementirati događaje kao što su window.resizeTo i window.resizeBy, oni se odnose na cijeli prozor, a ne samo na karticu.

Svojstva objekta prozora u DOM-u

prozor.localStorage – daje pristup lokalnoj pohrani preglednika. Lokalna pohrana može se koristiti za pohranjivanje i dohvaćanje podataka iz sesije.

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

prozor.otvarač - dobiva referencu na objekt prozora koji je otvorio ovaj prozor (bilo klikom na vezu ili korištenjem metode window.open)

Korisne metode objekta prozora

window.alert() – prikazuje dijaloški okvir upozorenja s porukom.

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

Postoji mnogo korisnih događaja koje objekt prozora izlaže. O njima ćemo raspravljati u odjeljku "Događaji" pod naprednim temama

POVEZANI ČLANCI

dokument

Dokument označava početak DOM stabla. Dokument je prvi čvor u DOM-u. Ima nekoliko metoda i svojstava čiji se opseg primjenjuje na cijeli dokument, kao što su URL, getElementById, querySelector itd.

Svojstva objekta dokumenta u DOM-u

Dokument.documentURI i Dokument.URL – Oba vraćaju trenutnu lokaciju dokumenta. Međutim, ako dokument nije tipa HTML dokument.URL neće raditi.

Dokument.activeElement – Ova metoda vraća element u DOM-u koji je u fokusu. To znači da ako je korisnik typing U tekstualnom okviru, Document.activeElement će vratiti referencu na taj tekstualni okvir.

Dokument.naslov – Ovo se koristi za čitanje ili postavljanje naslova određenog dokumenta.

Korisne metode objekta dokumenta

Document.getElementById(ID niza) – ovo je daleko najrelevantnija i najkorisnija metoda u manipulaciji DOM-om. Koristi se za pretraživanje elementa u DOM stablu koristeći svoj jedinstveni identifikator. Pretraživanje razlikuje velika i mala slova, tj. u sljedećem primjeru " "element" se ne može pretraživati ​​pomoću riječi poput IntroDiv, introdiv ili iNtrodiv itd.

<!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(Selektor niza) – ovo je još jedna široko korištena metoda za odabir još jednog elementa na temelju pravila CSS selektora (ako ste upoznati s jQueryjevom $ notacijom, ona sama koristi ovu metodu). Nećemo puno ulaziti u CSS selektore. CSS selektor je skup pravila pomoću kojih možete dobiti popis sličnih elemenata (na temelju pravila selektora). Ovu metodu smo već koristili u odjeljku „Pozdrav svijete“.

Element

Donji dijagram prikazuje kako se objekt Element nalazi unutar DOM stabla, ispod čvora dokumenta.

Objekt elementa prikazan kao čvor unutar hijerarhije DOM stabla

Element Objekt u DOM-u

Element je bilo koji objekt predstavljen čvorom u DOM stablu dokumenta. Kao i uvijek, sam objekt Element je samo kontracsvojstava, metoda i događaja između preglednika i HTML dokumenta. Postoje posebne vrste elemenata poput HTMLElement, SVGElement, XULElement itd. U ovom ćemo se vodiču usredotočiti samo na HTMLElement.

Svojstva objekta elementa u DOM-u

Element.id – Ovo se svojstvo može koristiti za postavljanje ili čitanje "ID" (jedinstveni identifikator) za HTML element. ID mora biti jedinstven među elementima u DOM stablu. Kao što je prije spomenuto, ID također koristi metoda Document.getElementById za odabir određenog objekta Element unutar DOM stabla.

HTMLElement.contentEditable – svojstvo contentEditable elementa određuje je li sadržaj tog elementa moguće uređivati/modificirati. Ovo svojstvo se može postaviti kao što je prikazano u skripti ispod. Ovo se svojstvo također može koristiti za određivanje može li se određeni element uređivati ​​ili ne. Isprobajte sljedeću skriptu unutar bilo kojeg HTML tijela i primijetit ćete da možete uređivati ​​bilo koji sadržaj tijela.

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

Element.innerHTML – innerHTML je još jedno važno svojstvo koje koristimo za pristup HTML sadržaju unutar elementa. Također se koristi za postavljanje novog HTML sadržaja elementa. Široko se koristi za postavljanje/promjenu sadržaja podatkovnih polja. Recimo, na primjer, da želite da vaša web stranica ažurira temperaturu grada Mumbaija svakih sat vremena, možete pokrenuti skriptu u sljedećem primjeru svakih sat vremena.

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

Korisne metode objekta elementa

HTMLElement.blur() & HTMLElement.focus() – metode zamućivanja i fokusiranja koriste se za uklanjanje fokusa ili davanje fokusa HTML elementu. Ove se metode najčešće koriste za premještanje fokusa kursora između tekstnih okvira na web stranici za unos podataka.

Element.querySelectorAll – Ova je metoda slična već spomenutoj metodi querySelector za objekt dokumenta. Međutim, ova će metoda ograničiti pretraživanje unutar potomaka samog elementa.

Napomena o točnosti: Gornji blok je reproduciran kako je objavljen. Radni kod koristi dokument s malim slovom d i unutarnji HTML svojstvo, a ne setInnerHTML().

Otklanjanje pogrešaka u DOM-u

Alati za razvojne programere Google Chrome, Mozilla Firefox, Internet Explorer (10 ili noviji) ili Safari omogućuju jednostavno otklanjanje pogrešaka izravno unutar preglednika. Ponekad različiti preglednici različito tumače istu HTML oznaku i tada vam otklanjanje pogrešaka pomaže pregledati DOM onako kako ga je protumačio DOM mehanizam tog određenog preglednika.

Napomena preglednika: Internet Explorer je umirovljen 2022. godine, tako da su njegovi DevTools sada dostupni Microsoft EdgeDonji koraci ostaju nepromijenjeni; DevTools se otvara tipkom F12.

Sada, recimo da želite promijeniti vrijednost temperature s 26oC do 32oC u tvom zadnjem primjeru. Za to ćemo poduzeti nekoliko jednostavnih koraka. Ovdje prikazane snimke zaslona su iz Mozille Firefox– međutim, koraci su isti u svim ostalim preglednicima.

  1. Otvorite MyFileNewFile.html (ili bilo koji naziv koji ste dali svojoj HTML datoteci u gornjim vodičima) pomoću preglednika
  2. Upotrijebite miša i kliknite desnom tipkom miša na vrijednost temperature 26oC i kliknite na "Provjeri element"

    Desnim klikom miša na vrijednost temperature i odabirom opcije Pregledaj element u pregledniku

  3. Primijetite da je element za koji ste odabrali "Provjeriti element" prikazan označen u vašem pregledniku (prozor programa za ispravljanje pogrešaka obično se pojavljuje na dnu zaslona)

    Alati za razvojne programere preglednika koji ističu provjereni span element u DOM stablu

  4. Otvorite element klikom na nagnuti trokut pored njega

    Proširivanje elementa raspona u DOM inspektoru pomoću trokutastog prekidača

  5. Odaberite ono što želite urediti i dvaput kliknite na to. Dobit ćete opciju za promjenu teksta. Učinite prema uputama na animiranoj slici ispod.

    Animirana demonstracija uređivanja DOM tekstualne vrijednosti od 26 do 32 u inspektoru

  6. Primijetite promjenu sadržaja svoje HTML stranice. Sada možete zatvoriti prozor za otklanjanje pogrešaka.

    Imajte na umu da će vaše promjene biti zadržane samo tijekom ove sesije. Čim ponovno učitate ili osvježite (pritisnite F5) stranicu, promjene će biti vraćene. Ovo znači da niste promijenili stvarni HTML izvor već samo lokalnu interpretaciju vašeg preglednika.

    Kao zabavnu vježbu pokušajte učiniti sljedeće. Otvoriti www.facebook.com u svom pregledniku i upotrijebite alat za ispravljanje pogrešaka da biste pratili rezultat – primijetite kako piše "Hakirao sam Facebook".

Rezultat te vježbe izgleda kao na snimci zaslona ispod.

Facebook stranica uređena uživo u pregledniku preglednika kako bi pisalo Hakirao sam Facebook

Čvorovi za čitanje i uređivanje pokrivaju statičke stranice. Interaktivne stranice također reagiraju na ono što korisnik radi.

DOM događaji

Što su događaji u DOM-u?

Događaji su model programiranja u kojem se incidenti koje pokreće korisnik (ili životni ciklus stranice preglednika) emitiraju kao poruke. Na primjer, kada se stranica završi s učitavanjem, aktivira se događaj window.load i slično kada korisnik klikne gumb koji aktivira se događaj klika elementa.

Ove poruke može presresti bilo koji JavaScript kod, a zatim a radnja definirana programerom može se uzeti. Recimo na primjer da želite da se brojevi na vašoj web stranici ažuriraju samo kada korisnik klikne gumb. To možete postići bilo kojom od sljedećih metoda –

  1. Dodijelite akciju onclick događaju HTML elementa
  2. Dodijelite radnju događaju klika pomoću metode addEventListener

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

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

Rješavanje problema u DOM-u

Napomena o naslijeđenom API-ju: Dva odgovora u nastavku koriste document.write(). I dalje se izvršava, ali poziv nakon učitavanja stranice briše dokument. Poželjno je koristiti console.log() ili innerHTML.

P. Kako mogu znati postoji li element ili ne?

A. Pokušajte potražiti element pomoću bilo kojeg selektora i provjerite je li vraćeni element null. Pogledajte primjer u nastavku –

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

P. Dobivam TypeError: document.getElementByID nije funkcija…

A. Provjerite odgovara li naziv metode točno API metodi. Kao u gornjem pitanju – to je getElementById, a ne getElementByID.

P. Koja je razlika između djece i dječjih čvorova?

A. Metoda djeca nam daje skup svih elemenata unutar pozivajućeg elementa. Vraćena zbirka je tipa HTMLCollection. Međutim, metoda childNodes dobiva nam kolekciju svih čvorova unutar pozivajućeg elementa. Dodajte sljedeće skripte našem primjeru i vidite razliku –

Metoda childNodes vraća 14 stavki

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

Dok dječja metoda vraća samo 7 stavki

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

P. Dobivam Uncaught TypeError: Cannot read property 'innerHTML' of undefined…

A. Provjerite je li instanca HTMLElementa na kojoj pozivate svojstvo innerHTML postavljena nakon početne deklaracije. Ova se pogreška općenito događa u sljedećem scenariju. Pogledajte kako se greška može izbjeći u sljedećem bloku koda...

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

Pitanja i odgovori

Shadow DOM je značajka preglednika koja komponenti daje vlastito izolirano podstablo, tako da stilovi i skripte ne procure. Virtualni DOM je tehnika biblioteke koju koriste React i Vue, a koja razlikuje kopiju u memoriji kako bi se smanjila stvarna ažuriranja.

WebDriver šalje lokator pregledniku, koji prolazi kroz parsirano stablo dok se ne pojavi podudaranje, a zatim vraća WebElement handle. Lokatori kao što su id, name, CSS selector i XPath jednostavno opisuju različita pravila pretraživanja nad istim čvorovima.

Koristite getElementById kada cilj ima jedinstveni ID; to je najbrža pretraga i vraća jedan čvor. Koristite querySelector ili querySelectorAll kada podudaranje ovisi o klasama, atributima ili putanji roditelj-dijete.

I dalje se izvršava, ali preglednici to ne preporučujemo. Pozivanje document.write() nakon što se stranica učita zamjenjuje cijeli dokument i blokira parsiranje tijekom učitavanja. Koristite console.log() za tracing ili innerHTML za umetanje sadržaja.

Sadržaj stranice DOM modela: zaglavlje, tijelo i svaka oznaka. Model objekta preglednika (Browser Object Model) pokriva okolni preglednik, uključujući navigator, zaslon, lokaciju i povijest. Objekt window je mjesto gdje se oboje susreću.

Internet Explorer je umirovljen 2022. godine, tako da se njegovi alati za razvojne programere sada nalaze unutra Microsoft EdgeTijek rada je nepromijenjen: pritisnite F12 ili kliknite desnom tipkom miša na element, odaberite Pregledaj i uredite čvor u ploči koja se otvori.

Alati za strojno učenje ocjenjuju nekoliko atributa čvora odjednom, pa kada se klasa ili ID promijene, ponovno se podudaraju s istim elementom umjesto da prođu neuspjeh. Platforme za samoobnavljanje testiranja grade ovo na običnim DOM upitima.

Ko-pilot iz komentara izrađuje slušače događaja, lance querySelector-a i petlje prolaska kroz stranice te je pouzdan na uobičajenim obrascima. Uvijek testirajte prijedlog na stvarnoj stranici jer ne može vidjeti vaše oznake.

Sažmite ovu objavu uz: