În ce este DOM Selenium WebDriver: structură, formă completă

prin: Krishna Rungta Krishna Rungta
Hours Actualizat

În ce este DOM Selenium WebDriver?

HOTĂRÂREA in Selenium WebDriver este o componentă esențială a dezvoltării web folosind HTML5 și JavaScenariul. Forma completă a DOM este Document Object Model. DOM nu este un concept informatic. Este un set simplu de interfețe standardizate între dezvoltatorii web pentru a accesa și manipula documente în HTML sau XML folosind JavaScenariul.

Aceste standarde îi ajută pe dezvoltatori să construiască o pagină web fără să-și facă griji cu privire la detaliile implementării. Unele dintre organizațiile implicate în standardizarea acestor interfețe sunt precum Mozilla, Apple, Microsoft, Google, Adobe etc. Cu toate acestea, W3C este cel care oficializează un standard și îl publică – vezi aici (https://dom.spec.whatwg.org/).

Acest tutorial își propune să acopere conceptele de bază ale structurii documentului HTML și cum să le manipuleze folosind JavaScenariul. Vom acoperi următoarele subiecte în acest tutorial:

Înțelegerea structurii DOM

Va trebui să înțelegeți structura DOM dacă construiți orice site web care implică utilizarea de scripturi JavaScenariul. Înțelegerea DOM este și mai critică dacă efectuați una sau toate următoarele sarcini complicate pe site-ul dvs. -

  1. Dezvoltarea de conținut care se actualizează continuu fără a reîmprospăta întreaga pagină - cum ar fi prețul curent al tuturor acțiunilor din portofoliul utilizatorului dvs.
  2. Dezvoltarea interacțiunilor avansate ale utilizatorilor, cum ar fi adăugarea sau modificarea conținutului în mod dinamic - cum ar fi capacitatea de a adăuga mai multe acțiuni în portofoliul dvs.
  3. Dezvoltarea de conținut care poate fi personalizat de către utilizator – cum ar fi capacitatea de a schimba aspectul, astfel încât portofoliul de fonduri mutuale să apară înaintea portofoliului de acțiuni
  4. Dezvoltarea de conținut responsive pe site-ul dvs., făcând astfel site-ul dvs. să se adapteze la diferite ecrane media, de exemplu. iPhone, desktop, tabletă etc. automat

O pagină HTML de bază

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

Cum arată DOM PARSER al unui browser?

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

Cum accesezi elementul corpului?

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

Cum spui „Bună lume”?

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

În cele din urmă, întregul fișier HTML va arăta ca

Operatii Deschise Windows Notepad și inserați următorul conținut în interiorul acestuia. Apoi salvați fișierul ca „MyFileNewFile.html” (asigurați-vă că numele fișierului dvs. se termină cu .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>

În cele din urmă, deschideți fișierul folosind oricare dintre browserele preferate și veți vedea „Hello World!”

Componentele DOM în Selenium

Mai jos sunt principalele componente ale DOM este Selenium WebDriver:

  • Fereastră
  • Document
  • Element

Fereastră

Window este obiectul care conține obiectul document într-un DOM. Se așează deasupra tuturor.

Pentru a ajunge la un obiect fereastră dintr-un document dat

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

Într-un mediu cu file, fiecare filă are propriul obiect fereastră. Cu toate acestea, dacă cineva ar dori să prindă și să implementeze evenimente precum window.resizeTo și window.resizeBy, acestea se aplică întregii ferestre și nu numai filei.

Proprietățile obiectului fereastră în DOM

window.localStorage – oferă acces la stocarea locală a browserului. Stocarea locală poate fi utilizată pentru a stoca și a prelua date dintr-o sesiune.

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

fereastră.deschizător - primește referința la obiectul fereastră care a deschis această fereastră (fie făcând clic pe un link, fie folosind metoda window.open)

Metode utile ale obiectului fereastră

window.alert() – afișează un dialog de alertă cu un mesaj.

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

Există multe evenimente utile pe care obiectul fereastră le expune. Le vom discuta în secțiunea „Evenimente” din Subiecte avansate

Document

Documentul marchează începutul unui arbore DOM. Documentul este primul nod dintr-un DOM. Are mai multe metode și proprietăți, al căror domeniu de aplicare se aplică întregului document, cum ar fi URL, getElementById, querySelector etc.

Proprietăți ale obiectului document în DOM

Document.documentURI si Document.URL – Ambii returnează locația curentă a documentului. Dacă, totuși, documentul nu este de tip HTML Document.URL nu va funcționa.

Document.activeElement – Această metodă returnează elementul din DOM care este focalizat. Aceasta înseamnă că dacă un utilizator tasta într-o casetă de text, Document.activeElement va returna referința la acea casetă de text.

Titlul documentului – Acesta este folosit pentru a citi sau a seta un titlu pentru un anumit document.

Metode utile ale obiectului document

Document.getElementById(ID șir) – aceasta este de departe cea mai relevantă și utilă metodă în manipularea DOM. Este folosit pentru a căuta un element în arborele DOM folosind identificatorul său unic. Căutarea este sensibilă la majuscule și minuscule, adică în exemplul următor „ ” elementul nu poate fi căutat folosind cuvinte precum IntroDiv sau introdiv sau 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(Selector de șiruri) – aceasta este o altă metodă utilizată pe scară largă pentru a selecta încă un element bazat pe regulile selectorului CSS (dacă sunteți familiarizat cu notația $ a jQuery, aceasta folosește această metodă). Nu vom aprofunda prea mult în selectoarele CSS. Selectorul CSS este un set de reguli prin care puteți obține o listă de elemente similare (pe baza regulii selectorului). Am mai folosit această metodă în secțiunea „Hello World”.

Element

Obiect element în DOM

Obiect element în DOM

Element este orice obiect reprezentat de un nod într-un arbore DOM al unui document. Ca întotdeauna, obiectul Element în sine este doar un contract de proprietăți, metode și evenimente între un browser și un document HTML. Există tipuri speciale de Elemente precum HTMLElement, SVGElement, XULElement etc. Ne vom concentra doar pe HTMLElement în acest tutorial.

Proprietăți ale obiectului element în DOM

Element.id – Această proprietate poate fi utilizată pentru a seta sau a citi „ID” (un identificator unic) pentru un element HTML. ID-ul trebuie să fie unic printre elementele dintr-un arbore DOM. După cum am menționat anterior, ID-ul este folosit și de metoda Document.getElementById pentru a selecta un anumit obiect Element dintr-un arbore DOM.

HTMLElement.contentEditable – proprietatea contentEditable a unui element determină dacă conținutul acelui element este editabil/modificabil. Această proprietate poate fi setată așa cum se arată în scriptul de mai jos. Această proprietate poate fi folosită și pentru a determina dacă un anumit element este editabil sau nu. Încercați următorul script în interiorul oricărui corp HTML și veți observa că puteți edita orice conținut al corpului.

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

Element.innerHTML – innerHTML este o altă proprietate importantă pe care o folosim pentru a accesa conținut HTML din interiorul unui element. De asemenea, este folosit pentru a seta un nou conținut HTML al elementului. Este utilizat pe scară largă pentru a seta/modifica conținutul câmpurilor de date. Să spunem, de exemplu, că doriți ca pagina dvs. web să actualizeze temperatura orașului Mumbai în fiecare oră, puteți rula scriptul din exemplul următor la fiecare oră.

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

Metode utile ale obiectului element

HTMLElement.blur() & HTMLElement.focus() – metodele de estompare și de focalizare sunt utilizate pentru a elimina focalizarea sau, respectiv, a focaliza un element HTML. Aceste metode sunt cele mai utilizate pentru a muta focalizarea unui cursor între casetele de text dintr-o pagină web de introducere a datelor.

Element.querySelectorAll – Această metodă este similară cu metoda querySelector deja discutată pentru obiectul document. Această metodă va limita însă căutarea în cadrul descendenților elementului însuși.

Depanare în DOM

Instrumente pentru dezvoltatori ale Google Chrome, Mozilla Firefox, Internet Explorer (10 sau mai sus) sau Safari permit depanarea ușoară chiar în browser. Uneori, diferite browsere interpretează același marcaj HTML în mod diferit și atunci depanarea vă ajută să inspectați DOM-ul așa cum a fost interpretat de motorul DOM al browserului respectiv.

Acum, să presupunem că doriți să schimbați valoarea temperaturii de la 26oC la 32oC în ultimul exemplu. Vom face câțiva pași simpli pentru a face asta. Capturile de ecran afișate aici sunt de la Mozilla Firefox– totuși, pașii sunt aceiași în toate celelalte browsere.

  1. Deschideți MyFileNewFile.html (sau orice nume pe care l-ați dat fișierului HTML în tutorialele de mai sus) folosind browserul dvs.
  2. Folosiți mouse-ul și faceți clic dreapta pe valoarea temperaturii 26oC și faceți clic pe „Inspectați elementul”

    Depanare în DOM

  3. Observați că elementul în care ați ales să „Inspectați elementul” este afișat evidențiat în browser (fereastra de depanare apare de obicei în partea de jos a ecranului)

    Depanare în DOM Engine

  4. Deschideți elementul făcând clic pe triunghiul înclinat de lângă el

    Procesul de depanare în DOM

  5. Selectați ceea ce doriți să editați și faceți dublu clic pe el. Veți primi o opțiune de a schimba textul. Faceți așa cum este indicat în imaginea animată de mai jos.

    Depanare în DOM

  6. Observați modificarea conținutului paginii dvs. HTML. Puteți închide fereastra de depanare acum.

    Rețineți că modificările dvs. vor fi menținute numai pentru această sesiune. De îndată ce reîncărcați sau reîmprospătați (apăsați F5) pagina, modificările vor fi revenite. Aceasta indică că nu ați schimbat sursa HTML reală, ci doar interpretarea locală a browserului dvs.

    Ca un exercițiu distractiv, încercați să faceți următoarele. Deschide www.facebook.com în browser și utilizați instrumentul de depanare pentru a urmări rezultatul - observați cum scrie „Am piratat Facebook”.

Procesul de depanare în DOM

Evenimente DOM

Ce sunt evenimentele în DOM?

Evenimentele sunt un model de programare în care incidentele declanșate de utilizator (sau declanșate de ciclul de viață al paginii de browser) sunt difuzate ca mesaje. De exemplu, când o pagină s-a terminat de încărcat, aceasta declanșează evenimentul window.load și, în mod similar, atunci când utilizatorul face clic pe un buton care evenimentul de clic al elementului este declanșat.

Aceste mesaje pot fi interceptate de orice JavaScenariu cod și apoi poate fi luată o acțiune definită de dezvoltator. Să presupunem, de exemplu, că ați dori ca numerele de pe pagina dvs. web să se actualizeze numai atunci când utilizatorul dă clic pe un buton. Puteți obține acest lucru prin oricare dintre următoarele metode -

  1. Atribuiți o acțiune evenimentului onclick al elementului HTML
  2. Atribuiți o acțiune evenimentului clic folosind metoda 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>

Depanare în DOM

Î. Cum știu dacă un element există sau nu?

A. Încercați să căutați elementul folosind oricare dintre selector și verificați dacă elementul returnat este nul. Vezi exemplul de mai jos -

ARTICOLE SIMILARE

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

Î. Primesc TypeError: document.getElementByID nu este o funcție...

A. Asigurați-vă că numele metodei se potrivește exact cu metoda API. Ca și în întrebarea de mai sus - este getElementById și nu getElementByID.

Î. Care este diferența dintre copii și childNodes?

A. Metoda copiii ne obțin colecția tuturor elementelor din elementul apelant. Colecția returnată este de tip HTMLCollection. Cu toate acestea, metoda childNodes ne aduce colecția tuturor nodurilor din elementul apelant. Adăugați următoarele scripturi la exemplul nostru și vedeți diferența -

Metoda childNodes returnează 14 elemente

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

În timp ce metoda copiilor returnează doar 7 articole

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

Î. Primesc o eroare de tip neprinsă: nu pot citi proprietatea „innerHTML” a undefined...

A. Asigurați-vă că instanța HTMLElement pe care apelați proprietatea innerHTML a fost setată după declararea inițială. Această eroare se întâmplă în general în scenariul următor. Vedeți cum poate fi evitată eroarea în următorul bloc de cod...

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

Rezumat

  • În acest tutorial am învățat ce este un DOM și cum este un concept esențial de înțeles pentru a construi pagini web dinamice.
  • Am atins, de asemenea, tipuri de elemente DOM precum Window, Document și Element.
  • Am învățat câteva metode și proprietăți DOM utile disponibile în fiecare tip.
  • Am văzut cum majoritatea browserelor oferă instrumente pentru dezvoltatori pentru a se juca cu orice pagină web disponibilă pe Internet, învățând astfel să depanăm și să rezolvăm problemele cu propriul nostru site web.
  • De asemenea, am atins pe scurt mecanismele evenimentelor DOM.
  • În cele din urmă, am acoperit câteva elemente de depanare în DOM.
  • Internetul este plin de resurse pe DOM. Unul dintre cele mai bune și actualizate materiale de referință este disponibil în rețeaua de dezvoltatori Mozilla. Vedea - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model