Milles on DOM Selenium Veebidraiver: struktuur, täisvorm

Autor: Krishna Rungta Krishna Rungta
Hours Ajakohastatud

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. Kuid just W3C vormistab standardi ja avaldab selle – vaata siit (https://dom.spec.whatwg.org/).

Selle õpetuse eesmärk on käsitleda HTML-dokumendi struktuuri põhikontseptsioone ja seda, kuidas seda kasutades manipuleerida JavaSkript. Selles õpetuses käsitleme järgmisi teemasid:

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. Sisu arendamine, mis uuendab ennast pidevalt ilma kogu lehte värskendamata – nt kõigi teie kasutaja portfellis olevate aktsiate hetkehinnad
  2. Täiustatud kasutaja interaktsioonide arendamine, nagu sisu dünaamiline lisamine või muutmine – näiteks võimalus lisada oma portfelli rohkem aktsiaid
  3. Kasutajate poolt kohandatava sisu arendamine – näiteks võimalus muuta paigutust nii, et investeerimisfondide portfell kuvatakse enne aktsiaportfelli
  4. Oma veebisaidil reageeriva sisu arendamine, muutes veebisaidi kohanemiseks erinevate meediumiekraanidega, nt. iPhone, lauaarvuti, tahvelarvuti jne automaatselt

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

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”.

Dokument

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

Dokumendiobjekti omadused DOM-is

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

Document.activeElement – See meetod tagastab fookuses oleva DOM-i elemendi. See tähendab, et kui kasutaja sisestab tekstikasti, tagastab Document.activeElement viite sellele tekstiväljale.

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

Dokumendiobjekti kasulikud meetodid

Document.getElementById(Stringi ID) - see on DOM-i manipuleerimisel kõige asjakohasem ja kasulikum meetod. Seda kasutatakse elemendi otsimiseks DOM-puust, kasutades selle ainulaadset identifikaatorit. Otsing on tõstutundlik, st järgmises näites on " ” elementi ei saa otsida selliste sõnadega nagu IntroDiv või introdiv või 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 CSS-i valija reeglite alusel veel ühe elemendi valimiseks (kui olete tuttav jQuery $-tähistusega, kasutab see ise seda meetodit). CSS-i valijatesse me palju ei süvene. CSS-i valija on reeglite kogum, mille abil saate sarnaste elementide loendi (valija reegli alusel). Oleme seda meetodit varem kasutanud jaotises "Tere maailm".

Element

Element Object DOM-is

Element Object DOM-is

Element on mis tahes objekt, mida esindab sõlm dokumendi DOM-puus. Nagu alati, on elemendi objekt ise vaid brauseri ja HTML-dokumendi vaheline atribuutide, meetodite ja sündmuste leping. On olemas eritüüpi 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.

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.

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"

    Silumine DOM-is

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

    Silumine DOM-mootoris

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

    Silumisprotsess DOM-is

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

    Silumine DOM-is

  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".

Silumisprotsess DOM-is

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 koodi ja seejärel saab teha arendaja määratud toimingu. Oletagem näiteks, et soovite, et teie veebilehel olevaid numbreid värskendataks ainult siis, kui kasutaja klõpsab nupul. Saate seda saavutada 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

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 –

SEOTUD ARTIKLID

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

kokkuvõte

  • Selles õpetuses õppisime, mis on DOM ja kuidas on oluline mõista dünaamiliste veebilehtede loomist.
  • Samuti käsitlesime DOM-i elementide tüüpe, nagu aken, dokument ja element.
  • Õppisime mõningaid kasulikke DOM-i meetodeid ja omadusi, mis on saadaval iga liigi puhul.
  • Nägime, kuidas enamik brausereid pakuvad arendajatele tööriistu, et mängida mis tahes Internetis saadaolevate veebilehtedega, õppides seega siluma ja meie veebisaidiga seotud probleeme lahendama.
  • Samuti puudutasime lühidalt DOM-i sündmuste mehhanisme.
  • Lõpuks käsitlesime mõnda DOM-i tõrkeotsingu üksust.
  • Internet on täis DOM-i ressursse. Üks parimaid ja ajakohasemaid viitematerjale on saadaval Mozilla arendajavõrgus. Vaata – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model