U čemu je DOM Selenium WebDriver: Struktura, puni oblik

U čemu je DOM Selenium WebDriver?

PRESUDA in Selenium WebDriver je bitna komponenta web razvoja pomoću 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 je taj koji formalizira standard i objavljuje ga – pogledajte ovdje (https://dom.spec.whatwg.org/).

Ovaj vodič ima za cilj pokriti osnovne koncepte strukture HTML dokumenta i kako njime manipulirati JavaSkripta. U ovom vodiču obradit ćemo sljedeće teme:

Razumijevanje DOM strukture
Komponente DOM-a u Selenium
Otklanjanje pogrešaka u DOM-u
DOM događaji
Rješavanje problema u DOM-u

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 –

Razvoj sadržaja koji se kontinuirano ažurira bez osvježavanja cijele stranice – poput trenutne cijene svih dionica u portfelju vašeg korisnika
Razvijanje naprednih korisničkih interakcija kao što je dinamičko dodavanje ili mijenjanje sadržaja – poput mogućnosti dodavanja više dionica u vaš portfelj
Razvoj sadržaja koji korisnik može prilagoditi – poput mogućnosti promjene izgleda tako da se portfelj uzajamnih fondova pojavljuje prije portfelja dionica
Razvoj responzivnog sadržaja na vašoj web stranici čime se vaša web stranica prilagođava različitim medijskim ekranima, tj. iPhone, desktop, tablet itd. automatski

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

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

dokument

Dokument označava početak DOM stabla. Dokument je prvi čvor u DOM-u. Ima nekoliko metoda i svojstava, čiji se opseg odnosi 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 Document.URL neće raditi.

Dokument.activeElement – Ova metoda vraća element u DOM-u koji je u fokusu. To znači da ako korisnik upisuje tekstni okvir, Document.activeElement će vratiti referencu na taj tekstni 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 DOM manipulaciji. Koristi se za traženje elementa u DOM stablu koristeći njegov jedinstveni identifikator. Pretraživanje je osjetljivo na velika i mala slova, tj. u sljedećem primjeru " ” element se ne može tražiti pomoću riječi kao što su IntroDiv ili 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, on sam 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). Već smo koristili ovu metodu u odjeljku "Hello World".

Element

Element je bilo koji objekt predstavljen čvorom u DOM stablu dokumenta. Kao i uvijek, sam objekt Element samo je ugovor svojstava, metoda i događaja između preglednika i HTML dokumenta. Postoje posebne vrste elemenata kao što su HTMLElement, SVGElement, XULElement itd. U ovom vodiču ćemo se 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.

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.

Sada, recimo da želite promijeniti vrijednost temperature s 26^oC do 32^oC 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.

Otvorite MyFileNewFile.html (ili bilo koji naziv koji ste dali svojoj HTML datoteci u gornjim vodičima) pomoću preglednika
Upotrijebite miša i kliknite desnom tipkom miša na vrijednost temperature 26^oC i kliknite na "Provjeri element"
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)
Otvorite element klikom na nagnuti trokut pored njega
Odaberite ono što želite urediti i dvaput kliknite na to. Dobit ćete opciju za promjenu teksta. Učinite prema uputama na animiranoj slici ispod.
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".

Proces otklanjanja pogrešaka u DOM-u

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 i tada se može poduzeti radnja definirana od strane programera. Recimo, na primjer, ž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 –

Dodijelite akciju onclick događaju HTML elementa
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

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

rezime

U ovom vodiču naučili smo što je DOM i kako je to ključni koncept za izradu dinamičkih web stranica.
Također smo se dotakli tipova DOM elemenata kao što su prozor, dokument i element.
Naučili smo neke korisne DOM metode i svojstva dostupna unutar svake vrste.
Vidjeli smo kako većina preglednika nudi alate za razvojne programere za igranje s bilo kojom web stranicom dostupnom na internetu – tako učimo otklanjati pogreške i rješavati probleme s vlastitom web stranicom.
Također smo se kratko dotakli mehanizama DOM događaja.
Na kraju smo pokrili nekoliko stavki za rješavanje problema u DOM-u.
Internet je prepun izvora o DOM-u. Jedan od najboljih i najnovijih referentnih materijala dostupan je u Mozillinoj mreži razvojnih programera. vidi – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model