Qu'est-ce que DOM dans Selenium WebDriver : structure, forme complète
Qu'est-ce que DOM dans Selenium Pilote Web ?
DOM in Selenium WebDriver est un composant essentiel du développement Web 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 formalise un standard et le publie – voir ici (https://dom.spec.whatwg.org/).
Ce didacticiel vise à couvrir les concepts de base de la structure du document HTML et comment le manipuler à l'aide de JavaScénario. Nous aborderons les sujets suivants dans ce tutoriel :
- Comprendre la structure du DOM
- Composants du DOM dans Selenium
- Débogage dans DOM
- Événements DOM
- Dépannage dans DOM
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 :
- Développer un contenu qui se met à jour en permanence sans actualiser la page entière – comme le prix actuel de toutes les actions du portefeuille de votre utilisateur
- Développer 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
- Développer un contenu personnalisable par l'utilisateur, comme la possibilité de modifier la mise en page afin que le portefeuille de fonds communs de placement apparaisse avant le portefeuille d'actions.
- Développer du contenu réactif sur votre site Web, permettant ainsi à votre site Web de s'adapter à différents écrans multimédias, à savoir. iPhone, ordinateur de bureau, tablette, etc. automatiquement
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 à
Ouvert 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
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.
Documents
Le document marque le début d'une arborescence DOM. Le document est le premier nœud d'un DOM. Il possède plusieurs méthodes et propriétés, dont la portée s'applique à l'ensemble du document, comme URL, getElementById, querySelector, etc.
Propriétés de l'objet document dans DOM
Document.documentURI et Document.URL – Ils renvoient tous deux l’emplacement actuel du document. Toutefois, si le document n'est pas de type HTML, Document.URL ne fonctionnera pas.
Document.activeElement – Cette méthode renvoie l’élément du DOM qui est actif. Cela signifie que si un utilisateur tape 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) – c'est de loin la méthode la plus pertinente et la plus utile dans la manipulation du DOM. Il est utilisé pour rechercher un élément dans l'arborescence DOM à l'aide de son identifiant unique. La recherche est sensible à la casse, c'est-à-dire que dans l'exemple suivant, le « " L'élément ne peut pas être recherché en utilisant des mots comme IntroDiv ou 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 largement utilisée pour sélectionner un élément supplémentaire en fonction des règles du sélecteur CSS (si vous êtes familier avec la notation $ de jQuery, celui-ci utilise lui-même cette méthode). Nous n'entrerons pas beaucoup dans les sélecteurs CSS. Le sélecteur CSS est un ensemble de règles par lesquelles vous pouvez obtenir une liste d'éléments similaires (basée sur la règle du sélecteur). Nous avons déjà utilisé cette méthode dans la section « Hello World ».
Élément
Objet élément dans DOM
L'élément est tout objet représenté par un nœud dans l'arborescence DOM d'un document. Comme toujours, l'objet Element lui-même n'est qu'un contrat de propriétés, de méthodes et d'événements entre un navigateur et un document HTML. Il existe des types spéciaux d'éléments comme HTMLElement, SVGElement, XULElement, etc. Nous nous concentrerons uniquement sur HTMLElement dans ce didacticiel.
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.
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.
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.
- 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.
-
Utilisez votre souris et faites un clic droit sur la valeur de température 26oC et cliquez sur « Inspecter l'élément »
-
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).
-
Ouvrez l' élément en cliquant sur le triangle incliné à côté de lui
-
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.
-
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 ».
É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 le code, puis une action définie par le développeur peut être entreprise. Supposons, par exemple, que vous souhaitiez que les numéros de votre page Web soient mis à jour uniquement lorsque l'utilisateur clique sur un bouton. Vous pouvez y parvenir par l’une des méthodes suivantes –
- Attribuer une action à l'événement onclick de l'élément HTML
- 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
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'; }
Résumé
- Dans ce didacticiel, nous avons appris ce qu'est un DOM et en quoi c'est un concept essentiel à comprendre pour créer des pages Web dynamiques.
- Nous avons également abordé les types d'éléments DOM tels que Window, Document et Element.
- Nous avons appris quelques méthodes et propriétés DOM utiles disponibles dans chaque type.
- Nous avons vu comment la plupart des navigateurs proposent des outils de développement pour jouer avec n'importe quelle page Web disponible sur Internet – apprenant ainsi à déboguer et à résoudre les problèmes avec notre propre site Web.
- Nous avons également brièvement abordé les mécanismes des événements DOM.
- Enfin, nous avons abordé quelques éléments de dépannage dans le DOM.
- Internet regorge de ressources sur DOM. L'un des documents de référence les meilleurs et les plus récents est disponible sur le réseau de développeurs de Mozilla. Voir - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model