Milles on DOM Selenium WebDriver? Struktuur ja täisvorm

Autor: Krishna Rungta Krishna Rungta
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

Dokumendiobjekti mudel paljastab HTML-lehe JavaSkript kui objektide puu, mis laseb skriptidel ja Selenium WebDriver loeb, leiab ja muudab brauseri töötamise ajal lehel mis tahes elementi.

  • 🔘 Täisvorm: DOM tähistab dokumendiobjektimudelit, mis on W3C standardile vastav liides HTML- ja XML-dokumentide jaoks.
  • ☑️ Puu struktuur: Igast sildist saab sõlm, seega moodustavad html, head, body, article ja p vanema-lapse hierarhia.
  • ✅ Kolm objekti: „Aken” mähib vahelehe, „Dokument” tähistab puu juurt ja „Element” tähistab iga üksikut silti.
  • 🧪 Põhimeetodid: getElementById, querySelector ja querySelectorAll otsivad üles sõlmed; innerHTML loeb ja kirjutab nende sisu ümber.
  • 🛠️ Silumine: Brauseri arendustööriistad paljastavad parsitud puu ja seal tehtud muudatused jäävad kehtima ainult kuni lehe uuesti laadimiseni.
  • 📊 Sündmused: Toimingud, näiteks klõpsamine ja laadimine, edastavad teateid, mida onclick atribuudid või addEventListener saavad pealt kuulata.
Loe rohkem

Milles on DOM Selenium WebDriveri struktuur ja täielik vorm

Milles on DOM Selenium Veebidraiver?

DOM in Selenium WebDriver on veebiarenduse oluline komponent kasutades HTML5 ja JavaSkript. DOM-i täisvorm on Dokumendiobjekti mudel. DOM ei ole arvutiteaduse mõiste. See on lihtne veebiarendajate jaoks standardiseeritud liideste komplekt, mis võimaldab juurdepääsu HTML- või XML-vormingus dokumentidele ja nendega manipuleerida. JavaSkript.

Need standardid aitavad arendajatel luua veebilehte, muretsemata rakendamise üksikasjade pärast. Mõned nende liideste standardimisega seotud organisatsioonid on näiteks Mozilla, Apple, Microsoft, Google, Adobe jne. Standardi vormistab ja avaldab aga W3C – vaata siit (https://dom.spec.whatwg.org/).

Allolevad jaotised käsitlevad dokumendi struktuuri, DOM-i poolt nähtavaid objekte ja nende kontrollimist. Mozilla hoiab API praegust viidet alles. MDN-i dokumendiobjekti mudeli lehed.

Iga Selenium lokaator lahendab sama puu, seega on allolev struktuur see, mis leia element() otsinguid.

DOM-i struktuuri mõistmine

Kui loote veebisaiti, mis hõlmab skriptimist, peate mõistma DOM-i struktuuri JavaSkript. DOM-i mõistmine on veelgi kriitilisem, kui teete oma veebisaidil mõnda või kõiki järgmisi keerulisi ülesandeid –

  1. Developing sisu, mis uuendab ennast pidevalt ilma kogu lehte värskendamata – näiteks kõigi teie kasutaja portfellis olevate aktsiate praegune hind
  2. Developing täiustatud kasutajasuhtlus, näiteks sisu dünaamiline lisamine või muutmine – näiteks võimalus lisada oma portfelli rohkem aktsiaid
  3. Developing kasutaja kohandatav sisu – näiteks võimalus muuta paigutust nii, et investeerimisfondide portfell kuvatakse enne aktsiaportfelli
  4. Developing responsiivne sisu teie veebisaidil, mis võimaldab teil kohanduda automaatselt erinevate meediumiekraanidega, näiteks iPhone, lauaarvuti, tahvelarvuti jne.

Tavaline HTML-leht

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

Kuidas see brauseri DOM-PARSEERI jaoks välja näeb?

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

Kuidas pääsete ligi kehaelemendile?

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

Kuidas öelda "Tere maailm"?

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

Lõpuks näeb kogu HTML-fail välja selline

avatud Windows Märkmik ja kleepige selle sisse järgmine sisu. Seejärel salvestage fail nimega "MyFileNewFile.html" (veenduge, et teie faili nimi lõppeks .html-ga).

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

Lõpuks lihtsalt avage fail mis tahes eelistatud brauseriga ja näete "Tere maailm!"

DOM-i komponendid Selenium

Allpool on toodud DOM on peamised komponendid Selenium Veebidraiver:

  • Aken
  • Dokument
  • Element

Iga komponent asub puu erineval tasandil, alustades kõige välimisest.

Aken

Aken on objekt, mis sisaldab dokumendiobjekti DOM-is. See istub kõige peal.

Antud dokumendist aknaobjektile jõudmiseks

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

Vahekaartidega keskkonnas on igal vahekaardil oma aknaobjekt. Kui aga soovitakse tabada ja rakendada selliseid sündmusi nagu window.resizeTo ja window.resizeBy, kehtivad need kogu aknale, mitte ainult vahekaardile.

DOM-i aknaobjekti omadused

window.localStorage – annab juurdepääsu brauseri kohalikule salvestusruumile. Kohalikku salvestusruumi saab kasutada seansi andmete salvestamiseks ja toomiseks.

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

aken.avaja - saab viite selle akna avanud aknaobjektile (kas lingil klõpsates või window.open meetodil)

Aknaobjekti kasulikud meetodid

window.alert() – kuvab hoiatusdialoogi koos sõnumiga.

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

Aknaobjekt paljastab palju kasulikke sündmusi. Arutame neid eelteemade jaotises „Sündmused”.

SEOTUD ARTIKLID

Dokument

Dokument tähistab DOM-puu algust. Dokument on DOM-i esimene sõlm. Sellel on mitu meetodit ja omadust, mille ulatus kehtib kogu dokumendile, näiteks URL, getElementById, querySelector jne.

Dokumendiobjekti omadused DOM-is

Document.documentURI ja DokumentURL – Mõlemad tagastavad dokumendi praeguse asukoha. Kui aga dokument ei ole HTML-dokumenti tüüpi.URL ei tööta.

Document.activeElement – See meetod tagastab DOM-is fookuses oleva elemendi. See tähendab, et kui kasutaja on typing Tekstikastis tagastab Document.activeElement viite sellele tekstikastile.

Dokument.pealkiri – Seda kasutatakse antud dokumendi pealkirja lugemiseks või määramiseks.

Dokumendiobjekti kasulikud meetodid

Document.getElementById(Stringi ID) – see on DOM-i manipuleerimisel kahtlemata kõige asjakohasem ja kasulikum meetod. Seda kasutatakse elemendi otsimiseks DOM-puust. kasutades selle unikaalset identifikaatoritOtsing on tõstutundlik, st järgmises näites on „ ” elementi ei saa otsida selliste sõnadega nagu IntroDiv, introdiv, iNtrodiv jne.

<!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(stringivalija) – see on veel üks laialdaselt kasutatav meetod veel ühe elemendi valimiseks, mis põhineb CSS-i valija reeglid (kui oled tuttav jQuery $-tähistusega, siis see ise kasutab seda meetodit). Me ei süvene CSS-selektoritesse eriti palju. CSS-selektor on reeglite kogum, mille abil saad sarnaste elementide loendi (selektori reegli põhjal). Oleme seda meetodit varem kasutanud jaotises „Tere maailm“.

Element

Allolev diagramm näitab, kuidas Element-objekt paikneb DOM-puus dokumendisõlme all.

Elemendi objekt, mis on kuvatud DOM-puu hierarhias sõlmena

Element Object DOM-is

Element on mis tahes objekt, mida esindab dokumendi DOM-puu sõlm. Nagu ikka, on elemendi objekt ise vaid kontracBrauseri ja HTML-dokumendi vaheline omaduste, meetodite ja sündmuste hulk. On olemas spetsiaalseid elemente nagu HTMLElement, SVGElement, XULElement jne. Selles õpetuses keskendume ainult HTMLElementile.

DOM-i elemendiobjekti omadused

Element.id – Seda atribuuti saab kasutada HTML-elemendi ID (unikaalse identifikaatori) määramiseks või lugemiseks. ID peab olema DOM-puu elementide hulgas kordumatu. Nagu varem mainitud, kasutab ID-d ka meetod Document.getElementById, et valida DOM-puust teatud elemendiobjekt.

HTMLElement.contentEditable – Elemendi omadus sisu Redigeeritav määrab, kas selle elemendi sisu on redigeeritav/muudatav. Seda omadust saab seadistada nii, nagu on näidatud allolevas skriptis. Seda omadust saab kasutada ka selleks, et määrata, kas antud element on redigeeritav või mitte. Proovige järgmist skripti mis tahes HTML-i kehas ja märkate, et saate muuta mis tahes keha sisu.

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

Element.innerHTML – innerHTML on veel üks oluline omadus, mida kasutame elemendi sees olevale HTML-sisule juurde pääsemiseks. Seda kasutatakse ka elemendi uue HTML-sisu määramiseks. Seda kasutatakse laialdaselt andmeväljade sisu määramiseks/muutmiseks. Oletame näiteks, et soovite, et teie veebileht värskendaks Mumbai City temperatuuri iga tund, võite järgmises näites skripti käitada iga tund.

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

Elementobjekti kasulikud meetodid

HTMLElement.blur() & HTMLElement.focus() – HTML-elemendilt fookuse eemaldamiseks või sellele fookuse andmiseks kasutatakse hägustamise ja teravustamise meetodeid. Neid meetodeid kasutatakse kõige laialdasemalt kursori fookuse liigutamiseks andmesisestuse veebilehel tekstikastide vahel.

Element.querySelectorAll – See meetod sarnaneb dokumendiobjekti jaoks juba käsitletud meetodiga querySelector. See meetod piirab aga selle otsingut elemendi enda järeltulijate hulgas.

Täpsusmärkus: Ülaltoodud plokk on reprodutseeritud avaldatud kujul. Töötav kood kasutab dokument väikese d-tähega ja sisemine HTML omadus, mitte setInnerHTML().

Silumine DOM-is

Arendaja tööriistad Google Chrome, Mozilla Firefox, Internet Explorer (10 või uuem) või Safari võimaldavad hõlpsat silumist otse brauseris. Mõnikord tõlgendavad erinevad brauserid sama HTML-i märgistust erinevalt ja just siis, kui silumine aitab teil DOM-i kontrollida, nagu on tõlgendanud selle konkreetse brauseri DOM-mootor.

Brauseri märkus: Internet Explorer pensionile saadeti 2022. aastal, seega on selle DevTools nüüd saadaval Microsoft EdgeAllolevad sammud jäävad samaks; DevTools avatakse F12-klahviga.

Oletame nüüd, et soovite muuta temperatuuri väärtust 26-ltoC 32oC teie viimases näites. Selleks teeme mõned lihtsad sammud. Siin näidatud ekraanipildid on pärit Mozillast Firefox– sammud on aga kõigis teistes brauserites samad.

  1. Avage oma brauseriga fail MyFileNewFile.html (või mis tahes nimi, mille te ülalolevates õpetustes oma HTML-failile andsite)
  2. Kasutage hiirt ja paremklõpsake temperatuuri väärtusel 26oC ja klõpsake nuppu "Kontrolli elementi"

    Paremklõpsake temperatuuri väärtusel ja valige brauseris „Kontrolli elementi”.

  3. Pange tähele, et element, mille valisite "Elementi kontrollimine", kuvatakse teie brauseris esile tõstetud (siluja aken kuvatakse tavaliselt ekraani allservas)

    Brauseri arendustööriistad, mis tõstavad esile kontrollitud span-elementi DOM-puus

  4. Avage element, klõpsates selle kõrval olevat kallutatud kolmnurka

    DOM-inspektoris span-elemendi laiendamine kolmnurkse lüliti abil

  5. Valige, mida soovite muuta, ja topeltklõpsake sellel. Saate võimaluse teksti muuta. Tehke nii, nagu on näidatud alloleval animeeritud pildil.

    Animeeritud demonstratsioon DOM-teksti väärtuse muutmisest inspektoris väärtuselt 26 väärtusele 32

  6. Pange tähele oma HTML-lehe sisu muutust. Võite nüüd silumisakna sulgeda.

    Pange tähele, et teie muudatused kehtivad ainult selle seansi jooksul. Niipea, kui laadite lehe uuesti või värskendate (vajutage F5), ennistatakse muudatused tagasi. See näitab, et te ei muutnud tegelikku HTML-i allikat, vaid lihtsalt oma brauseri kohalikku tõlgendust.

    Lõbusa harjutusena proovige teha järgmist. Avatud www.facebook.com oma brauseris ja kasutage tulemuse jälgimiseks silumistööriista – pange tähele, kuidas see ütleb: "Olen Facebooki häkkinud".

Selle harjutuse tulemus näeb välja nagu alloleval ekraanipildil.

Facebooki lehte muudeti brauseriinspektoris reaalajas, et lugeda, kas olen Facebooki häkkinud

Sõlmede lugemine ja redigeerimine hõlmab staatilisi lehti. Interaktiivsed lehed reageerivad samuti kasutaja tegevusele.

DOM-i sündmused

Mis on sündmused DOM-is?

Sündmused on programmeerimismudel, kus kasutaja käivitatud (või brauseri lehe elutsükli käivitatud) juhtumid edastatakse sõnumitena. Näiteks kui leht on laadimise lõpetanud, käivitab see sündmuse window.load ja samamoodi, kui kasutaja klõpsab nuppu, mis elemendi klikisündmus käivitatakse.

Neid sõnumeid saavad pealt kuulata kõik JavaScript kood ja seejärel a arendaja määratletud toiming saab võtta. Näiteks kui soovite, et teie veebilehel olevad numbrid uueneksid ainult siis, kui kasutaja nupule klõpsab, saate seda teha mis tahes järgmiste meetoditega –

  1. Määrake toiming HTML-elemendi onclick sündmusele
  2. Määrake klikisündmusele toiming, kasutades meetodit addEventListener

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

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

Tõrkeotsing DOM-is

Pärand-API märkus: Kaks allolevat vastust kasutavad document.write(). See töötab küll ikka, aga pärast lehe laadimist tehtud kutse kustutab dokumendi. Eelista console.log() või innerHTML-i.

K. Kuidas ma tean, kas element on olemas või mitte?

A. Proovige elementi mis tahes valija abil üles otsida ja kontrollige, kas tagastatud element on null. Vaata näidet allpool –

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

K. Saan TypeError: document.getElementByID ei ole funktsioon…

A. Veenduge, et meetodi nimi vastaks täpselt API meetodile. Nagu ülaltoodud küsimuses – see on getElementById, mitte getElementByID.

K. Mis vahe on lastel ja lapsesõlmedel?

A. Meetod, mille abil lapsed saavad meile kutsuva elemendi kõigi elementide kogu. Tagastatud kogu on tüüpi HTMLCollection. Meetod childNodes annab meile aga kõigi kutsuva elemendi sõlmede kogu. Lisage meie näitele järgmised skriptid ja vaadake erinevust –

Meetod childNodes tagastab 14 üksust

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

Kuigi lastemeetod tagastab vaid 7 üksust

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

K. Saan uncaught TypeError: ei saa lugeda atribuuti 'innerHTML' of undefined…

A. Veenduge, et HTMLElementi eksemplar, mille atribuudile innerHTML kutsute, määrati pärast algdeklaratsiooni. See viga ilmneb tavaliselt järgmise stsenaariumi korral. Vaadake, kuidas viga saab vältida järgmises koodiplokis ...

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

KKK

Varju-DOM on brauseri funktsioon, mis annab komponendile oma isoleeritud alampuu, nii et stiilid ja skriptid ei leki. Virtuaalne DOM on teegitehnika, mida kasutavad React ja Vue, mis eristab mälus olevat koopiat, et minimeerida tegelikke värskendusi.

WebDriver saadab brauserile lokaatori, mis seejärel läbib parsitud puud, kuni leiab vaste, ja tagastab seejärel WebElement käepideme. Lokaatorid näiteks id, nimi, CSS-i valija ja XPath kirjeldavad lihtsalt erinevaid otsingureegleid samade sõlmede üle.

Kasuta funktsiooni getElementById, kui sihtmärgil on unikaalne ID; see on kiireim otsing ja tagastab ühe sõlme. Kasuta funktsiooni querySelector või querySelectorAll, kui vaste sõltub klassidest, atribuutidest või vanema-lapse teest.

See käivitub ikka veel, aga brauserid ei soovita seda. Funktsiooni document.write() kutsumine pärast lehe laadimist asendab kogu dokumendi ja blokeerib laadimise ajal parsimise. Kasutage selleks console.log() funktsiooni. tracing või innerHTML sisu sisestamiseks.

DOM modelleerib lehe sisu: päise, sisu ja kõik sildid. Brauseri objektimudel (Browser Object Model) hõlmab ümbritsevat brauserit, sealhulgas navigaatorit, ekraani, asukohta ja ajalugu. Aknaobjekt on koht, kus need kaks kohtuvad.

Internet Explorer pensionile 2022. aastal, seega asuvad selle arendustööriistad nüüd sees Microsoft EdgeTöövoog jääb samaks: vajutage F12 või paremklõpsake elemendil, valige Kontrolli ja muutke avanenud paneelil sõlme.

Masinõppe tööriistad hindavad korraga mitut sõlme atribuuti, seega kui klass või ID muutub, otsivad nad uuesti vastet samale elemendile, selle asemel et ebaõnnestuda. Isetervendavad testimisplatvormid ehitavad selle tavaliste DOM-päringute peale.

Copilot koostab kommentaarist sündmuste kuulajaid, päringuvaliku ahelaid ja läbimissilmuseid ning on usaldusväärne levinud mustrite puhul. Testi soovitust alati tegeliku lehe suhtes, sest see ei näe sinu märgistust.

Võta see postitus kokku järgmiselt: