Mitä DOM sisältää Selenium WebDriver: rakenne, täysi lomake

Mitä DOM sisältää Selenium WebDriver?

DOM in Selenium WebDriver on olennainen osa verkkokehitystä HTML5:tä ja JavaKäsikirjoitus. DOM:n täysi muoto on Document Object Model. DOM ei ole tietojenkäsittelytieteen käsite. Se on yksinkertainen joukko web-kehittäjien standardoituja käyttöliittymiä, joilla pääset käsiksi ja käsittelemään asiakirjoja HTML- tai XML-muodossa käyttämällä JavaSkripti.

Nämä standardit auttavat kehittäjiä rakentamaan verkkosivun huolehtimatta toteutuksen yksityiskohdista. Jotkut näiden rajapintojen standardointiin osallistuvista organisaatioista ovat kuten Mozilla, Apple, Microsoft, Google, Adobe jne. Kuitenkin W3C virallistaa standardin ja julkaisee sen – katso täältä (https://dom.spec.whatwg.org/).

Tämän opetusohjelman tarkoituksena on kattaa peruskäsitteet HTML-dokumentin rakenteesta ja sen käsittelemisestä JavaKäsikirjoitus. Käsittelemme tässä opetusohjelmassa seuraavia aiheita:

DOM-rakenteen ymmärtäminen
DOM:n komponentit sisään Selenium
Virheenkorjaus DOM:ssa
DOM-tapahtumat
Vianetsintä DOM:ssa

DOM-rakenteen ymmärtäminen

Sinun on ymmärrettävä DOM-rakenne, jos rakennat verkkosivustoa, joka sisältää komentosarjan käytön JavaKäsikirjoitus. DOM:n ymmärtäminen on vielä tärkeämpää, jos teet jotakin seuraavista monimutkaisista tehtävistä verkkosivustollasi –

Kehittämällä sisältöä, joka päivittyy jatkuvasti päivittämättä koko sivua – kuten käyttäjäsalkkusi kaikkien osakkeiden nykyinen hinta
Kehittää edistyneitä käyttäjävuorovaikutuksia, kuten sisällön lisääminen tai muokkaaminen dynaamisesti – kuten mahdollisuus lisätä osakkeita portfolioosi
Käyttäjän muokattavissa olevan sisällön kehittäminen – kuten mahdollisuus muuttaa asettelua niin, että sijoitusrahastosalkku näkyy ennen osakesalkkua
Responsiivisen sisällön kehittäminen verkkosivustollesi, mikä saa verkkosivustosi mukautumaan erilaisiin medianäyttöihin, esim. iPhone, pöytäkone, tabletti jne. automaattisesti

Perus HTML-sivu

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

Miltä se näyttää selaimen DOM PARSER -sovelluksessa?

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

Kuinka pääset käsiksi kehon elementtiin?

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

Kuinka sanot "Hei maailma"?

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

Lopulta koko HTML-tiedosto näyttää tältä

avoin Windows Muistio ja liitä seuraava sisältö sen sisään. Tallenna sitten tiedosto nimellä "MyFileNewFile.html" (varmista, että tiedostonimesi loppuu .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>

Avaa lopuksi tiedosto millä tahansa haluamallasi selaimella ja näet "Hello World!"

DOM:n komponentit sisään Selenium

Alla on DOM:n pääkomponentit Selenium WebDriver:

Ikkuna
Asiakirja
Elementti

Ikkuna

Ikkuna on objekti, joka sisältää asiakirjaobjektin DOM:ssa. Se istuu kaiken päällä.

Ikkunaobjektiin pääseminen tietystä dokumentista

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

Välilehtiympäristössä jokaisella välilehdellä on oma ikkunaobjektinsa. Jos kuitenkin halutaan ottaa kiinni ja toteuttaa tapahtumia, kuten window.resizeTo ja window.resizeBy, ne koskevat koko ikkunaa eivätkä vain välilehteä.

DOM:n ikkunaobjektin ominaisuudet

window.localStorage – antaa pääsyn selaimen paikalliseen tallennustilaan. Paikallista tallennustilaa voidaan käyttää istunnon tietojen tallentamiseen ja hakemiseen.

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

ikkuna.avaaja - saa viitteen ikkunaobjektiin, joka avasi tämän ikkunan (joko napsauttamalla linkkiä tai käyttämällä window.open-menetelmää)

Ikkunaobjektin hyödyllisiä menetelmiä

window.alert() – näyttää varoitusikkunan, jossa on viesti.

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

On monia hyödyllisiä tapahtumia, jotka ikkunaobjekti paljastaa. Keskustelemme niistä Ennakkoaiheiden alla "Tapahtumat" -osiossa

Asiakirja

Asiakirja merkitsee DOM-puun alkua. Asiakirja on DOM:n ensimmäinen solmu. Sillä on useita menetelmiä ja ominaisuuksia, joiden laajuus koskee koko asiakirjaa, kuten URL, getElementById, querySelector jne.

Dokumenttiobjektin ominaisuudet DOM:ssa

Document.documentURI ja Asiakirja.URL-osoite – Molemmat palauttavat asiakirjan nykyisen sijainnin. Jos asiakirja ei kuitenkaan ole HTML-tyyppiä, Document.URL ei toimi.

Document.activeElement – Tämä menetelmä palauttaa DOM:n elementin, joka on kohdistettu. Tämä tarkoittaa, että jos käyttäjä kirjoittaa tekstiruutuun, Document.activeElement palauttaa viitteen kyseiseen tekstilaatikkoon.

Document.title – Tätä käytetään tietyn asiakirjan lukemiseen tai nimen asettamiseen.

Hyödylliset menetelmät dokumenttiobjektille

Document.getElementById(merkkijonotunnus) - Tämä on ylivoimaisesti olennaisin ja hyödyllisin menetelmä DOM-manipulaatiossa. Sitä käytetään DOM-puun elementin etsimiseen sen yksilöllisen tunnisteen avulla. Haku on kirjainkoon erottelukykyinen eli seuraavassa esimerkissä " ” -elementtiä ei voi etsiä käyttämällä sanoja, kuten IntroDiv tai introdiv tai 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(merkkijonon valitsin) – tämä on toinen laajalti käytetty tapa valita vielä yksi elementti CSS-valitsimen sääntöjen perusteella (jos tunnet jQueryn $-merkinnän, se itse käyttää tätä menetelmää). Emme syvenny CSS-valitsimiin paljon. CSS-valitsin on joukko sääntöjä, joiden avulla voit saada luettelon samankaltaisista elementeistä (valitsijasäännön perusteella). Olemme käyttäneet tätä menetelmää aiemmin "Hello World" -osiossa.

Elementti

Elementti on mikä tahansa objekti, jota solmu edustaa asiakirjan DOM-puussa. Kuten aina, Element-objekti itsessään on vain ominaisuuksien, menetelmien ja tapahtumien sopimus selaimen ja HTML-dokumentin välillä. On olemassa erityisiä elementtejä, kuten HTMLElement, SVGElement, XULElement jne. Keskitymme tässä opetusohjelmassa vain HTMLElementiin.

DOM:n elementtiobjektin ominaisuudet

Element.id – Tällä ominaisuudella voidaan asettaa tai lukea "ID" (yksilöllinen tunniste) HTML-elementille. ID:n on oltava yksilöllinen DOM-puun elementtien joukossa. Kuten aiemmin mainittiin, Document.getElementById-menetelmä käyttää ID:tä myös tietyn Element-objektin valitsemiseen DOM-puusta.

HTMLElement.contentEditable – Elementin contentEditable-ominaisuus määrittää, onko elementin sisältö muokattavissa/muokattava. Tämä ominaisuus voidaan asettaa alla olevan skriptin mukaisesti. Tämän ominaisuuden avulla voidaan myös määrittää, onko tietty elementti muokattavissa vai ei. Kokeile seuraavaa komentosarjaa minkä tahansa HTML-tekstin sisällä ja huomaat, että voit muokata mitä tahansa rungon sisältöä.

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

Element.innerHTML – innerHTML on toinen tärkeä ominaisuus, jota käytämme elementin sisällä olevan HTML-sisällön käyttämiseen. Sitä käytetään myös elementin uuden HTML-sisällön asettamiseen. Sitä käytetään laajalti tietokenttien sisällön asettamiseen/vaihtamiseen. Sano esimerkiksi, että haluat verkkosivusi päivittävän Mumbai Cityn lämpötilan joka tunti, voit suorittaa seuraavan esimerkin skriptin tunnin välein.

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

Hyödyllisiä menetelmiä elementtiobjektille

HTMLElement.blur() & HTMLElement.focus() – Sumennus- ja tarkennusmenetelmiä käytetään vastaavasti tarkennuksen poistamiseen HTML-elementistä tai tarkentamiseen. Näitä menetelmiä käytetään yleisimmin siirtämään kohdistimen painopistettä tekstilaatikoiden välillä tiedonsyöttöverkkosivulla.

Element.querySelectorAll – Tämä menetelmä on samanlainen kuin jo käsitelty querySelector-menetelmä dokumenttiobjektille. Tämä menetelmä kuitenkin rajoittaa sen hakua itse elementin jälkeläisistä.

Virheenkorjaus DOM:ssa

Kehittäjän työkalut Google Chrome, Mozilla Firefox, Internet Explorer (10 tai uudempi) tai Safari mahdollistavat helpon virheenkorjauksen suoraan selaimessa. Joskus eri selaimet tulkitsevat samaa HTML-merkintää eri tavalla, ja silloin virheenkorjaus auttaa sinua tarkastamaan DOM:n, kuten kyseisen selaimen DOM-moottori on tulkinnut.

Oletetaan nyt, että haluat muuttaa lämpötila-arvon 26:sta^oC 32^oC viimeisessä esimerkissäsi. Teemme sen muutaman yksinkertaisen vaiheen. Tässä näkyvät kuvakaappaukset ovat Mozillasta Firefox– vaiheet ovat kuitenkin samat kaikissa muissa selaimissa.

Avaa MyFileNewFile.html (tai mikä tahansa nimi, jonka annoit HTML-tiedostollesi yllä olevissa opetusohjelmissa) selaimellasi
Käytä hiirtä ja napsauta hiiren kakkospainikkeella lämpötila-arvoa 26^oC ja napsauta "Tarkista elementti"
Huomaa, että elementti, jossa valitsit "Tarkista elementti", näkyy korostettuna selaimessasi (virheenkorjausikkuna näkyy yleensä näytön alareunassa)
Avaa elementti napsauttamalla sen vieressä olevaa kallistettua kolmiota
Valitse mitä haluat muokata ja kaksoisnapsauta sitä. Saat mahdollisuuden muuttaa tekstiä. Toimi alla olevan animoidun kuvan ohjeiden mukaan.
Huomaa HTML-sivusi sisällön muutos. Voit sulkea virheenkorjausikkunan nyt.

Huomaa, että tekemäsi muutokset säilyvät vain tämän istunnon ajan. Heti kun lataat sivun uudelleen tai päivität (paina F5), muutokset palautetaan. Tämä tarkoittaa, että et muuttanut todellista HTML-lähdettä, vaan vain selaimesi paikallista tulkintaa.

Kokeile tehdä seuraavaa hauskaa harjoitusta. Avata www.facebook.com selaimessasi ja käytä virheenkorjaustyökalua seurataksesi tulosta – huomaa, kuinka se sanoo "Olen hakkeroinut Facebookin".

Virheenkorjausprosessi DOM:ssa

DOM-tapahtumat

Mitä ovat tapahtumat DOM:ssa?

Tapahtumat ovat ohjelmointimalli, jossa käyttäjän käynnistämät (tai selainsivun elinkaaren laukaisemat) tapahtumat lähetetään viesteinä. Esimerkiksi kun sivu on latautunut, se käynnistää window.load-tapahtuman ja vastaavasti, kun käyttäjä napsauttaa painiketta, joka elementin napsautustapahtuma käynnistyy.

Kuka tahansa voi siepata nämä viestit JavaKäsikirjoitus koodi ja sitten kehittäjän määrittämä toimenpide voidaan suorittaa. Oletetaan esimerkiksi, että haluat verkkosivusi numeroiden päivittyvän vain, kun käyttäjä napsauttaa painiketta. Voit saavuttaa sen millä tahansa seuraavista tavoista -

Määritä toiminto HTML-elementin onclick-tapahtumalle
Määritä toiminto klikkaustapahtumalle addEventListener-menetelmällä

Menetelmä 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>

Menetelmä 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>

Vianetsintä DOM:ssa

K. Mistä tiedän, onko elementti olemassa vai ei?

A. Yritä etsiä elementtiä millä tahansa valitsimella ja tarkista, onko palautettu elementti tyhjä. Katso esimerkki alla -

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

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

A. Varmista, että menetelmän nimi vastaa täsmälleen API-menetelmää. Kuten yllä olevassa kysymyksessä - se on getElementById eikä getElementByID.

K. Mitä eroa on lapsilla ja lapsisolmuilla?

A. Menetelmä lapset saavat meille kokoelman kaikista kutsuvan elementin elementeistä. Palautetun kokoelman tyyppi on HTMLCollection. Kuitenkin menetelmä childNodes saa meille kokoelman kaikista kutsuvan elementin solmuista. Lisää seuraavat skriptit esimerkkiimme ja näe ero –

childNodes-menetelmä palauttaa 14 kohdetta

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

Lapset-menetelmä palauttaa vain 7 kohdetta

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 voi lukea ominaisuutta "innerHTML" of undefined…

A. Varmista, että HTMLElementin esiintymä, johon kutsut ominaisuutta innerHTML, on asetettu aloitusilmoituksen jälkeen. Tämä virhe tapahtuu yleensä seuraavassa skenaariossa. Katso, kuinka virhe voidaan välttää seuraavassa koodilohkossa…

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

Yhteenveto

Tässä opetusohjelmassa opimme, mitä DOM on ja kuinka se on välttämätöntä ymmärtää dynaamisten verkkosivujen luomiseksi.
Käsittelimme myös DOM-elementtejä, kuten ikkuna, asiakirja ja elementti.
Opimme hyödyllisiä DOM-menetelmiä ja -ominaisuuksia, jotka ovat käytettävissä kussakin lajissa.
Näimme, kuinka useimmat selaimet tarjoavat kehittäjätyökaluja millä tahansa Internetissä saatavilla olevalla verkkosivulla pelaamiseen – oppien näin virheenkorjausta ja oman verkkosivustomme ongelmien ratkaisemista.
Käsittelimme myös lyhyesti DOM-tapahtumamekanismeja.
Lopuksi käsittelimme muutamia vianmäärityskohteita DOM: ssa.
Internet on täynnä DOM-resursseja. Yksi parhaista ja ajantasaisimmista viitemateriaaleista on saatavilla Mozillan kehittäjäverkostosta. Katso - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model