V čem je DOM Selenium Struktura a plná forma WebDriveru?

Od: Krishna Rungta Krishna Rungta
Hours aktualizováno

⚡ Chytré shrnutí

Objektový model dokumentu (Document Object Model) zpřístupňuje HTML stránku JavaSkript jako strom objektů, umožňující skriptům a Selenium WebDriver čte, vyhledává a mění jakýkoli prvek na stránce, zatímco je prohlížeč spuštěný.

  • 🔘 Úplný formulář: DOM je zkratka pro Document Object Model (Dokumentový objektový model), což je standardizované rozhraní W3C pro dokumenty HTML a XML.
  • ☑️ Stromová struktura: Každý tag se stává uzlem, takže html, head, body, article a p tvoří hierarchii rodič-potomek.
  • (Tj. Tři objekty: Window zalomí kartu, Document označí kořen stromu a Element představuje každou jednotlivou značku.
  • 🧪 Základní metody: Funkce getElementById, querySelector a querySelectorAll načítají uzly; innerHTML čte a přepisuje jejich obsah.
  • 🛠️ Ladění: Nástroje pro vývojáře prohlížečů zpřístupňují analyzovaný strom a provedené úpravy trvají pouze do opětovného načtení stránky.
  • 📊 Akce: Akce, jako je kliknutí a načtení vysílání zpráv, které mohou zachytit atributy onclick nebo addEventListener.
Přečíst více

V čem je DOM Selenium Struktura a plná forma WebDriveru

V čem je DOM Selenium WebDriver?

DOM in Selenium WebDriver je nezbytná 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. Nicméně je to W3C, která formalizuje standard a publikuje ho – viz zde (https://dom.spec.whatwg.org/).

Následující části se zabývají strukturou dokumentu, objekty, které DOM zpřístupňuje, a způsobem jejich kontroly. Mozilla uchovává aktuální referenci API na Stránky modelu objektů dokumentu MDN.

Každý Selenium lokátor se rozpoznává proti stejnému stromu, takže níže uvedená struktura je to, co findElement() vyhledává.

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. Developing obsah, který se průběžně aktualizuje bez nutnosti obnovovat celou stránku – například aktuální cena všech akcií v portfoliu vašeho uživatele
  2. Developing pokročilé interakce s uživatelem, jako je dynamické přidávání nebo úprava obsahu – například možnost přidat do portfolia další akcie
  3. Developing obsah, který si může uživatel přizpůsobit – například možnost změnit rozvržení tak, aby se portfolio podílových fondů zobrazovalo před portfoliem akcií
  4. Developing responzivní obsah na vašem webu, díky čemuž se váš web automaticky přizpůsobí různým obrazovkám, např. iPhonu, počítači, tabletu atd.

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

Každá komponenta se nachází na jiné úrovni stromu, počínaje tou nejvzdálenější.

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

SOUVISEJÍCÍ ČLÁNKY

Dokument

Dokument označuje začátek stromu DOM. Dokument je prvním uzlem v DOMu. Má několik metod a vlastností, jejichž rozsah se vztahuje na celý dokument, například URL, getElementById, querySelector atd.

Vlastnosti objektu dokumentu v DOM

Dokument.dokumentURI a Dokument.URL – Oba vracejí aktuální umístění dokumentu. Pokud však dokument není typu HTML dokument.URL to nebude fungovat.

Document.activeElement – Tato metoda vrací element v DOMu, který je ve fokusu. To znamená, že pokud je uživatel typing V textovém poli vrátí Document.activeElement 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 pro manipulaci s DOMem. Používá se k vyhledávání prvku ve stromu DOMu pomocí svého jedinečného identifikátoruVyhledávání rozlišuje velká a malá písmena, tj. v následujícím příkladu „ „Prvek“ nelze vyhledat pomocí slov jako IntroDiv, 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 jednoho dalšího prvku na základě pravidla CSS selektoru (pokud znáte notaci $ v jQuery, ta sama tuto metodu používá). Do selektorů CSS se nebudeme moc zabývat. Selektor CSS je sada pravidel, pomocí kterých lze získat seznam podobných prvků (na základě pravidla selektoru). Tuto metodu jsme již použili v sekci „Ahoj světe“.

Prvek

Níže uvedený diagram ukazuje, jak se objekt Element nachází uvnitř stromu DOM, pod uzlem dokumentu.

Objekt elementu zobrazený jako uzel uvnitř hierarchie stromu 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 uzlem.tracvlastnosti, metody a události mezi prohlížečem a HTML dokumentem. Existují speciální druhy elementů, jako například 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.

Poznámka k přesnosti: Výše uvedený blok je reprodukován tak, jak byl publikován. Funkční kód používá dokument s malým písmenem d a vnitřní HTML vlastnost, nikoli setInnerHTML().

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.

Poznámka k prohlížeči: Podpora Internet Exploreru byla ukončena v roce 2022, takže jeho DevTools jsou nyní k dispozici. Microsoft EdgeNásledující kroky zůstávají nezměněny; DevTools se otevírají stisknutím klávesy F12.

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“

    Klikněte pravým tlačítkem myši na hodnotu teploty a v prohlížeči vyberte možnost Zkontrolovat prvek

  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)

    Nástroje pro vývojáře prohlížeče zvýrazňující kontrolovaný element span ve stromu DOM

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

    Rozbalení elementu span v inspektoru DOM pomocí trojúhelníkového přepínače

  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.

    Animovaná ukázka úpravy textové hodnoty DOM z 26 na 32 v inspektoru

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

Výsledek tohoto cvičení vypadá jako na snímku obrazovky níže.

Stránka na Facebooku upravena v inspektoru prohlížeče a zobrazena jako „Napadl jsem Facebook“

Čtení a úpravy uzlů zahrnují statické stránky. Interaktivní stránky také reagují na to, co uživatel dělá.

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ód a poté a akce definovaná vývojářem lze vzít. Řekněme například, že chcete, 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

Poznámka k staršímu API: Dvě níže uvedené odpovědi používají document.write(). Spustí se to, ale volání po načtení stránky dokument vymaže. Upřednostňujte console.log() nebo innerHTML.

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 –

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

Nejčastější dotazy

Stínový DOM je funkce prohlížeče, která dává komponentě vlastní izolovaný podstrom, takže styly a skripty neunikají. Virtuální DOM je knihovní technika používaná Reactem a Vue, která porovnává kopii v paměti, aby se minimalizovaly skutečné aktualizace.

WebDriver odešle lokátor do prohlížeče, který prochází analyzovaný strom, dokud se neobjeví shoda, a poté vrátí handle WebElement. Lokátory jako například id, name, CSS selector a XPath jednoduše popisují různá pravidla vyhledávání nad stejnými uzly.

Pokud cíl má jedinečné ID, použijte getElementById; je to nejrychlejší vyhledávání a vrací jeden uzel. Pokud shoda závisí na třídách, atributech nebo cestě rodič-potomek, použijte querySelector nebo querySelectorAll.

Stále se spustí, ale prohlížeče to nedoporučují. Volání document.write() po načtení stránky nahradí celý dokument a blokuje parsování během načítání. Pro tracing nebo innerHTML pro vložení obsahu.

Obsah stránky modelu DOM: hlavička, tělo a všechny tagy. Objektový model prohlížeče (Browser Object Model) zahrnuje okolní prohlížeč, včetně navigátoru, obrazovky, umístění a historie. Objekt window je místem, kde se oba setkávají.

Podpora Internet Exploreru byla v roce 2022 ukončena, takže jeho vývojářské nástroje jsou nyní uvnitř Microsoft EdgePracovní postup se nezměnil: stiskněte klávesu F12 nebo klikněte pravým tlačítkem myši na prvek, vyberte možnost Zkontrolovat a upravte uzel v otevřeném panelu.

Nástroje strojového učení hodnotí několik atributů uzlů najednou, takže když se změní třída nebo ID, znovu porovnají stejný prvek, místo aby selhaly. Platformy pro samoopravné testování to staví na běžných dotazech DOM.

Druhý pilot Vytváří posluchače událostí, řetězce querySelector a smyčky procházení z komentáře a je spolehlivý na běžných vzorcích. Návrh vždy otestujte na skutečné stránce, protože nevidí vaše kódování.

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