V čem je DOM Selenium WebDriver: Struktura, plná forma

Od: Krishna Rungta Krishna Rungta
Hours aktualizováno

V čem je DOM Selenium WebDriver?

DOM in Selenium WebDriver je základní součástí vývoje webu pomocí HTML5 a JavaSkript. Plná forma DOM je Document Object Model. DOM není koncept počítačové vědy. Jedná se o jednoduchou sadu rozhraní standardizovaných mezi webovými vývojáři pro přístup a manipulaci s dokumenty v HTML nebo XML pomocí JavaSkript.

Tyto standardy pomáhají vývojářům vytvořit webovou stránku, aniž by se museli starat o detaily implementace. Některé z organizací zapojených do standardizace těchto rozhraní jsou jako Mozilla, Apple, Microsoft, Google, Adobe atd. Je to však W3C, kdo standard formuje a publikuje – viz zde (https://dom.spec.whatwg.org/).

Tento tutoriál si klade za cíl pokrýt základní koncepty struktury HTML dokumentu a jak s ním manipulovat JavaSkript. V tomto tutoriálu se budeme zabývat následujícími tématy:

Pochopení struktury DOM

Pokud vytváříte jakýkoli web, který zahrnuje použití skriptů, budete muset porozumět struktuře DOM JavaSkript. Pochopení DOM je ještě důležitější, pokud na svém webu provádíte některý nebo všechny z následujících komplikovaných úkolů –

  1. Vývoj obsahu, který se průběžně aktualizuje bez obnovování celé stránky – jako je aktuální cena všech akcií v portfoliu vašeho uživatele
  2. Rozvíjení pokročilých uživatelských interakcí, jako je dynamické přidávání nebo úprava obsahu – například možnost přidat do portfolia více akcií
  3. Vývoj obsahu, který si uživatel může přizpůsobit – například možnost změnit rozložení tak, aby se portfolio podílových fondů objevilo před portfoliem akcií
  4. Vývoj responzivního obsahu na vašem webu, čímž se váš web přizpůsobí různým obrazovkám médií, viz. iPhone, stolní počítač, tablet atd. automaticky

Základní HTML stránka

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

Jak to vypadá v prohlížeči DOM PARSER?

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

Jak se dostanete k elementu těla?

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

Jak se řekne „Ahoj světe“?

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

Nakonec bude celý HTML soubor vypadat takto

Otevřená Windows Poznámkový blok a vložte do něj následující obsah. Poté soubor uložte jako „MyFileNewFile.html“ (ujistěte se, že název souboru končí na .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>

Nakonec stačí otevřít soubor pomocí libovolného preferovaného prohlížeče a zobrazí se "Hello World!"

Komponenty DOM v Selenium

Níže jsou uvedeny hlavní součásti DOM Selenium WebDriver:

  • Okno
  • Dokument
  • Prvek

Okno

Window je objekt, který obsahuje objekt dokumentu v DOM. Sedí nade vším.

Chcete-li se dostat k objektu okna z daného dokumentu

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

V prostředí s kartami má každá karta svůj vlastní objekt okna. Pokud byste však chtěli zachytit a implementovat události jako window.resizeTo a window.resizeBy, vztahují se na celé okno a ne na samotnou kartu.

Vlastnosti objektu okna v DOM

window.localStorage – umožňuje přístup k místnímu úložišti prohlížeče. Místní úložiště lze použít k ukládání a načítání dat z relace.

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

otvírač oken - získá odkaz na objekt okna, který toto okno otevřel (buď kliknutím na odkaz nebo pomocí metody window.open)

Užitečné metody objektu okna

window.alert() – zobrazí výstražný dialog se zprávou.

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

Existuje mnoho užitečných událostí, které objekt okna zpřístupňuje. Budeme o nich diskutovat v sekci „Události“ v části Pokročilá témata

Dokument

Dokument označuje začátek stromu DOM. Dokument je prvním uzlem v DOM. Má několik metod a vlastností, jejichž rozsah platí pro celý dokument, jako je URL, getElementById, querySelector atd.

Vlastnosti objektu dokumentu v DOM

Dokument.dokumentURI si Dokument.URL – Oba vrátí aktuální umístění dokumentu. Pokud však dokument není typu HTML Document.URL nebude fungovat.

Document.activeElement – Tato metoda vrátí prvek v DOM, který je aktivní. To znamená, že pokud uživatel píše do textového pole, Document.activeElement vrátí odkaz na toto textové pole.

Název dokumentu – Používá se ke čtení nebo nastavení názvu daného dokumentu.

Užitečné metody objektu dokumentu

Document.getElementById(ID řetězce) – toto je zdaleka nejrelevantnější a nejužitečnější metoda při manipulaci s DOM. Používá se k vyhledání prvku ve stromu DOM pomocí jeho jedinečného identifikátoru. Při vyhledávání se rozlišují velká a malá písmena, tj. v následujícím příkladu „ ” prvek nelze vyhledat pomocí slov jako IntroDiv nebo introdiv nebo iNtrodiv atd.

<!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(selektor řetězce) – toto je další široce používaná metoda pro výběr dalšího prvku na základě pravidel CSS selektoru (pokud znáte $ notaci jQuery, sama tuto metodu používá). Do CSS selektorů se moc pouštět nebudeme. CSS selektor je sada pravidel, pomocí kterých můžete získat seznam podobných prvků (na základě pravidla selektoru). Tuto metodu jsme již dříve použili v sekci „Ahoj světe“.

Prvek

Element Object v DOM

Element Object v DOM

Element je jakýkoli objekt reprezentovaný uzlem ve stromu DOM dokumentu. Jako vždy je objekt Element sám o sobě pouze smlouvou vlastností, metod a událostí mezi prohlížečem a dokumentem HTML. Existují speciální druhy prvků jako HTMLElement, SVGElement, XULElement atd. V tomto tutoriálu se zaměříme pouze na HTMLElement.

Vlastnosti objektu Element v DOM

Element.id – Tuto vlastnost lze použít k nastavení nebo čtení „ID“ (jedinečný identifikátor) prvku HTML. ID musí být jedinečné mezi prvky ve stromu DOM. Jak již bylo zmíněno, ID je také používáno metodou Document.getElementById k výběru konkrétního objektu Element ve stromu DOM.

HTMLElement.contentUpravitelné – Vlastnost contentEditable prvku určuje, zda je obsah tohoto prvku upravitelný/upravitelný. Tuto vlastnost lze nastavit tak, jak je uvedeno ve skriptu níže. Tuto vlastnost lze také použít k určení, zda je daný prvek upravitelný či nikoli. Vyzkoušejte následující skript v libovolném těle HTML a všimnete si, že můžete upravovat jakýkoli obsah těla.

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

Element.innerHTML – innerHTML je další důležitá vlastnost, kterou používáme pro přístup k obsahu HTML uvnitř prvku. Slouží také k nastavení nového HTML obsahu prvku. Je široce používán pro nastavení/změnu obsahu datových polí. Řekněme například, že chcete, aby vaše webová stránka aktualizovala teplotu města Mumbai každou hodinu, můžete spustit skript v následujícím příkladu každou hodinu.

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

Užitečné metody objektu Element

HTMLElement.blur() & HTMLElement.focus() – metody rozostření a zaostření se používají k odstranění zaměření z prvku HTML nebo k zaostření na prvek HTML. Tyto metody se nejčastěji používají k přesunu kurzoru mezi textovými poli na webové stránce pro zadávání dat.

Element.querySelectorAll – Tato metoda je podobná již diskutované metodě querySelector pro objekt dokumentu. Tato metoda však omezí jeho hledání v rámci potomků samotného prvku.

Ladění v DOM

Vývojářské nástroje Google Chrome, Mozilla Firefox, Internet Explorer (10 nebo vyšší) nebo Safari umožňují snadné ladění přímo v prohlížeči. Někdy různé prohlížeče interpretují stejné označení HTML odlišně, a to je situace, kdy vám ladění pomůže zkontrolovat DOM tak, jak byl interpretován jádrem DOM daného prohlížeče.

Nyní řekněme, že chcete změnit hodnotu teploty z 26oC až 32oC ve vašem posledním příkladu. Uděláme k tomu několik jednoduchých kroků. Zde zobrazené snímky pocházejí z Mozilly Firefox– postup je však stejný ve všech ostatních prohlížečích.

  1. Otevřete soubor MyFileNewFile.html (nebo jakýkoli název, který jste svému souboru HTML dali ve výukových programech výše) pomocí prohlížeče
  2. Použijte myš a klikněte pravým tlačítkem na hodnotu teploty 26oC a klikněte na „Zkontrolovat prvek“

    Ladění v DOM

  3. Všimněte si, že prvek, u kterého jste zvolili „Prozkoumat prvek“, se ve vašem prohlížeči zobrazuje zvýrazněný (okno ladicího programu se obvykle zobrazuje ve spodní části obrazovky)

    Ladění v DOM Engine

  4. Otevřete prvek kliknutím na nakloněný trojúhelník vedle něj

    Proces ladění v DOM

  5. Vyberte, co chcete upravit, a dvakrát na to klikněte. Dostanete možnost změnit text. Postupujte podle pokynů na animovaném obrázku níže.

    Ladění v DOM

  6. Všimněte si změny obsahu stránky HTML. Nyní můžete zavřít okno ladění.

    Všimněte si, že vaše změny budou zachovány pouze pro tuto relaci. Jakmile stránku znovu načtete nebo obnovíte (stisknutím F5), změny se vrátí zpět. To znamená, že jste nezměnili skutečný zdroj HTML, ale pouze místní interpretaci vašeho prohlížeče.

    Jako zábavné cvičení zkuste provést následující. OTEVŘENO www.facebook.com ve vašem prohlížeči a pomocí ladicího nástroje sledujte výsledek – všimněte si, jak se píše „Napadl jsem Facebook“.

Proces ladění v DOM

Události DOM

Co jsou události v DOM?

Události jsou programovací model, ve kterém jsou incidenty spouštěné uživatelem (nebo spouštěným životním cyklem stránky prohlížeče) vysílány jako zprávy. Například, když se stránka načte, spustí událost window.load a podobně, když uživatel klikne na tlačítko, které je spuštěna událost kliknutí prvku.

Tyto zprávy může zachytit kdokoli JavaScénář kódu a poté lze provést akci definovanou vývojářem. Řekněme například, že byste chtěli, aby se čísla na vaší webové stránce aktualizovala pouze tehdy, když uživatel klikne na tlačítko. Můžete toho dosáhnout některou z následujících metod –

  1. Přiřaďte akci události onclick prvku HTML
  2. Přiřaďte akci události click pomocí metody 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>

Odstraňování problémů v DOM

Otázka: Jak zjistím, zda prvek existuje nebo ne?

A. Zkuste vyhledat prvek pomocí libovolného selektoru a zkontrolujte, zda je vrácený prvek null. Viz příklad níže –

SOUVISEJÍCÍ ČLÁNKY

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

Otázka: Dostávám TypeError: document.getElementByID není funkce…

A. Ujistěte se, že název metody přesně odpovídá metodě API. Stejně jako v otázce výše – je to getElementById a ne getElementByID.

Otázka: Jaký je rozdíl mezi dětmi a dětskými uzly?

A. Metoda děti nám poskytne kolekci všech prvků v rámci volajícího prvku. Vrácená kolekce je typu HTMLCollection. Metoda childNodes nám však poskytne kolekci všech uzlů v rámci volajícího prvku. Přidejte do našeho příkladu následující skripty a uvidíte rozdíl –

Metoda childNodes vrací 14 položek

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

Zatímco metoda děti vrací pouze 7 položek

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

Otázka: Zobrazuje se mi Uncaught TypeError: Nemohu přečíst vlastnost 'innerHTML' z undefined…

A. Ujistěte se, že instance HTMLElement, kterou voláte vlastnost innerHTML, byla nastavena po počáteční deklaraci. K této chybě obvykle dochází v následujícím scénáři. Podívejte se, jak se lze chybě vyhnout v dalším bloku kódu…

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

Shrnutí

  • V tomto tutoriálu jsme se naučili, co je to DOM a jak je důležité porozumět konceptu vytváření dynamických webových stránek.
  • Dotkli jsme se také typů prvků DOM, jako je okno, dokument a prvek.
  • Naučili jsme se některé užitečné metody a vlastnosti DOM dostupné v každém druhu.
  • Viděli jsme, jak většina prohlížečů nabízí vývojářské nástroje pro hraní s jakoukoli webovou stránkou dostupnou na internetu – a tak jsme se naučili ladit a řešit problémy s našimi vlastními webovými stránkami.
  • Krátce jsme se také dotkli mechanismů událostí DOM.
  • Nakonec jsme probrali několik položek pro odstraňování problémů v DOM.
  • Internet je plný zdrojů na DOM. Jeden z nejlepších a aktuálních referenčních materiálů je dostupný v síti vývojářů Mozilly. Viz – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Shrňte tento příspěvek takto: