Qu'est-ce que DOM dans Selenium WebDriver ? Structure et forme complète

Par : Krishna Rungta Krishna Rungta
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Le modèle objet de document expose une page HTML à JavaLe script sous forme d'arbre d'objets, permettant aux scripts et Selenium WebDriver permet de lire, localiser et modifier n'importe quel élément de la page pendant que le navigateur est en cours d'exécution.

  • (I.e. Formulaire complet : DOM signifie Document Object Model, une interface normalisée par le W3C pour les documents HTML et XML.
  • ☑️ Structure de l'arbre : Chaque balise devient un nœud, ainsi html, head, body, article et p forment une hiérarchie parent-enfant.
  • ✅ Trois objets : La fenêtre englobe l'onglet, le document désigne la racine de l'arborescence et l'élément représente chaque balise individuelle.
  • 🧪 Méthodes fondamentales : getElementById, querySelector et querySelectorAll récupèrent les nœuds ; innerHTML lit et réécrit leur contenu.
  • ️ Débogage: Les outils de développement du navigateur exposent l'arbre analysé, et les modifications qui y sont apportées ne durent que jusqu'au rechargement de la page.
  • (I.e. Evénements: Les actions telles que cliquer et charger diffusent des messages que les attributs onclick ou addEventListener peuvent intercepter.
En savoir plus

Qu'est-ce que DOM dans Selenium Structure et forme complète de WebDriver

Qu'est-ce que DOM dans Selenium Pilote Web ?

DOM in Selenium WebDriver est un élément essentiel du développement web en utilisant HTML5 et JavaScript. La forme complète de DOM est Document Object Model. DOM n'est pas un concept informatique. Il s'agit d'un simple ensemble d'interfaces standardisées parmi les développeurs Web pour accéder et manipuler des documents au format HTML ou XML à l'aide de JavaScénario.

Ces normes aident les développeurs à créer une page Web sans se soucier des détails d'implémentation. Certaines des organisations impliquées dans la normalisation de ces interfaces sont Mozilla, Apple, Microsoft, Google, Adobe etc. Cependant, c'est le W3C qui officialise une norme et la publie – voir ici (https://dom.spec.whatwg.org/).

Les sections ci-dessous traitent de la structure du document, des objets exposés par le DOM et de la manière de les inspecter. Mozilla tient à jour la documentation de référence de l'API sur le site web de Mozilla. Pages du modèle objet de document MDN.

chaque Selenium Le localisateur résout par rapport à ce même arbre, donc la structure ci-dessous est ce que trouverÉlément() recherches.

Comprendre la structure du DOM

Vous devrez comprendre la structure du DOM si vous créez un site Web impliquant des scripts utilisant JavaScript. La compréhension du DOM est encore plus importante si vous effectuez une ou plusieurs des tâches complexes suivantes sur votre site Web :

  1. Développerping Un contenu qui se met à jour en continu sans recharger la page entière, comme le cours actuel de toutes les actions du portefeuille de votre utilisateur.
  2. Développerping des interactions utilisateur avancées telles que l'ajout ou la modification dynamique de contenu – comme la possibilité d'ajouter plus d'actions à votre portefeuille
  3. Développerping contenu personnalisable par l'utilisateur – comme la possibilité de modifier la mise en page pour que le portefeuille de fonds communs de placement apparaisse avant le portefeuille d'actions
  4. Développerping Le contenu adaptatif de votre site web lui permet de s'adapter automatiquement aux différents écrans (iPhone, ordinateur, tablette, etc.).

Une page HTML de 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>

À quoi ressemble-t-il pour le DOM PARSER d'un navigateur ?

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

Comment accéder à l'élément corps ?

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

Comment dit-on « Bonjour tout le monde » ?

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

Finalement, le fichier HTML entier ressemblera à

Ouvrez Windows Ouvrez le Bloc-notes et collez le contenu suivant à l'intérieur. Enregistrez ensuite le fichier sous « MonFichierNouveauFichier.html » (assurez-vous que le nom de votre fichier se termine par .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>

Enfin, ouvrez simplement le fichier en utilisant l'un de vos navigateurs préférés et vous verrez « Hello World ! »

Composants du DOM dans Selenium

Vous trouverez ci-dessous les principaux composants du DOM : Selenium Pilote Web :

  • Vitrine
  • Documents
  • Élément

Chaque composant se situe à un niveau différent de l'arbre, en commençant par le plus extérieur.

Vitrine

Window est l'objet qui contient l'objet document dans un DOM. Il se trouve au-dessus de tout.

Pour accéder à un objet fenêtre à partir d'un document donné

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

Dans un environnement à onglets, chaque onglet possède son propre objet fenêtre. Cependant, si l'on souhaite capturer et implémenter des événements tels que window.resizeTo et window.resizeBy, ils s'appliquent à la fenêtre entière et non à l'onglet seul.

Propriétés de l'objet Window dans DOM

window.localStorage – donne accès au stockage local du navigateur. Le stockage local peut être utilisé pour stocker et récupérer les données d'une session.

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

window.opener - obtient la référence à l'objet window qui a ouvert cette fenêtre (soit en cliquant sur un lien, soit en utilisant la méthode window.open)

Méthodes utiles de l'objet fenêtre

fenêtre.alerte() – affiche une boîte de dialogue d'alerte avec un message.

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

Il existe de nombreux événements utiles exposés par l'objet window. Nous en discuterons dans la section « Événements » sous Sujets avancés.

Ne manquez pas:

Documents

Un document marque le début d'un arbre DOM. Il s'agit du premier nœud du DOM. Il possède plusieurs méthodes et propriétés dont la portée s'applique à l'ensemble du document. URL, getElementById, querySelector etc.

Propriétés de l'objet document dans DOM

Document.documentURI et Document.URL – Toutes deux renvoient l'emplacement actuel du document. Toutefois, si le document n'est pas de type HTML.URL ne fonctionnera pas.

Document.activeElement Cette méthode renvoie l'élément DOM qui a le focus. Cela signifie que si un utilisateur est en train de taperping Dans une zone de texte, Document.activeElement renverra une référence à cette zone de texte.

Titre du document – Ceci est utilisé pour lire ou définir un titre d’un document donné.

Méthodes utiles d'objet de document

Document.getElementById (ID de chaîne) – Il s'agit de loin de la méthode la plus pertinente et la plus utile pour la manipulation du DOM. Elle permet de rechercher un élément dans l'arbre DOM. en utilisant son identifiant uniqueLa recherche est sensible à la casse, c'est-à-dire que dans l'exemple suivant, « L'élément « » ne peut pas être recherché à l'aide de mots tels que IntroDiv, introdiv ou iNtrodiv, etc.

<!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 (sélecteur de chaîne) – Il s'agit d'une autre méthode couramment utilisée pour sélectionner un ou plusieurs éléments en fonction de règles des sélecteurs CSS (Si vous connaissez la notation $ de jQuery, sachez qu'elle utilise elle-même cette méthode). Nous n'aborderons pas en détail les sélecteurs CSS. Un sélecteur CSS est un ensemble de règles permettant d'obtenir une liste d'éléments similaires (selon la règle de sélection). Nous avons déjà utilisé cette méthode dans la section « Hello World ».

Élément

Le diagramme ci-dessous montre comment un objet Element se situe à l'intérieur de l'arbre DOM, sous le nœud document.

L'objet élément est représenté comme un nœud dans la hiérarchie de l'arbre DOM.

Objet élément dans DOM

Un élément est tout objet représenté par un nœud dans l'arbre DOM d'un document. Comme toujours, l'objet Element lui-même n'est qu'une construction.tracIl s'agit d'un ensemble de propriétés, de méthodes et d'événements permettant d'interagir entre un navigateur et un document HTML. Il existe différents types d'éléments, tels que HTMLElement, SVGElement, XULElement, etc. Ce tutoriel se concentrera uniquement sur HTMLElement.

Propriétés de l'objet élément dans le DOM

Élément.id – Cette propriété peut être utilisée pour définir ou lire « ID » (un identifiant unique) pour un élément HTML. L'ID doit être unique parmi les éléments d'une arborescence DOM. Comme mentionné précédemment, l'ID est également utilisé par la méthode Document.getElementById pour sélectionner un objet Element particulier dans une arborescence DOM.

HTMLElement.contentEditable – la propriété contentEditable d'un élément détermine si le contenu de cet élément est modifiable/éditable. Cette propriété peut être définie comme indiqué dans le script ci-dessous. Cette propriété peut également être utilisée pour déterminer si un élément donné est modifiable ou non. Essayez le script suivant dans n'importe quel corps HTML et vous remarquerez que vous pouvez modifier n'importe quel contenu du corps.

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

Élément.innerHTML – innerHTML est une autre propriété importante que nous utilisons pour accéder au contenu HTML à l'intérieur d'un élément. Il est également utilisé pour définir le nouveau contenu HTML de l'élément. Il est largement utilisé pour définir/modifier le contenu des champs de données. Supposons, par exemple, que vous souhaitiez que votre page Web mette à jour la température de la ville de Mumbai toutes les heures. Vous pouvez exécuter le script de l'exemple suivant toutes les heures.

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

Méthodes utiles de l'objet élément

HTMLElement.blur() & HTMLElement.focus() – Les méthodes de flou et de focus sont utilisées respectivement pour supprimer le focus ou donner le focus à un élément HTML. Ces méthodes sont les plus largement utilisées pour déplacer le focus d’un curseur entre les zones de texte d’une page Web de saisie de données.

Element.querySelectorAll – Cette méthode est similaire à la méthode querySelector déjà évoquée pour l’objet document. Cette méthode limitera cependant sa recherche aux descendants de l'élément lui-même.

Note sur l'exactitude : Le bloc ci-dessus est reproduit tel que publié. Le code fonctionnel utilise document avec un d minuscule et le innerHTML propriété, et non setInnerHTML().

Débogage dans DOM

Outils de développement de Google ChromeMozilla Firefox, Internet Explorer (10 ou supérieur) ou Safari permettent un débogage facile directement dans le navigateur. Parfois, différents navigateurs interprètent différemment le même balisage HTML et c'est à ce moment-là que le débogage vous aide à inspecter le DOM tel qu'il a été interprété par le moteur DOM de ce navigateur particulier.

Note du navigateur : Internet Explorer a été retiré du marché en 2022, ses outils de développement sont donc désormais hébergés sur [nom de l'environnement/du système/etc.]. Microsoft EdgeLes étapes ci-dessous restent inchangées ; les outils de développement s’ouvrent avec F12.

Maintenant, disons que vous souhaitez modifier la valeur de température de 26oC 32oC dans votre dernier exemple. Nous prendrons quelques mesures simples pour y parvenir. Les captures d'écran présentées ici proviennent de Mozilla Firefox– cependant, les étapes sont les mêmes dans tous les autres navigateurs.

  1. Ouvrez MyFileNewFile.html (ou quel que soit le nom que vous avez donné à votre fichier HTML dans les didacticiels ci-dessus) à l'aide de votre navigateur.
  2. Utilisez votre souris et faites un clic droit sur la valeur de température 26oC et cliquez sur « Inspecter l'élément »

    Faites un clic droit sur la valeur de température et choisissez Inspecter l'élément dans le navigateur

  3. Notez que l'élément pour lequel vous avez choisi « Inspecter l'élément » est affiché en surbrillance dans votre navigateur (la fenêtre du débogueur apparaît généralement en bas de l'écran).

    Les outils de développement du navigateur mettent en évidence l'élément span inspecté dans l'arbre DOM.

  4. Ouvrez l' élément en cliquant sur le triangle incliné à côté de lui

    Développer l'élément span dans l'inspecteur DOM à l'aide du bouton triangulaire

  5. Sélectionnez ce que vous souhaitez modifier et double-cliquez dessus. Vous aurez la possibilité de modifier le texte. Faites comme indiqué dans l’image animée ci-dessous.

    Démonstration animée de la modification de la valeur du texte DOM de 26 à 32 dans l'inspecteur

  6. Notez le changement dans le contenu de votre page HTML. Vous pouvez fermer la fenêtre de débogage maintenant.

    Notez que vos modifications ne seront conservées que pour cette session. Dès que vous rechargez ou actualisez (appuyez sur F5), la page, les modifications seront annulées. Cela indique que vous n'avez pas modifié la source HTML réelle mais simplement l'interprétation locale de votre navigateur.

    Comme exercice amusant, essayez de faire ce qui suit. Ouvrir www.facebook.com dans votre navigateur et utilisez l’outil de débogage pour suivre le résultat – remarquez comment il est écrit « J’ai piraté Facebook ».

Le résultat de cet exercice ressemble à la capture d'écran ci-dessous.

Page Facebook modifiée en direct dans l'inspecteur du navigateur pour afficher « J'ai piraté Facebook ».

La lecture et la modification des nœuds concernent les pages statiques. Les pages interactives réagissent également aux actions de l'utilisateur.

Événements DOM

Que sont les événements dans le DOM ?

Les événements sont un modèle de programmation dans lequel les incidents déclenchés par l'utilisateur (ou déclenchés par le cycle de vie de la page du navigateur) sont diffusés sous forme de messages. Par exemple, lorsqu'une page a fini de se charger, elle déclenche l'événement window.load et de la même manière lorsque l'utilisateur clique sur un bouton qui L'événement click de l'élément est déclenché.

Ces messages peuvent être interceptés par n'importe quel Javascénario code puis un action définie par le développeur Cela peut être réalisé. Par exemple, si vous souhaitez que les chiffres de votre page web se mettent à jour uniquement lorsque l'utilisateur clique sur un bouton, vous pouvez y parvenir par l'une des méthodes suivantes :

  1. Attribuer une action à l'événement onclick de l'élément HTML
  2. Attribuer une action à l'événement click à l'aide de la méthode addEventListener

Méthode 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>

Méthode 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>

Dépannage dans DOM

Note concernant l'ancienne API : Les deux réponses ci-dessous utilisent `document.write()`. Le code s'exécute toujours, mais un appel après le chargement de la page efface le document. Préférez `console.log()` ou `innerHTML`.

Q. Comment savoir si un élément existe ou non ?

A. Essayez de rechercher l'élément à l'aide de l'un des sélecteurs et vérifiez si l'élément renvoyé est nul. Voir exemple ci-dessous –

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

Q. J'obtiens TypeError : document.getElementByID n'est pas une fonction…

A. Assurez-vous que le nom de la méthode correspond exactement à la méthode API. Comme dans la question ci-dessus, il s'agit de getElementById et non de getElementByID.

Q. Quelle est la différence entre les enfants et les childNodes ?

A. La méthode children nous récupère la collection de tous les éléments de l’élément appelant. La collection renvoyée est de type HTMLCollection. Cependant, la méthode childNodes nous récupère la collection de tous les nœuds de l'élément appelant. Ajoutez les scripts suivants à notre exemple et voyez la différence –

La méthode childNodes renvoie 14 éléments

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

Alors que la méthode children ne renvoie que 7 éléments

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

Q. J'obtiens Uncaught TypeError : Impossible de lire la propriété 'innerHTML' de undefined…

A. Assurez-vous que l'instance de HTMLElement sur laquelle vous appelez la propriété innerHTML a été définie après la déclaration initiale. Cette erreur se produit généralement dans le scénario suivant. Voyez comment l’erreur peut être évitée dans le prochain bloc de code…

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

FAQ

Le Shadow DOM est une fonctionnalité du navigateur qui confère à un composant son propre sous-arbre isolé, évitant ainsi les fuites de styles et de scripts. Le Virtual DOM est une technique de bibliothèque, utilisée par React et Vue, qui compare une copie en mémoire afin de minimiser les mises à jour réelles.

WebDriver envoie un localisateur au navigateur, qui parcourt l'arbre analysé jusqu'à ce qu'une correspondance apparaisse, puis renvoie un descripteur WebElement. Des localisateurs Des éléments tels que l'identifiant, le nom, le sélecteur CSS et XPath décrivent simplement différentes règles de recherche sur les mêmes nœuds.

Utilisez `getElementById` lorsque la cible possède un identifiant unique ; c’est la méthode la plus rapide et elle renvoie un seul nœud. Utilisez `querySelector` ou `querySelectorAll` lorsque la correspondance dépend des classes, des attributs ou d’un chemin parent-enfant.

Le code s'exécute toujours, mais les navigateurs le déconseillent. Appeler `document.write()` après le chargement de la page remplace l'intégralité du document et bloque l'analyse syntaxique pendant le chargement. Utilisez plutôt `console.log()`. tracing, ou innerHTML pour insérer du contenu.

Le DOM modélise le contenu de la page : l’en-tête, le corps et chaque balise. Le modèle objet du navigateur (BOM) couvre le navigateur, notamment le navigateur, l’écran, la localisation et l’historique. L’objet `window` est le point de convergence des deux.

Internet Explorer a été retiré du marché en 2022 ; ses outils de développement sont donc désormais hébergés dans Internet Explorer. Microsoft EdgeLe flux de travail reste inchangé : appuyez sur F12 ou cliquez avec le bouton droit sur un élément, choisissez Inspecter, puis modifiez le nœud dans le panneau qui s’ouvre.

Les outils d'apprentissage automatique évaluent simultanément plusieurs attributs de nœuds ; ainsi, lorsqu'une classe ou un identifiant change, ils réidentifient le même élément au lieu de générer une erreur. Les plateformes de test auto-réparatrices s'appuient sur ce mécanisme en plus des requêtes DOM classiques.

Copilot Ce générateur de code intègre les écouteurs d'événements, les chaînes de sélection de requêtes et les boucles de parcours directement depuis un commentaire, et se base sur des modèles courants. Il est impératif de toujours tester la suggestion sur la page réelle, car le générateur ne peut pas analyser votre balisage.

Résumez cet article avec :