In cosa consiste il DOM Selenium WebDriver: struttura, modulo completo

By: Krishna rungta Krishna rungta
Hours aggiornato

In cosa consiste il DOM Selenium WebDriver?

DOM in Selenium WebDriver è un componente essenziale dello sviluppo web che utilizza HTML5 e JavaScript. La forma completa di DOM è Document Object Model. DOM non è un concetto informatico. È un semplice set di interfacce standardizzate tra gli sviluppatori web per accedere e manipolare documenti in HTML o XML utilizzando JavaScript.

Questi standard aiutano gli sviluppatori a creare una pagina web senza doversi preoccupare dei dettagli di implementazione. Alcune delle organizzazioni coinvolte nella standardizzazione di queste interfacce sono come Mozilla, Apple, Microsoft, Google, Adobe ecc. Tuttavia, è il W3C che formalizza uno standard e lo pubblica – vedi qui (https://dom.spec.whatwg.org/).

Questo tutorial mira a coprire i concetti di base della struttura del documento HTML e come manipolarla utilizzando JavaScript. In questo tutorial tratteremo i seguenti argomenti:

Comprendere la struttura del DOM

Dovrai comprendere la struttura del DOM se stai costruendo un sito web che prevede l'utilizzo di script JavaScript. La comprensione del DOM è ancora più critica se stai eseguendo una o tutte le seguenti attività complicate nel tuo sito web:

  1. Sviluppareping Contenuti che si aggiornano continuamente senza ricaricare l'intera pagina, come ad esempio il prezzo corrente di tutte le azioni nel portafoglio dell'utente.
  2. Sviluppareping interazioni utente avanzate come l'aggiunta o la modifica dinamica dei contenuti, ad esempio la possibilità di aggiungere altri titoli al proprio portafoglio.
  3. Sviluppareping Contenuti personalizzabili dall'utente, come la possibilità di modificare il layout in modo che il portafoglio di fondi comuni di investimento appaia prima del portafoglio azionario.
  4. Sviluppareping Contenuti responsivi nel tuo sito web, che consentono al sito di adattarsi automaticamente a diversi schermi, come iPhone, computer desktop, tablet, ecc.

Una pagina HTML di base

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

Come appare al PARSER DOM di un browser?

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

Come si accede all'elemento corpo?

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

Come si dice "Ciao mondo"?

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

Alla fine apparirà l'intero file HTML

Apri Windows Blocco note e incolla il seguente contenuto al suo interno. Quindi salva il file come "MyFileNewFile.html" (assicurati che il nome del file termini con .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>

Alla fine basta aprire il file utilizzando uno qualsiasi dei tuoi browser preferiti e vedrai "Hello World!"

Componenti del DOM in Selenium

Di seguito sono riportati i componenti principali del DOM Selenium Driver Web:

  • Finestra
  • funzionalità di
  • elemento

Finestra

Window è l'oggetto che contiene l'oggetto documento in un DOM. Si trova sopra ogni cosa.

Per accedere a un oggetto finestra da un determinato documento

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

In un ambiente a schede ogni scheda ha il proprio oggetto finestra. Tuttavia, se si desidera catturare e implementare eventi come window.resizeTo e window.resizeBy, questi si applicano all'intera finestra e non solo alla scheda.

Proprietà dell'oggetto finestra nel DOM

window.localStorage – dà accesso alla memoria locale del browser. La memoria locale può essere utilizzata per archiviare e recuperare dati da una sessione.

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

apri.finestra - ottiene il riferimento all'oggetto finestra che ha aperto questa finestra (facendo clic su un collegamento o utilizzando il metodo window.open)

Metodi utili dell'oggetto Window

finestra.alert() – visualizza una finestra di dialogo di avviso con un messaggio.

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

Ci sono molti eventi utili esposti dall'oggetto finestra. Ne discuteremo nella sezione "Eventi" sotto Argomenti avanzati

funzionalità di

Il documento segna l'inizio di un albero DOM. Il documento è il primo nodo in un DOM. Ha diversi metodi e proprietà, il cui ambito si applica all'intero documento come URL, getElementById, querySelector ecc.

Proprietà dell'oggetto documento nel DOM

Documento.documentURI and Documento.URL – Entrambi restituiscono la posizione corrente del documento. Se, tuttavia, il documento non è di tipo Documento HTML.URL non funzionerà.

Document.activeElement – Questo metodo restituisce l'elemento nel DOM che è in focus. Ciò significa che se un utente sta digitandoping In una casella di testo, Document.activeElement restituirà un riferimento a quella casella di testo.

Titolo del documento – Serve per leggere o impostare un titolo di un determinato documento.

Metodi utili dell'oggetto documento

Document.getElementById(ID stringa) – questo è di gran lunga il metodo più rilevante e utile nella manipolazione del DOM. Viene utilizzato per cercare un elemento nell'albero del DOM utilizzando il suo identificatore univoco. La ricerca è sensibile alle maiuscole e alle minuscole, ovvero nell'esempio seguente " " l'elemento non può essere ricercato utilizzando parole come IntroDiv o introdiv o iNtrodiv ecc.

<!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(selettore di stringhe) – questo è un altro metodo ampiamente utilizzato per selezionare un ulteriore elemento in base alle regole del selettore CSS (se hai familiarità con la notazione $ di jQuery, che a sua volta utilizza questo metodo). Non approfondiremo molto i selettori CSS. Il selettore CSS è un insieme di regole in base alle quali è possibile ottenere un elenco di elementi simili (in base alla regola del selettore). Abbiamo già utilizzato questo metodo nella sezione "Hello World".

elemento

Oggetto elemento nel DOM

Oggetto elemento nel DOM

Un elemento è qualsiasi oggetto rappresentato da un nodo in un albero DOM di un documento. Come sempre, l'oggetto Elemento stesso è solo un contracSi tratta di uno scambio di proprietà, metodi ed eventi tra un browser e un documento HTML. Esistono diversi tipi di elementi, come HTMLElement, SVGElement, XULElement, ecc. In questo tutorial ci concentreremo solo su HTMLElement.

Proprietà dell'oggetto elemento nel DOM

Elemento.id – Questa proprietà può essere utilizzata per impostare o leggere "ID" (un identificatore univoco) per un elemento HTML. L'ID deve essere univoco tra gli elementi in un albero DOM. Come accennato in precedenza, l'ID viene utilizzato anche dal metodo Document.getElementById per selezionare un particolare oggetto Element all'interno di un albero DOM.

HTMLElement.contentModificabile – la proprietà contentEditable di un elemento determina se il contenuto di quell'elemento è modificabile/modificabile. Questa proprietà può essere impostata come mostrato nello script qui sotto. Questa proprietà può anche essere usata per determinare se un dato elemento è modificabile o meno. Prova il seguente script all'interno di qualsiasi corpo HTML e noterai che puoi modificare qualsiasi contenuto del corpo.

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

Elemento.innerHTML – innerHTML è un'altra proprietà importante che utilizziamo per accedere al contenuto HTML all'interno di un elemento. Viene anche utilizzata per impostare un nuovo contenuto HTML dell'elemento. È ampiamente utilizzata per impostare/modificare il contenuto dei campi dati. Diciamo ad esempio che vuoi che la tua pagina web aggiorni la temperatura di Mumbai City ogni ora, puoi eseguire lo script nel seguente esempio ogni ora.

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

Metodi utili dell'oggetto elemento

Elemento HTML.blur() & Elemento HTML.focus() – i metodi blur e focus sono usati per rimuovere o dare focus a un elemento HTML rispettivamente. Questi metodi sono usati più ampiamente per spostare il focus di un cursore tra le caselle di testo in una pagina web di immissione dati.

Elemento.querySelectorAll – Questo metodo è simile al già discusso metodo querySelector per l'oggetto documento. Questo metodo però ne limiterà la ricerca ai discendenti dell'elemento stesso.

Debug nel DOM

Strumenti per sviluppatori di Google Chrome, Mozilla Firefox, Internet Explorer (10 o superiore) o Safari consentono un facile debug direttamente all'interno del browser. A volte browser diversi interpretano lo stesso markup HTML in modo diverso ed è allora che il debug ti aiuta a ispezionare il DOM così come è stato interpretato dal motore DOM di quel particolare browser.

Ora, supponiamo che tu voglia cambiare il valore della temperatura da 26oC a 32oC nel tuo ultimo esempio. Per farlo faremo pochi semplici passi. Le schermate mostrate qui provengono da Mozilla Firefox– tuttavia, i passaggi sono gli stessi in tutti gli altri browser.

  1. Apri MyFileNewFile.html (o qualunque nome tu abbia dato al tuo file HTML nei tutorial sopra) utilizzando il tuo browser
  2. Usa il mouse e clicca con il tasto destro sul valore della temperatura 26oC e fare clic su “Ispeziona elemento”

    Debug nel DOM

  3. Tieni presente che l'elemento in cui hai scelto "Ispeziona elemento" viene mostrato evidenziato nel tuo browser (la finestra del debugger viene solitamente visualizzata nella parte inferiore dello schermo)

    Debug nel motore DOM

  4. Apri l' elemento facendo clic sul triangolo inclinato accanto ad esso

    Processo di debug nel DOM

  5. Seleziona ciò che vuoi modificare e fai doppio clic su di esso. Avrai la possibilità di cambiare il testo. Fai come indicato nell'immagine animata qui sotto.

    Debug nel DOM

  6. Nota il cambiamento nel contenuto della tua pagina HTML. Ora puoi chiudere la finestra di debug.

    Tieni presente che le modifiche verranno mantenute solo per questa sessione. Non appena ricarichi o aggiorni (premi F5) la pagina, le modifiche verranno ripristinate. Ciò indica che non hai modificato l'effettiva sorgente HTML ma solo l'interpretazione locale del tuo browser.

    Come esercizio divertente prova a fare quanto segue. Apri www.facebook.com nel tuo browser e usa lo strumento di debug per ottenere il seguente risultato: nota come dice "Ho hackerato Facebook".

Processo di debug nel DOM

Eventi DOM

Cosa sono gli eventi nel DOM?

Gli eventi sono un modello di programmazione in cui gli incidenti attivati ​​dall'utente (o attivati ​​dal ciclo di vita della pagina del browser) vengono trasmessi come messaggi. Ad esempio, quando una pagina ha terminato il caricamento, attiva l'evento window.load e allo stesso modo quando l'utente fa clic su un pulsante l'evento clic dell'elemento viene attivato.

Questi messaggi possono essere intercettati da chiunque JavaCopione codice e quindi può essere intrapresa un'azione definita dallo sviluppatore. Diciamo ad esempio che vuoi che i numeri sulla tua pagina web vengano aggiornati solo quando l'utente clicca su un pulsante. Puoi ottenerlo con uno dei seguenti metodi:

  1. Assegna l'azione all'evento onclick dell'elemento HTML
  2. Assegna l'azione all'evento clic utilizzando il metodo addEventListener

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

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

Risoluzione dei problemi nel DOM

D. Come faccio a sapere se un elemento esiste o no?

A. Prova a cercare l'elemento utilizzando uno qualsiasi dei selettori e controlla se l'elemento restituito è nullo. Vedi l'esempio qui sotto –

ARTICOLI CORRELATI

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

D. Ottengo TypeError: document.getElementByID non è una funzione...

A. Assicurati che il nome del metodo corrisponda esattamente al metodo API. Come nella domanda precedente: è getElementById e non getElementByID.

D. Qual è la differenza tra figli e childNode?

A. Il metodo children ci fornisce la raccolta di tutti gli elementi all'interno dell'elemento chiamante. La raccolta restituita è di tipo HTMLCollection. Tuttavia, il metodo childNodes ci fornisce la raccolta di tutti i nodi all'interno dell'elemento chiamante. Aggiungi i seguenti script al nostro esempio e osserva la differenza:

Il metodo childNodes restituisce 14 elementi

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

Mentre il metodo children restituisce solo 7 elementi

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

D. Ricevo Uncaught TypeError: Impossibile leggere la proprietà 'innerHTML' di undefinito...

A. Assicurati che l'istanza di HTMLElement su cui stai chiamando la proprietà innerHTML sia stata impostata dopo la dichiarazione iniziale. Questo errore si verifica generalmente nello scenario seguente. Guarda come l'errore può essere evitato nel blocco di codice successivo...

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

Sintesi

  • In questo tutorial abbiamo imparato cos'è un DOM e come sia un concetto essenziale da comprendere per costruire pagine web dinamiche.
  • Abbiamo anche toccato i tipi di elementi DOM come Window, Document ed Element.
  • Abbiamo appreso alcuni utili metodi e proprietà DOM disponibili all'interno di ogni tipo.
  • Abbiamo visto come la maggior parte dei browser offra strumenti di sviluppo per giocare con qualsiasi pagina web disponibile su Internet, imparando così a eseguire il debug e a risolvere i problemi con il nostro sito web.
  • Abbiamo anche accennato brevemente ai meccanismi degli eventi DOM.
  • Infine abbiamo trattato alcuni elementi per la risoluzione dei problemi nel DOM.
  • Internet è pieno di risorse sul DOM. Uno dei materiali di riferimento migliori e aggiornati è disponibile presso la rete di sviluppatori di Mozilla. Vedere - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Riassumi questo post con: