Automatisation du Shadow DOM avec Selenium 4

Qu’est-ce que le DOM ?

Le Document Object Model (DOM) est une interface de programmation pour les documents Web. Il représente la page afin que les programmes puissent modifier la structure, le style et le contenu du document. Le DOM représente le document sous forme de nœuds et d’objets ; de cette façon, les langages de programmation peuvent interagir avec la page.

Une page Web est un document qui peut être affiché dans la fenêtre du navigateur ou en tant que source HTML. Dans les deux cas, il s’agit du même document mais la représentation DOM (Document Object Model) permet de le manipuler.

Structure HTML

Qu’est-ce que Shadow DOM ?

• Un aspect important des éléments personnalisés est l’encapsulation, car un élément personnalisé, par définition, est un élément de fonctionnalité réutilisable : il peut être déposé dans n’importe quelle page Web et devrait fonctionner. Il est donc important que le code exécuté dans la page ne puisse pas accidentellement casser un élément personnalisé en modifiant son implémentation interne.
• Shadow DOM fonctionne en vous permettant d’attacher un modèle d’objet de document (DOM) caché et distinct à un élément. Ce DOM caché est connu sous le nom de « Shadow DOM », et l’élément auquel il est attaché est appelé « Shadow Host ».
• C’est un moyen simple de créer des composants avec CSS et JavaScript isolés.
• Ombre DOM permet d’attacher des arborescences DOM cachées à des éléments de l’arborescence DOM normale – cette arborescence DOM fantôme commence par une racine fantôme, sous laquelle vous pouvez attacher n’importe quel élément, de la même manière que le DOM normal.

Arbre racine de l’ombre

Composants Web et Shadow DOM

• Les composants Web sont un ensemble de technologies qui permettent aux développeurs de créer des éléments HTML personnalisés réutilisables avec des fonctionnalités encapsulées.
• Shadow DOM est une technologie spécifique au sein des composants Web qui permet d’isoler la structure interne (HTML, CSS et JavaScript) d’un élément personnalisé. Cette isolation évite les conflits avec le reste de la page Web.

Piles technologiques intégrant des composants Web (et probablement Shadow DOM) :

• Cadres d’application monopage (SPA) : Des sociétés puissantes comme React, Angular et Vue.js s’appuient fortement sur les composants Web pour créer des composants d’interface utilisateur réutilisables. Bien qu’ils n’exposent pas directement Shadow DOM à des fins de manipulation, ils l’utilisent probablement en interne pour garder les composants autonomes.
• Bibliothèques de composants Web : Des frameworks tels que Polymer et Lit proposent des composants Web prédéfinis et réutilisables que les développeurs peuvent intégrer à leurs applications. Ces composants exploitent presque certainement Shadow DOM pour garantir que leurs styles et leurs fonctionnalités n’entrent pas en conflit avec la page environnante.
• Cadres de composants d’interface utilisateur : Material Design et Bootstrap fournissent des composants d’interface utilisateur prédéfinis qui rationalisent le développement. Bien que tous les composants ne puissent pas utiliser Shadow DOM, certains pourraient en bénéficier pour l’encapsulation de style.

Exemples concrets avec des composants Web (et probablement Shadow DOM) :

• Composants Web Salesforce Lightning (LWC) : LWC exploite largement Shadow DOM pour son architecture de composants, favorisant la modularité et la maintenabilité.
• Interface du lecteur YouTube : L’interface familière du lecteur vidéo sur YouTube utilise probablement Shadow DOM pour isoler ses commandes (lecture, pause, volume) et leurs styles du reste de la page Web.
• Cartes interactives sur Google Maps : Semblable à YouTube, les éléments de la carte interactive et leurs contrôles sur Google Maps pourraient bénéficier de Shadow DOM pour l’isolation, garantissant une expérience utilisateur fluide.
• Composants Tweet de Twitter : Les composants de tweet individuels sur Twitter pourraient potentiellement exploiter Shadow DOM pour encapsuler leur contenu (texte, images, etc.) et leur style, créant ainsi une apparence cohérente.
• Applications de commerce électronique : La création de fiches produits ou de composants de panier d’achat réutilisables avec Shadow DOM peut rationaliser le développement et éviter les conflits de style dans les applications de commerce électronique complexes.

Poignée Shadow Dom en sélénium

1. S’il y a un élément fantôme dans la page Web, nous ne pouvons pas interagir directement avec le code Selenium, normalement si nous localisons l’élément en trouvant la méthode Element (driver.findElement()) , alors il lèvera une exception NosuchElement.
2. En HTML, il peut y avoir plusieurs sections racine fantôme ; les propriétés d’ombre de chaque section sont complètement cachées du DOM principal réel.
3. Nous ne pouvons donc pas accéder aux éléments fantômes directement depuis le DOM principal.
4. Afin de surmonter cette situation, nous devons utiliser Javascript deux méthodes :

• a) querySelector()
• b) propriété shadowRoot

Exemple de DOM HTML de base

Dans la capture d’écran ci-dessous, le champ de texte est facilement accessible via XPath car il n’est pas disponible sous le Shadow DOM dans HTML DOM. Nous pouvons voir que le résultat est 1 sur 1 correspondant.

DOM HTML

Exemple de Shadow DOM

Dans la capture d’écran ci-dessous, nous tapons pour inspecter le bouton « Demander OTP » via XPath, mais le résultat correspond à 0 car l’élément est disponible sous la racine fantôme.

Exemple de DOM fantôme

Comment inspecter les éléments Shadow DOM dans Selenium

La gestion des éléments shadow DOM dans Selenium 4 implique l’utilisation de la méthode «execute_script» de Javascript Executor pour interagir avec les éléments shadow DOM.

Étape 1: Ouvrez la console dans l’outil de développement et créez la chaîne de chemin de l’élément à l’aide de Javascript ‘document.querySelector() et shadowRoot dans la console.

Chemin de l’élément utilisant document.querySelector()

Étape 2: Convertissez la chaîne en WebElement à l’aide de la méthode JavaScriptExecutor ‘executeScript()’.

((JavascriptExecutor) driver).executeScript(value);

Étape 3: Effectuez l’action sur le WebElement à l’aide de la méthode Javascript Click.

((JavascriptExecutor) driver).executeScript("arguments[0].click();", saveButton);

Vous trouverez ci-dessous les trois lignes de code à écrire pour automatiser chaque élément Web qui est Shadow DOM dans le framework Selenium Java :

Code final

Conclusion

# L’approche dont nous avons discuté ci-dessus est utile si vous disposez d’un framework Selenium existant. [with any technology say Java/Python etc.] et votre application Web a utilisé Shadow DOM sur quelques pages Web.

# Si votre application Web a largement utilisé Shadow DOM et que vous devez pourtant lancer votre cadre d’automatisation, je vous suggère d’opter pour l’outil WebdriverIO, qui prend implicitement en charge les éléments Shadow DOM {pour plus de détails, veuillez consulter les références}.

# Au-delà des exemples ci-dessus, toute application Web qui donne la priorité au développement basé sur les composants et à l’isolation des styles peut potentiellement bénéficier de Shadow DOM. C’est un outil puissant pour créer des interfaces Web modulaires, réutilisables et maintenables.

J’espère qu’à l’avenir, Selenium fournira éventuellement une prise en charge complète des éléments personnalisés Shadow DOM.

Les références

a) Comprendre Shadow DOM :

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

b) Actions sur les éléments Shadow DOM à l’aide de WebdriverIO :

https://webdriver.io/blog/2019/02/22/shadow-dom-support.html

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE