Miben van a DOM? Selenium WebDriver: Struktúra, Teljes forma

Miben van a DOM? Selenium WebDriver?

DOM in Selenium A WebDriver a HTML5 és a webfejlesztés alapvető összetevője JavaForgatókönyv. A DOM teljes formája a Document Object Model. A DOM nem számítástechnikai fogalom. Ez egy egyszerű, a webfejlesztők által szabványosított interfészkészlet a HTML vagy XML formátumú dokumentumok eléréséhez és kezeléséhez. JavaForgatókönyv.

Ezek a szabványok segítenek a fejlesztőknek weboldal elkészítésében anélkül, hogy aggódnának a megvalósítás részletei miatt. Az interfészek szabványosításában részt vevő szervezetek közül néhány, például a Mozilla, az Apple, Microsoft, Google, Adobe stb. Azonban a W3C formalizálja és közzéteszi a szabványt – lásd itt (https://dom.spec.whatwg.org/).

Ennek az oktatóanyagnak a célja a HTML-dokumentum szerkezetének alapfogalmait és azok kezelését ismertetni JavaForgatókönyv. Ebben az oktatóanyagban a következő témákkal foglalkozunk:

A DOM-struktúra megértése
A DOM összetevői in Selenium
Hibakeresés DOM-ban
DOM események
Hibaelhárítás a DOM-ban

A DOM-struktúra megértése

Meg kell értenie a DOM-struktúrát, ha olyan webhelyet készít, amelyen szkriptet használ JavaForgatókönyv. A DOM megértése még kritikusabb, ha a következő bonyolult feladatok közül egyet vagy mindegyiket végrehajtja a webhelyén –

Olyan tartalom fejlesztése, amely folyamatosan frissül a teljes oldal frissítése nélkül – például a felhasználó portfóliójában lévő összes részvény aktuális árfolyama
Speciális felhasználói interakciók fejlesztése, például tartalom dinamikus hozzáadása vagy módosítása – például több részvény hozzáadásának lehetősége a portfóliójához
Felhasználó által testreszabható tartalom fejlesztése – például az elrendezés megváltoztatásának lehetősége, hogy a befektetési alapok portfóliója a részvényportfólió előtt jelenjen meg
Reszponzív tartalom fejlesztése a webhelyén, így a webhely alkalmazkodhat a különböző médiaképernyőkhöz, pl. iPhone, asztali számítógép, táblagép stb. automatikusan

Egy alap HTML oldal

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

Hogyan néz ki a böngésző DOM PARSER-je számára?

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

Hogyan lehet hozzáférni a test elemhez?

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

Hogyan mondod, hogy „Hello World”?

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

Végül a teljes HTML-fájl így fog kinézni

Nyisd ki Windows Jegyzettömböt, és illessze be a következő tartalmat. Ezután mentse a fájlt „MyFileNewFile.html” néven (győződjön meg arról, hogy a fájl neve .html-re végződik).

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

Végül csak nyissa meg a fájlt bármelyik kedvenc böngészővel, és megjelenik a „Hello World!” üzenet.

A DOM összetevői in Selenium

Az alábbiakban bemutatjuk a DOM fő összetevőit Selenium WebDriver:

Ablak
dokumentum
Elem

Ablak

Az ablak az az objektum, amely a dokumentum objektumot tartalmazza egy DOM-ban. Mindennek a tetején ül.

Adott dokumentumból egy ablakobjektum elérése

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

Lapos környezetben minden lapnak saját ablakobjektuma van. Ha azonban szeretnénk elkapni és megvalósítani az olyan eseményeket, mint a window.resizeTo és a window.resizeBy, ezek a teljes ablakra vonatkoznak, nem csak a lapra.

A DOM ablakobjektum tulajdonságai

window.localStorage – hozzáférést biztosít a böngésző helyi tárhelyéhez. A helyi tároló használható adatok tárolására és lekérésére egy munkamenetből.

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

ablak.nyitó - lekéri az ablakot megnyitó ablak objektum hivatkozását (akár egy hivatkozásra kattintva, akár a window.open metódussal)

Az ablakobjektum hasznos módszerei

window.alert() – riasztási párbeszédpanelt jelenít meg egy üzenettel.

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

Az ablakobjektum számos hasznos eseményt tesz közzé. Ezeket az Előzetes témák „Események” szakaszában tárgyaljuk

dokumentum

A dokumentum egy DOM-fa kezdetét jelöli. A dokumentum a DOM első csomópontja. Számos módszerrel és tulajdonsággal rendelkezik, amelyek hatóköre a teljes dokumentumra vonatkozik, például URL, getElementById, querySelector stb.

Dokumentumobjektum tulajdonságai a DOM-ban

Document.documentURI és a Dokumentum.URL – Mindkettő visszaadja a dokumentum aktuális helyét. Ha azonban a dokumentum nem HTML típusú, a Document.URL nem fog működni.

Document.activeElement – Ez a módszer a fókuszban lévő DOM elemet adja vissza. Ez azt jelenti, hogy ha a felhasználó egy szövegdobozba gépel, a Document.activeElement erre a szövegdobozra hivatkozik.

Dokumentum címe – Egy adott dokumentum címének beolvasására vagy beállítására szolgál.

A dokumentumobjektum hasznos módszerei

Document.getElementById(karakterlánc azonosító) – ez messze a legrelevánsabb és leghasznosabb módszer a DOM-manipulációban. Egy elem megkeresésére szolgál a DOM-fában annak egyedi azonosítójával. A keresés megkülönbözteti a kis- és nagybetűket, azaz a következő példában a „ ” elem nem kereshető olyan szavakkal, mint az IntroDiv, introdiv vagy iNtrodiv stb.

<!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(karakterlánc-választó) – ez egy másik széles körben használt módszer egy további elem kiválasztására a CSS-szelektor szabályai alapján (ha ismeri a jQuery $ jelölését, maga is ezt a módszert használja). Nem fogunk sokat foglalkozni a CSS-szelektorokkal. A CSS-szelektor olyan szabályok összessége, amelyek alapján egy listát kaphat a hasonló elemekről (a kiválasztó szabály alapján). Ezt a módszert már korábban is alkalmaztuk a „Hello World” részben.

Elem

Az elem bármely objektum, amelyet egy csomópont képvisel a dokumentum DOM-fájában. Mint mindig, maga az Element objektum csak tulajdonságok, módszerek és események szerződése a böngésző és egy HTML-dokumentum között. Vannak speciális elemek, mint a HTMLElement, SVGElement, XULElement stb. Ebben az oktatóanyagban csak a HTMLElementre fogunk összpontosítani.

Az elemobjektum tulajdonságai a DOM-ban

Elem.id – Ez a tulajdonság használható „ID” (egyedi azonosító) beállítására vagy olvasására egy HTML-elemhez. Az azonosítónak egyedinek kell lennie a DOM-fa elemei között. Mint korábban említettük, az azonosítót a Document.getElementById metódus is használja egy adott elem objektum kiválasztására a DOM-fán belül.

HTMLElement.contentEditable – Egy elem contentEditable tulajdonsága határozza meg, hogy az adott elem tartalma szerkeszthető/módosítható-e. Ez a tulajdonság az alábbi szkriptben látható módon állítható be. Ez a tulajdonság használható annak meghatározására is, hogy egy adott elem szerkeszthető-e vagy sem. Próbálja ki a következő szkriptet bármely HTML törzsben, és észre fogja venni, hogy a törzs bármely tartalmát szerkesztheti.

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

Element.innerHTML – az innerHTML egy másik fontos tulajdonság, amelyet az elemen belüli HTML-tartalom elérésére használunk. Az elem új HTML-tartalmának beállítására is szolgál. Széles körben használják adatmezők tartalmának beállítására/módosítására. Tegyük fel például, hogy azt szeretné, hogy weboldala óránként frissítse Mumbai City hőmérsékletét, a következő példában szereplő szkriptet óránként futtathatja.

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

Az elemobjektum hasznos módszerei

HTMLElement.blur() & HTMLElement.focus() – az elmosódás és az élességállítás módszerei a fókusz eltávolítására szolgálnak egy HTML-elemről, illetve fókuszba helyezhetők. Ezeket a módszereket a legszélesebb körben használják a kurzor fókuszának mozgatására az adatbeviteli weboldal szövegdobozai között.

Element.querySelectorAll – Ez a módszer hasonló a dokumentumobjektum már tárgyalt querySelector metódusához. Ez a módszer azonban korlátozza a keresést magának az elemnek a leszármazottaiban.

Hibakeresés DOM-ban

Fejlesztői eszközei Google Chrome, Mozilla Firefox, az Internet Explorer (10 vagy újabb) vagy a Safari lehetővé teszi az egyszerű hibakeresést közvetlenül a böngészőn belül. Néha a különböző böngészők eltérően értelmezik ugyanazt a HTML-jelölést, és ez az, amikor a hibakeresés segít a DOM ellenőrzésében, ahogy azt az adott böngésző DOM-motorja értelmezte.

Most tegyük fel, hogy módosítani szeretné a hőmérsékleti értéket 26-ról^oC-tól 32-ig^oC az utolsó példában. Ehhez néhány egyszerű lépést teszünk. Az itt látható képernyőképek a Mozillától származnak Firefox– azonban a lépések ugyanazok minden más böngészőben.

Nyissa meg a MyFileNewFile.html fájlt (vagy bármilyen nevet, amelyet a fenti oktatóanyagokban adott a HTML-fájlnak) a böngészővel
Használja az egeret, és kattintson jobb gombbal a 26-os hőmérsékleti értékre^oC és kattintson az „Elem ellenőrzése” gombra
Figyelje meg, hogy az az elem, ahol az „Elem vizsgálata” lehetőséget választotta, kiemelten jelenik meg a böngészőben (a hibakereső ablak általában a képernyő alján jelenik meg)
Nyissa meg az elemet a mellette lévő döntött háromszögre kattintva
Válassza ki, hogy mit szeretne szerkeszteni, és kattintson rá duplán. Lehetőséget kap a szöveg módosítására. Tegye az alábbi animált képen leírtak szerint.
Figyelje meg a HTML-oldal tartalmának változását. Most bezárhatja a hibakereső ablakot.

Vegye figyelembe, hogy a változtatások csak erre a munkamenetre vonatkoznak. Amint újratölti vagy frissíti (nyomja meg az F5 billentyűt), a módosítások visszaállnak. Ez azt jelzi, hogy nem változtatta meg a tényleges HTML-forrást, hanem csak a böngésző helyi értelmezését.

Szórakoztató gyakorlatként próbálja meg a következőket. Nyitott www.facebook.com a böngészőjében, és használja a hibakereső eszközt az eredmény követéséhez – figyelje meg, hogy „Feltörtem a Facebookot”.

Hibakeresési folyamat a DOM-ban

DOM események

Mik azok az események a DOM-ban?

Az események olyan programozási modell, amelyben a felhasználó által kiváltott (vagy a böngészőoldal életciklusa által kiváltott) incidenseket üzenetként sugározzák. Például amikor egy oldal betöltése befejeződött, akkor kiváltja a window.load eseményt, és hasonlóképpen, ha a felhasználó olyan gombra kattint, amely elem kattintási eseménye aktiválódik.

Ezeket az üzeneteket bárki elfoghatja JavaForgatókönyv kódot, majd végrehajtható a fejlesztő által meghatározott művelet. Tegyük fel például, hogy azt szeretné, ha a weboldalon lévő számok csak akkor frissülnének, ha a felhasználó egy gombra kattint. Ezt az alábbi módszerek bármelyikével érheti el:

Művelet hozzárendelése a HTML-elem onclick eseményéhez
Rendeljen műveletet a kattintási eseményhez az addEventListener metódussal

Módszer 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>

Módszer 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>

Hibaelhárítás a DOM-ban

K. Honnan tudhatom, hogy egy elem létezik-e vagy sem?

A. Próbáljon megkeresni az elemet bármelyik kiválasztó segítségével, és ellenőrizze, hogy a visszaadott elem nulla-e. Lásd alább a példát –

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

K. TypeError üzenetet kapok: document.getElementByID nem függvény…

A. Győződjön meg arról, hogy a metódus neve pontosan megegyezik az API metódussal. A fenti kérdéshez hasonlóan ez a getElementById, és nem a getElementByID.

K. Mi a különbség a gyermekek és a gyermekcsomópontok között?

A. A gyerekek módszere megkapja a hívó elemen belüli összes elem gyűjteményét. A visszaküldött gyűjtemény HTMLCollection típusú. A childNodes metódus azonban megkapja a hívó elemen belüli összes csomópont gyűjteményét. Adja hozzá a következő szkripteket a példánkhoz, és nézze meg a különbséget -

A childNodes metódus 14 elemet ad vissza

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

Míg a gyerekek módszer csak 7 elemet ad vissza

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. Uncaught TypeError üzenetet kapok: Nem olvasható az undefined 'innerHTML' tulajdonsága…

A. Győződjön meg arról, hogy a HTMLElement azon példánya, amelyen az innerHTML tulajdonságot meghívja, a kezdeti deklaráció után lett beállítva. Ez a hiba általában a következő forgatókönyvben fordul elő. Nézze meg, hogyan kerülhető el a hiba a következő kódblokkban…

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

Összegzésként

Ebben az oktatóanyagban megtanultuk, mi az a DOM, és hogyan kell megérteni a dinamikus weboldalak létrehozásának alapvető fogalmát.
Kitértünk a DOM-elemek típusaira is, mint például az ablak, a dokumentum és az elem.
Megtanultunk néhány hasznos DOM módszert és tulajdonságot, amelyek mindegyik típuson belül elérhetők.
Láttuk, hogy a legtöbb böngésző fejlesztői eszközöket kínál az interneten elérhető bármely weboldallal való játékhoz – így megtanultuk a hibakeresést és a saját webhelyünkkel kapcsolatos problémák megoldását.
Röviden érintettük a DOM Event mechanizmusait is.
Végül bemutattunk néhány hibaelhárítási elemet a DOM-ban.
Az internet tele van DOM-forrásokkal. Az egyik legjobb és naprakész referenciaanyag elérhető a Mozilla fejlesztői hálózatán. Lát - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model