Sélénium et Shadow DOM

polymer

Les applications développées avec la librairie Polymer ont un DOM différent. Le contenu du DOM est simplifié, dé-complexifié. Une partie du DOM est encapsulée dans "#shadow-root" : c'est le Shadow DOM. Cette librairie permet de créer des Web Components qui permettent d'avoir des éléments HTML personnalisés. Ainsi on masque l'implémentation des composants internes.

Dans cet article je vais vous présenter comment sélectionner ces éléments HTML en fonction du navigateur, qu'il soit compatible ou non avec Shadow DOM.

Exemple de DOM avec un Shadow DOM :

ex_dom

 

La librairie est compatible uniquement sur certains navigateurs (voir lien CanIUse) :

  • Compatible sur Chrome depuis la version 25 ;
  • Compatible sur Opera depuis la version 15 ;
  • Pas compatible sur Firefox (donc pas de DOM encapsulé dans un élément "shadow-root").

La sélection de ces éléments ne va donc pas se faire de la même manière sur un navigateur supportant ou ne supportant pas Shadow DOM.

Sur un navigateur non compatible, le DOM de la page sera "normal" : aucune balise Polymer présente. La sélection se fera donc de manière habituelle : $('name-expert#expert').

Sur un navigateur compatible avec la librairie, une partie du DOM sera encapsulée et donc protégée. Pour cela il faudra utiliser une des deux syntaxes suivantes :

  • $('::shadow name-expert#expert') ou simplement $('::shadow #expert')
  • $('body /deep/ name-expert#expert') ou simplement $('body /deep/ #expert')

En Sélénium, il faudra donc une implémentation différente de la fonction "find" suivant la compatibilité ou non du navigateur :

  • Firefox (incompatible) : find(By.id("expert"))
  • Chrome (version compatible avec Shadow DOM) : find(By.cssSelector('::shadow #expert')

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.