W czym jest DOM Selenium WebDriver: Struktura, Pełna Forma

W czym jest DOM Selenium Sterownik sieciowy?

DOM in Selenium WebDriver jest niezbędnym elementem tworzenia stron internetowych przy użyciu HTML5 i JavaSkrypt. Pełna forma DOM to Document Object Model. DOM nie jest koncepcją informatyki. Jest to prosty zestaw interfejsów standaryzowanych wśród programistów internetowych w celu uzyskiwania dostępu i manipulowania dokumentami w HTML lub XML za pomocą JavaScenariusz.

Te standardy pomagają deweloperom tworzyć strony internetowe bez martwienia się o szczegóły implementacji. Niektóre organizacje zaangażowane w standaryzację tych interfejsów to Mozilla, Apple, Microsoft, Google, Adobe itp. Jednak to W3C formalizuje standard i publikuje go – patrz tutaj (https://dom.spec.whatwg.org/).

Celem tego samouczka jest omówienie podstawowych pojęć dotyczących struktury dokumentu HTML i sposobu manipulowania nią za pomocą JavaSkrypt. W tym samouczku omówimy następujące tematy:

Zrozumienie struktury DOM
Komponenty DOM w Selenium
Debugowanie w DOM
Wydarzenia DOM
Rozwiązywanie problemów w DOM

Zrozumienie struktury DOM

Będziesz musiał zrozumieć strukturę DOM, jeśli budujesz jakąkolwiek witrynę internetową wymagającą użycia skryptów JavaSkrypt. Zrozumienie DOM jest jeszcze ważniejsze, jeśli wykonujesz jedno lub wszystkie z następujących skomplikowanych zadań na swojej stronie internetowej –

Tworzenie treści, które aktualizują się w sposób ciągły bez konieczności odświeżania całej strony – np. aktualna cena wszystkich akcji w portfelu użytkownika
Rozwijanie zaawansowanych interakcji użytkownika, takich jak dynamiczne dodawanie lub modyfikowanie treści – np. możliwość dodawania większej liczby akcji do swojego portfela
Tworzenie treści dostosowywanych przez użytkownika – np. możliwość zmiany układu w taki sposób, aby portfel funduszy inwestycyjnych pojawiał się przed portfelem akcji
Tworzenie responsywnej zawartości w witrynie internetowej, dzięki czemu witryna automatycznie dopasowuje się do różnych ekranów multimedialnych, np. iPhone'a, komputera stacjonarnego, tabletu itp.

Podstawowa strona 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>
</body>
</html>

Jak to wygląda w PARSER DOM przeglądarki?

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

Jak uzyskać dostęp do elementu body?

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

Jak powiedzieć „Witaj, świecie”?

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

Wreszcie będzie wyglądał cały plik HTML

Otwarte Windows Notatnik i wklej do niego następującą treść. Następnie zapisz plik jako „MyFileNewFile.html” (upewnij się, że nazwa pliku kończy się 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>

Na koniec po prostu otwórz plik za pomocą dowolnej preferowanej przeglądarki, a zobaczysz „Hello World!”

Komponenty DOM w Selenium

Poniżej znajdują się główne komponenty DOM Selenium Sterownik sieciowy:

okno
dokument
Element

okno

Okno to obiekt zawierający obiekt dokumentu w DOM. Znajduje się na szczycie wszystkiego.

Aby dostać się do obiektu okna z danego dokumentu

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

W środowisku z kartami każda karta ma swój własny obiekt okna. Jeśli jednak ktoś chciałby przechwycić i zaimplementować zdarzenia takie jak window.resizeTo i window.resizeBy, dotyczą one całego okna, a nie samej zakładki.

Właściwości obiektu Window w DOM

window.localStorage – daje dostęp do lokalnej pamięci przeglądarki. Magazyn lokalny może służyć do przechowywania i pobierania danych z sesji.

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

otwieracz do okien - pobiera referencję do obiektu okna, który otworzył to okno (poprzez kliknięcie łącza lub użycie metody window.open)

Przydatne metody obiektu Window

okno.alert() – wyświetla okno dialogowe alertu z komunikatem.

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

Istnieje wiele przydatnych zdarzeń, które ujawnia obiekt okna. Omówimy je w sekcji „Wydarzenia” w dziale Tematy zaawansowane

dokument

Dokument wyznacza początek drzewa DOM. Dokument jest pierwszym węzłem w DOM. Posiada kilka metod i właściwości, których zakres dotyczy całego dokumentu, takich jak URL, getElementById, querySelector itp.

Właściwości obiektu dokumentu w DOM

Dokument.documentURI i Dokument.URL – Obydwa zwracają bieżącą lokalizację dokumentu. Jeśli jednak dokument nie jest typu HTML Document.URL nie będzie działać.

Dokument.aktywnyElement – Ta metoda zwraca element w DOM, który jest w centrum uwagi. Oznacza to, że jeśli użytkownik pisze w polu tekstowym, Document.activeElement zwróci odniesienie do tego pola tekstowego.

Tytuł dokumentu – Służy do odczytania lub ustawienia tytułu danego dokumentu.

Przydatne metody obiektu dokumentu

Document.getElementById (identyfikator ciągu) – jest to zdecydowanie najbardziej odpowiednia i użyteczna metoda w manipulacji DOM. Służy do wyszukiwania elementu w drzewie DOM przy użyciu jego unikalnego identyfikatora. Wyszukiwanie jest rozróżniane wielkością liter, tj. w poniższym przykładzie „ „Elementu nie można wyszukiwać używając słów takich jak IntroDiv, introdiv lub iNtrodiv itp.

<!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 ciągu) – to kolejna powszechnie stosowana metoda zaznaczania jeszcze jednego elementu w oparciu o reguły selektora CSS (jeśli znasz notację $ w jQuery, która sama korzysta z tej metody). Nie będziemy się zbytnio zagłębiać w selektory CSS. Selektor CSS to zbiór reguł, dzięki którym możesz otrzymać listę podobnych elementów (w oparciu o regułę selektora). Użyliśmy tej metody już wcześniej w sekcji „Hello World”.

Element

Element to dowolny obiekt reprezentowany przez węzeł w drzewie DOM dokumentu. Jak zawsze, sam obiekt Element jest po prostu umową właściwości, metod i zdarzeń pomiędzy przeglądarką a dokumentem HTML. Istnieją specjalne rodzaje elementów, takie jak HTMLElement, SVGElement, XULElement itp. W tym samouczku skupimy się tylko na HTMLElement.

Właściwości obiektu elementu w DOM

Element.id – Ta właściwość może być używana do ustawiania lub odczytywania „ID” (unikalnego identyfikatora) elementu HTML. Identyfikator musi być unikalny wśród elementów drzewa DOM. Jak wspomniano wcześniej, identyfikator jest również używany przez metodę Document.getElementById do wybierania konkretnego obiektu Element w drzewie DOM.

HTMLElement.contentEditable – właściwość contentEditable elementu określa, czy zawartość tego elementu jest edytowalna/modyfikowalna. Tę właściwość można ustawić tak, jak pokazano w poniższym skrypcie. Tę właściwość można również wykorzystać do określenia, czy dany element jest edytowalny, czy nie. Wypróbuj poniższy skrypt w dowolnym ciele HTML, a zauważysz, że możesz edytować dowolną zawartość ciała.

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

Element.innerHTML – innerHTML to kolejna ważna właściwość, której używamy do dostępu do zawartości HTML wewnątrz elementu. Służy ona również do ustawiania nowej zawartości HTML elementu. Jest szeroko stosowana do ustawiania/zmiany zawartości pól danych. Powiedzmy na przykład, że chcesz, aby Twoja strona internetowa aktualizowała temperaturę miasta Mumbai co godzinę, możesz uruchomić skrypt w poniższym przykładzie co godzinę.

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

Przydatne metody obiektu elementowego

HTMLElement.blur() & Element HTML.focus() – metody rozmycia i skupienia służą do usuwania lub skupiania elementu HTML. Metody te są najczęściej używane do przenoszenia skupienia kursora między polami tekstowymi na stronie internetowej do wprowadzania danych.

Element.querySelectorAll – Metoda ta jest podobna do omówionej już metody querySelector dla obiektu dokumentu. Ta metoda jednak ograniczy wyszukiwanie w obrębie elementów potomnych samego elementu.

Debugowanie w DOM

Narzędzia deweloperskie Google Chrome, Mozillę Firefox, Internet Explorer (10 lub nowszy) lub Safari umożliwiają łatwe debugowanie bezpośrednio w przeglądarce. Czasami różne przeglądarki różnie interpretują ten sam znacznik HTML i wtedy debugowanie pomaga sprawdzić DOM zgodnie z interpretacją silnika DOM tej konkretnej przeglądarki.

Załóżmy teraz, że chcesz zmienić wartość temperatury z 26^oOd C do 32^oC w twoim ostatnim przykładzie. Aby to zrobić, wykonamy kilka prostych kroków. Pokazane tutaj zrzuty ekranu pochodzą z Mozilli Firefox– jednak kroki są takie same we wszystkich innych przeglądarkach.

Otwórz plik MyFileNewFile.html (lub inną nazwę, którą nadałeś swojemu plikowi HTML w powyższych tutorialach) za pomocą przeglądarki
Użyj myszki i kliknij prawym przyciskiem myszy wartość temperatury 26^oC i kliknij „Sprawdź element”
Zwróć uwagę, że element, w którym wybrałeś opcję „Sprawdź element”, jest podświetlony w przeglądarce (okno debugera zwykle pojawia się na dole ekranu)
Otwórz element, klikając znajdujący się obok niego pochylony trójkąt
Wybierz, co chcesz edytować i kliknij dwukrotnie. Otrzymasz opcję zmiany tekstu. Postępuj zgodnie z instrukcjami na animowanym obrazku poniżej.
Zwróć uwagę na zmianę treści swojej strony HTML. Możesz teraz zamknąć okno debugowania.

Pamiętaj, że zmiany zostaną zachowane tylko w tej sesji. Gdy tylko ponownie załadujesz lub odświeżysz stronę (naciśnij F5), zmiany zostaną cofnięte. Oznacza to, że nie zmieniłeś rzeczywistego źródła HTML, a jedynie lokalną interpretację przeglądarki.

Jako zabawne ćwiczenie spróbuj wykonać następujące czynności. Otwórz www.facebook.com w przeglądarce i użyj narzędzia debugera, aby uzyskać następujący wynik – zwróć uwagę, że wyświetla się komunikat „Zhakowałem Facebooka”.

Proces debugowania w DOM

Wydarzenia DOM

Czym są zdarzenia w DOM?

Zdarzenia to model programowania, w którym zdarzenia wywołane przez użytkownika (lub wywołane cyklem życia strony przeglądarki) są transmitowane jako komunikaty. Na przykład, gdy strona zakończy ładowanie, wyzwala zdarzenie window.load i podobnie, gdy użytkownik kliknie przycisk wyzwalane jest zdarzenie kliknięcia elementu.

Wiadomości te mogą zostać przechwycone przez każdego JAVASCRIPT kod, a następnie można podjąć zdefiniowaną przez dewelopera akcję. Powiedzmy na przykład, że chcesz, aby liczby na Twojej stronie internetowej były aktualizowane tylko wtedy, gdy użytkownik kliknie przycisk. Możesz to osiągnąć za pomocą dowolnej z następujących metod –

Przypisz akcję do zdarzenia onclick elementu HTML
Przypisz akcję do zdarzenia kliknięcia za 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>

Rozwiązywanie problemów w DOM

P. Skąd mam wiedzieć, czy element istnieje, czy nie?

A. Spróbuj wyszukać element za pomocą dowolnego selektora i sprawdź, czy zwrócony element ma wartość null. Zobacz przykład poniżej –

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

P. Dostaję błąd TypeError: document.getElementByID nie jest funkcją…

A. Upewnij się, że nazwa metody jest dokładnie zgodna z metodą API. Podobnie jak w pytaniu powyżej – jest to getElementById, a nie getElementByID.

P. Jaka jest różnica pomiędzy dziećmi i childNodes?

A. Metoda children pobiera nam kolekcję wszystkich elementów w elemencie wywołującym. Zwracana kolekcja jest typu HTMLCollection. Jednak metoda childNodes pobiera nam kolekcję wszystkich węzłów w elemencie wywołującym. Dodaj poniższe skrypty do naszego przykładu i zobacz różnicę –

Metoda childNodes zwraca 14 elementów

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

Podczas gdy metoda dzieci zwraca tylko 7 elementów

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

P. Dostaję Uncaught TypeError: Nie można odczytać właściwości „innerHTML” niezdefiniowanego...

A. Upewnij się, że wystąpienie HTMLElement, dla którego wywołujesz właściwość innerHTML, zostało ustawione po początkowej deklaracji. Ten błąd występuje zazwyczaj w następującym scenariuszu. Zobacz, jak można uniknąć błędu w następnym bloku kodu…

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

Podsumowanie

W tym samouczku dowiedzieliśmy się, czym jest DOM i jak ważne jest zrozumienie koncepcji tworzenia dynamicznych stron internetowych.
Dotknęliśmy także typów elementów DOM, takich jak Okno, Dokument i Element.
Poznaliśmy kilka przydatnych metod i właściwości DOM dostępnych w każdym rodzaju.
Widzieliśmy, że większość przeglądarek oferuje narzędzia programistyczne umożliwiające zabawę z dowolną stroną internetową dostępną w Internecie – w ten sposób uczymy się debugowania i rozwiązywania problemów z naszą własną witryną internetową.
Pokrótce poruszyliśmy także kwestię mechanizmów zdarzeń DOM.
Na koniec omówiliśmy kilka elementów rozwiązywania problemów w DOM.
Internet jest pełen zasobów DOM. Jeden z najlepszych i aktualnych materiałów referencyjnych jest dostępny w sieci programistów Mozilli. Widzieć - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model