In cosa consiste il DOM Selenium WebDriver? Struttura e forma completa

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/).

Le sezioni seguenti trattano la struttura del documento, gli oggetti esposti dal DOM e come ispezionarli. Mozilla mantiene il riferimento API corrente sul Pagine del modello a oggetti del documento MDN.

Ogni Selenium il localizzatore si risolve rispetto a questo stesso albero, quindi la struttura sottostante è ciò che trovaElemento() ricerche.

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

Ciascun componente si trova a un livello diverso dell'albero, partendo da quello più esterno.

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 DOM. utilizzando il suo identificatore univoco. La ricerca è sensibile alle maiuscole e minuscole, cioè nell'esempio seguente " L'elemento " non può essere cercato utilizzando parole come IntroDiv, introdiv, 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 altro elemento in base a Regole del selettore CSS (Se hai familiarità con la notazione $ di jQuery, sappi che anche quella utilizza questo metodo). Non approfondiremo molto i selettori CSS. Un selettore CSS è un insieme di regole che permettono di ottenere un elenco di elementi simili (in base alla regola del selettore). Abbiamo già utilizzato questo metodo nella sezione "Hello World".

elemento

Il diagramma seguente mostra come un oggetto Element si posiziona all'interno dell'albero DOM, al di sotto del nodo del documento.

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.

Nota di accuratezza: il blocco sopra è riprodotto come pubblicato. Il codice funzionante utilizza documento con una d minuscola e la HTML interno proprietà, non setInnerHTML().

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.

Nota del browser: Internet Explorer è andato in pensione nel 2022, quindi i suoi DevTools ora sono disponibili in Microsoft EdgeI passaggi seguenti rimangono invariati; gli Strumenti per sviluppatori si aprono con F12.

Ora, supponiamo che tu voglia cambiare il valore della temperatura da 26^oC a 32^oC 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 26^oC e fare clic su “Ispeziona elemento”

   

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)

   

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

   

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.

   

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

Il risultato di quell'esercizio è simile alla schermata qui sotto.

La lettura e la modifica dei nodi riguardano le pagine statiche. Le pagine interattive, invece, reagiscono anche alle azioni dell'utente.

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 poi un azione definita dallo sviluppatore è possibile farlo. Supponiamo, ad esempio, che tu voglia che i numeri sulla tua pagina web si aggiornino solo quando l'utente fa clic su un pulsante. Puoi ottenere questo risultato 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

Nota relativa alle API legacy: Due delle risposte qui sotto utilizzano document.write(). Il codice viene comunque eseguito, ma una chiamata successiva al caricamento della pagina cancella il documento. È preferibile utilizzare console.log() o innerHTML.

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 –

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

DOMANDE FREQUENTI