ultimate xpath writing cheat sheet tutorial with syntax
Top 20 des façons d'écrire Ultimate XPATH pour TOUT type d'élément Web (XPATH ne sera jamais invalide):
Une application Web est composée de différents types d'éléments Web tels qu'un élément Web sur lequel cliquer sur un bouton, un élément Web d'entrée pour saisir du texte, une liste déroulante, des boutons radio, etc.
Ces éléments Web sont également appelés balises ou nœuds.
Lorsqu'il s'agit d'automatiser des applications Web, cela commence par écrire un script d'automatisation qui trouvera l'élément Web, effectuera une action dessus, par exemple, cliquez sur un bouton, entrez du texte dans la zone de saisie, cochez une case, sélectionnez un bouton radio, faites défiler vers le haut ou vers le bas et vérifiez enfin le comportement attendu au tour de l'action.
Ce que vous apprendrez:
- Qu'est-ce que XPath et à quoi il ressemble?
- Les 20 meilleures façons d'écrire XPath pour n'importe quel élément Web
- # 1) Recherche inversée
- # 2) Utilisation de variables et de valeurs personnalisées
- # 3) Utilisation des balises «XML», «AND», etc.
- # 4) Utilisation des attributs et de la table XPATH
- # 5) Utilisation d'attributs, de tableaux et de texte
- # 6) Génération de XPATH à l'aide d'attributs imbriqués
- # 7) Génération XPath en combinant des attributs, des divisions et des boutons
- # 8) XPATH Génération à l'aide de CONTAINS, REVERSE LOOKUP, etc.
- # 9) XPath Generation utilisant Relative, CONTAINS, REVERSE, FOLLOWING SIBLING, etc.
- # 10) Génération XPath à l'aide d'attributs, contient, inverse, précédent-frère, div et étendue
- # 11) Utilisation d'attributs, de balises XML, etc.
- # 12) Génération XPath en ne regardant pas dans la page entière mais en regardant dans tous les liens à la place et contient
- # 13) Utilisation des contenus et des attributs
- # 14) Utiliser les attributs, suivre les frères et sœurs et les descendants
- # 15) Utiliser les attributs, suivre les frères et sœurs, les descendants et le texte
- # 16) Utilisation de l'en-tête et du texte
- # 17) Utiliser le texte d'en-tête, suivre les frères et sœurs, le chemin, etc.
- # 18) Utilisation des attributs, contient et précèdent les frères et sœurs
- # 19) Recherche de liste déroulante en utilisant l'attribut d'identification, un texte spécifique et la recherche inversée
- # 20) Combinaison de l'attribut «id» et recherche d'un lien avec un texte spécifique
- Conclusion
- lecture recommandée
Qu'est-ce que XPath et à quoi il ressemble?
Trouver un élément, c'est comme trouver la maison de quelqu'un sur la carte. La seule façon de trouver la maison d’un ami sans aucune aide extérieure est d’avoir une carte et de savoir quoi trouver (maison).
Afin de mettre cette analogie dans notre cas, la carte sera utilisée comme DOM (balises HTML, JavaScript, etc.) où tous les éléments Web existent, ainsi que l'élément Web spécifique que nous voulons trouver.
Une fois que l'adresse ou le chemin unique d'un élément est trouvé, le script d'automatisation effectuera ensuite certaines actions sur celui-ci en fonction du scénario de test. Par exemple, vous souhaitez vérifier l'URL de la page qui s'ouvre après avoir cliqué sur un bouton.
Cependant, il n'est pas simple de trouver une adresse / un chemin unique pour un élément Web car il peut y avoir des balises similaires, les mêmes valeurs d'attributs, des chemins identiques, ce qui rend difficile la création d'une adresse unique exacte à un élément Web appelé «XPATH».
Ici, nous allons approfondir quelques techniques géniales et efficaces pour générer un XPATH valide et unique pour tout type d'élément Web.
Lecture recommandée => Identifier les éléments Web à l'aide de XPath dans Selenium
Parfois, vous pouvez facilement créer des XPath à l'aide d'extensions de navigateur, mais dans mon tests d'automatisation carrière, j'ai été confronté à d'innombrables situations où les extensions de navigateur traditionnelles ne fonctionnent pas et vous devez créer vos propres XPath personnalisés en utilisant votre propre créativité. Je suis sûr que vous avez ou serez confronté à des situations similaires.
Dans ce didacticiel, nous examinerons les 20 meilleures façons de créer le XPath ultime pour un élément Web de manière à ce que même lorsque votre code est modifié, votre XPath reste valide tout le temps (à moins que le développeur ne réécrit le tout fonctionnalité / module).
En connaissant toutes ces techniques, vous deviendrez un maître de l'écriture de votre propre XPath et seriez capable d'écrire des XPath de tueur avec très peu de chances de devenir invalide.
Commençons par comprendre la syntaxe XPath et définir chacune de ses parties.
L'image ci-dessous montrera à quoi XPath ressemblera avec une description de chaque partie:
- //: Sélectionnez le nœud actuel tel que l'entrée, le div, etc.
- Tagname: Tagname de l'élément / nœud Web
- @: Sélectionnez l'attribut
- Attribut: Nom d'attribut du nœud / élément Web particulier
- Valeur: Valeur de l'attribut
Je veux juste partager quelques astuces ici: 80% du temps, mon script de test d'automatisation a échoué à cause de XPath. Cela est dû au fait qu'il existe plusieurs éléments Web pour le XPath fourni ou que XPath n'est pas valide ou que la page n'a pas encore été chargée.
Ainsi, chaque fois que votre scénario de test échoue:
- Copiez votre XPath.
- Recherchez-le dans le navigateur (F12 ou fenêtre de l'outil de développement) dans le DOM pour vérifier s'il est valide ou non (voir l'image ci-dessous).
Type Pro 1: Assurez-vous qu'il est unique et qu'aucun autre élément Web n'apparaît lorsque vous recherchez deux fois dans le DOM.
Pro Type 2: Parfois, il y a un problème de synchronisation, ce qui signifie que votre élément / page Web n'est pas encore chargé pendant que le script le recherchait, donc ajoutez du temps d'attente et retestez.
Type Pro 3: Essayez d'imprimer l'intégralité du DOM avant de rechercher l'élément Web. De cette façon, vous pouvez savoir en regardant dans la console si votre élément Web existe ou non dans le DOM.
Avant de plonger dans la recherche XPath, une chose importante que je souhaite partager est que si vous avez un accès direct à l'équipe de développement ou si votre équipe se trouve là où vous êtes, demandez à votre équipe de développement de vous fournir des identifiants uniques dans chaque élément Web ou au moins ceux que vous souhaitez utiliser pour l'automatisation et cela vous fera gagner beaucoup de temps.
Si ce n'est pas la possibilité, vous devrez peut-être utiliser votre créativité et créer vos propres XPaths personnalisés et c'est ce que nous allons apprendre maintenant.
quelle est la meilleure idée pour python
Les 20 meilleures façons d'écrire XPath pour n'importe quel élément Web
Plongeons-nous dans la création des 20 meilleures façons de créer un XPath tueur.
# 1) Recherche inversée
Supposons que vous souhaitiez cliquer sur un bouton et qu'il existe un bouton similaire. Les deux boutons ont des attributs id, mais ils sont dynamiques et aucun des attributs n'est unique dans les deux éléments de bouton.
Dans le scénario ci-dessous, nous voulons cliquer sur le bouton «Paramètres» du «Test interactif».
Code
Si vous regardez les boutons «Réglage», les deux codes sont similaires. En utilisant des méthodes traditionnelles telles que id, nom, valeur, contient, etc., aucun d'entre eux ne fonctionnera par exemple.
// * (contains (text (), ‘Setting’)), Cela donnera deux éléments Web. Ce n'est donc pas unique.
Voici donc la stratégie finale,
>> Tout d'abord, trouvez la balise la plus proche qui est unique et dans ce cas, c'est
XPATH: “//*(@id='rcTEST')
>> Deuxièmement, recherchez l'élément Web le plus proche de l'élément Web prévu qui, dans ce cas, contient (text (), «TEST Interactive»). Maintenant, nous sommes dans le même endroit où le bouton «Réglage» existe mais pour cliquer dessus, nous devons d'abord aller à la principale en utilisant des points doubles comme indiqué ci-dessous.
XPATH: “//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..
>> Comme vous pouvez le voir, nous sommes dans le niveau qui a le deuxième élément Web comme bouton «Paramètres». Il contient deux boutons et nous voulons aller au deuxième bouton qui est le bouton «Réglage». En ajoutant «/ button (2)» à la fin, nous pouvons obtenir notre XPATH unique pour le bouton «Setting» comme indiqué ci-dessous.
XPATH final:
“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/../button(2)”
Voici une autre façon de générer si vous pensez qu'ils pourraient changer le type d'élément Web de «bouton» à autre chose.
“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..//*(contains(text(), 'Setting'))”
ou en utilisant 'suivant-frère'
“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/following-sibling::button”
# 2) Utilisation de variables et de valeurs personnalisées
Supposons qu'il existe une application Web dotée d'une fonction FTP («File Transfer Protocol») pour charger / télécharger des fichiers et que vous disposez d'un scénario de test pour télécharger un fichier spécifique en cliquant sur le lien de téléchargement.
Tout d'abord, nous pouvons définir le nom du fichier que nous recherchons comme une variable.
String expectedfileName = 'Test1';
Maintenant, en utilisant XPATH, nous pouvons trouver le nom du fichier réel.
“String actualFileName = WebDriverAccess.getDriver().findElement (By.xpath('//*'+fileName +'/tr/td(1)')).getAttribute('title');”
Dans le XPath ci-dessus,… ‘/ tr / td (1) .getAttribute (“ title ”)’ ira à la ligne et à la première colonne spécifiques et obtiendra la valeur de l’attribut title. Nous pouvons stocker le nom du fichier réel dans une autre variable.
Une fois que nous avons les noms de fichiers attendus et réels, nous pouvons comparer les deux et si les deux correspondent, nous pouvons simplement cliquer sur son lien de téléchargement.
(if acutalFileName == expectedFileName) { WebDriverAccess.getDriver().findElement(By.xpath('//*'+fileName +'/tr/td(4)')).click(); }
Nous pouvons également créer une boucle sur chaque ligne et continuer à vérifier le nom du fichier jusqu'à ce que vous le trouviez.
Loop(int count <30) { String actualFileName = WebDriverAccess. getDriver ().findElement (By. xpath ('//*'+acutalFileName +'/tr(' + count + ')/td(1)')).getAttribute('title'); (if acutalFileName == expectedFileName) { WebDriverAccess. getDriver ().findElement(By. xpath ('//*'+fileName +'/tr/td(4)')).click(); } Count++; }
Nous pouvons générer un XPATH unique à l'aide de balises personnalisées et ajouter d'autres conditions.
Par exemple, Supposons que notre élément Web prévu existe dans la balise principale et qu'il existe plusieurs balises d'adresse, mais que vous ne souhaitiez en trouver qu'une en particulier. Toutes les balises d'adresse ont un attribut de classe, nous pouvons donc commencer par.
// address(@class='ng-scope ng-isolate-scope')
Nous avons remarqué que notre élément Web prévu se trouve dans une balise contenant du texte appelé 'Test'.
// address(@class='ng-scope ng-isolate-scope')//div(contains(.,'Testing')
Nous avons découvert qu'il y avait plusieurs éléments Web trouvés en conséquence. Par conséquent, pour le rendre plus unique, nous pouvons ajouter les autres conditions telles que «id» qui nous dirigeront finalement vers l'élément Web que nous recherchons.
// address(@class='ng-scope ng-isolate-scope')//div(contains(.,Testing') and @id='msgTitle')
# 4) Utilisation des attributs et de la table XPATH
Supposons que nous souhaitons taper dans un élément Web qui est placé à l'intérieur d'une table et que la table est placée à l'intérieur d'un élément de formulaire.
Nous pouvons trouver tous les formulaires dans DOM avec le nom «myForm».
“//*(@name='myForm')”
Maintenant, dans toutes les formes, trouvez la table avec l’identifiant ‘tbl_testdm’.
'//*(@name='myForm')//table(@id='tbl_ testdm’)”
Dans le tableau, accédez à une ligne et une colonne spécifiques.
'//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/”
Dans la cellule, s'il y a plusieurs entrées, trouvez une entrée où value = «Open RFS», et cela nous donnera le XPath final du champ.
//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/ input(@value='Open RFS')'
# 5) Utilisation d'attributs, de tableaux et de texte
Supposons que votre élément Web prévu se trouve dans le tableau des panneaux et contient un texte commun.
comment tester les scripts intersites
Commencez par un panneau ayant un attribut unique qui dans ce cas est «TITLE».
//*(@title=’Songs Lis Applet')
Naviguez maintenant dans toutes les balises de la table.
//*(@title=’Songs Lis Applet')//table
Dans tous les tableaux, trouvez la colonne contenant le texte «Auteur».
Final XPath serait comme:
//*(@title=’Songs List Applet')//table//td(contains(text(),'Author'))
# 6) Génération de XPATH à l'aide d'attributs imbriqués
Le XPath de l'élément Web cible peut également être généré à l'aide des attributs imbriqués. Par exemple, dans ce cas, il recherchera un attribut spécifique dans DOM, puis recherchera un autre attribut en son sein.
//*(@id='parameters')//*(@id='testUpdateTime')')
# 7) Génération XPath en combinant des attributs, des divisions et des boutons
Par exemple, dans le XPath ci-dessous, j'ai pu trouver l'élément Web cible en utilisant un identifiant (XPath relatif), des balises div et un bouton.
“//*(@id='MODEL/PLAN')/div(1)/div(2)/div(1)/div(1)/widget/section/div(1)/div/div(1)/div/div/button(1)'
# 8) XPATH Génération à l'aide de CONTAINS, REVERSE LOOKUP, etc.
Une fois, j'ai eu un menu déroulant sans identification directe. J'ai dû utiliser CONTAINS, REVERSE, DIVs, attributs pour créer le XPATH final comme indiqué ci-dessous.
//*(contains(text(),'Watch Dial))/../div/select(@data-ng-model='context.questions (subqts.subHandleSubId)')'),
# 9) XPath Generation utilisant Relative, CONTAINS, REVERSE, FOLLOWING SIBLING, etc.
J'ai eu une situation où l'application affiche un graphique, et chaque valeur de graphique devait être validée. Mais, malheureusement, chaque valeur n'avait pas d'identification unique, j'ai donc proposé le XPATH final comme indiqué ci-dessous pour une valeur de graphique qui combine les balises relatives, contient, inverse, suivant-frère et div.
//*(@id='RESEARCH/PLAN')//*(contains(@id, 'A4'))/../../following-sibling::div(1)/div(1)/span(1)/span(1)
# 10) Génération XPath à l'aide d'attributs, contient, inverse, précédent-frère, div et étendue
Une fois, j'ai dû valider différentes données d'alarme et chaque valeur d'alarme a été affichée en fonction d'un calcul ou de délais spécifiques. Afin de capturer chaque valeur, je devais trouver le XPATH ci-dessous qui utilise des attributs, contient, inverse, précédant-frère, divs et balises span.
//*(@id='ALARMDATA')//*(contains(@id, 'AFC2'))/../../preceding-sibling::div(1)/div(1)/span(1)/span(1)
# 11) Utilisation d'attributs, de balises XML, etc.
Dans le XPATH, les attributs et les balises XML ci-dessous, une séquence est utilisée pour trouver l'adresse unique finale d'un élément Web.
//*(@id='RESEARCH/REVIEW') //widget/section/div(1)/div/div(2)/div(1)/div(3)/div(1)//span(@class='details')
# 12) Génération XPath en ne regardant pas dans la page entière mais en regardant dans tous les liens à la place et contient
Le XPath ci-dessous rechercherait uniquement les liens dans une page entière contenant le texte comme «Entrée manuelle des données de paramètres».
//a(contains(.,'Parameter Data Manual Entry'))
# 13) Utilisation des contenus et des attributs
//*(contains(@style,'display: block; top:'))//input(@name='daterangepicker_end')
# 14) Utiliser les attributs, suivre les frères et sœurs et les descendants
//*(@id='dropdown-filter-serviceTools')/following-sibling::ul/descendant::a(text()='Notepad')
# 15) Utiliser les attributs, suivre les frères et sœurs, les descendants et le texte
//*(@id='dropdown-filter-service tools') /following-sibling::ul/descendant::a(text()='Trigger Dashboard')
# 16) Utilisation de l'en-tête et du texte
Si l'élément Web est un en-tête avec un texte spécifique, le XPath pourrait être comme indiqué ci-dessous:
//h3(text()='Internal Debrief')
# 17) Utiliser le texte d'en-tête, suivre les frères et sœurs, le chemin, etc.
//h3(contains(text(),'Helium Level'))/following-sibling::div/label/input
# 18) Utilisation des attributs, contient et précèdent les frères et sœurs
Une fois que j'avais un span qui n'avait aucun attribut unique, j'avais créé XPATH en combinant absolu, Contains, frères et sœurs précédents et un autre chemin absolu.
//div(div(p(contains(text(),'Status'))))/preceding-sibling::div/div/span(3)/span
# 19) Recherche de liste déroulante en utilisant l'attribut d'identification, un texte spécifique et la recherche inversée
//*(@id='COUPLING')//*(contains(text(),'COUPLE Trend'))/../div/select
# 20) Combinaison de l'attribut «id» et recherche d'un lien avec un texte spécifique
//*(@id='ffaHeaderDropdown')//a(contains(text(),'Start Workflow'))
Conclusion
Quand il s'agit d'écrire un XPATH tueur, cela dépend vraiment de la façon dont vous comprenez et analysez le code. Plus vous comprendrez le code, plus le nombre de manières que vous trouverez d’écrire des XPATH efficaces sera élevé.
La première étape de l'écriture de XPath est de trouver l'élément Web unique le plus proche de votre élément Web cible et de continuer à vous rapprocher en utilisant les différentes techniques décrites ci-dessus, telles que les attributs, les DIV, le suivi, le contenu, etc.
En fin de compte, nous le répéterons: cela vous facilitera vraiment la vie si vous demandez à votre équipe de développement d'ajouter des identifiants uniques dans tous les éléments Web qui vous intéressent.
Chaque fois qu'un cycle de sprint ou un travail sur une nouvelle exigence commence et que l'équipe est partagée avec de nouvelles maquettes, je passe toujours en revue toutes les maquettes et pense aux cas de test d'automatisation potentiels dans mon esprit, prépare une liste de tous les éléments Web potentiels qui seront utilisés dans les tests d'automatisation et préparer mes propres identifiants.
Une fois que la liste de tous les éléments Web avec mes identifiants suggérés est terminée, je la partagerais au développeur au préalable pour être utilisée dans le code de développement. De cette façon, j'obtiendrais toujours des identifiants uniques en facilitant ma bataille d'écriture XPATH.
Vous trouverez ci-dessous une liste combinée de différentes façons d'écrire des XPATH:
- '// * (@ id =’ rcTEST ’) // * (contient (text (),‘ TEST Interactive ’)) /../ bouton (2)»
- '// * (@ id =’ rcTEST ’) // * (contient (text (),‘ TEST Interactive ’)) /..//* (contient (text (),‘ Setting ’))»
- '// * (@ id = 'rcTEST') // * (contains (text (), 'TEST Interactive')) / following-sibling :: button»
- 'String actualFileName = WebDriverAccess.getDriver (). FindElement (By.xpath (“ // * ”+ fileName +” / tr / td (1) ”)). GetAttribute (“ title ”);”
- WebDriverAccess.getDriver (). FindElement (By.xpath (“// *” + fileName + ”/ tr / td (4)”)). Click ();
- '// adresse (@ class = 'ng-scope ng-isolate-scope') // div (contient (., Testing ') et @ id =' msgTitle ')'
- '// * (@ name =’ myForm ’) // table (@ id =’ tbl_ testdm ’) / tbody / tr / td (6) /
- input (@ value = 'Open RFS') »
- '// * (@ title =’ Applet de liste de chansons ’) // table // td (contains (text (),’ Author ’))»
- '// * (@ id =’ parameters ’) // * (@ id =’ testUpdateTime ’)”) ”
- '// * (@ id = 'MODÈLE / PLAN') / div (1) / div (2) / div (1) / div (1) / widget / section / div (1) / div / div (1) / div / div / bouton (1) '
- '// * (contient (text (),’ Watch Dial)) /../ div / select (@ data-ng-model = ’context.questions (subqts.subHandleSubId)’) »),'
- '// * (@ id = 'RECHERCHE / PLAN') // * (contient (@id, 'A4')) /../../ suivant-frère :: div (1) / div (1) / span (1) / span (1) '
- '// * (@ id = 'ALARMDATA') // * (contient (@id, 'AFC2')) /../../ précédent-frère :: div (1) / div (1) / span ( 1) / span (1) '
- '// * (@ id = 'RESEARCH / REVIEW') // widget / section / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'détails') »
- '//A(contains(.,'Parameter Data Manual Entry '))'
- '// * (contient (@ style,’ display: block; top: ’)) // input (@ name =’ daterangepicker_end ’)»
- '// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Notepad ’)»
- '// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Trigger Dashboard ’)»
- '// h3 (text () =’ Internal Debrief ’)»
- '// h3 (contains (text (), 'Helium Level')) / following-sibling :: div / label / input»
- '// div (div (p (contains (text (), 'Status')))) / precedent-sibling :: div / div / span (3) / span»
- '// * (@ id = 'COUPLING') // * (contient (text (), 'COUPLE Trend')) /../ div / select'
- '// * (@ id =’ ffaHeaderDropdown ’) // a (contains (text (),’ Start Workflow ’))»
J'espère que cet article informatif aurait enrichi vos connaissances sur l'écriture de XPaths.
Auteur Bio: Cet article est écrit par Adnan Arif, un professionnel de l'informatique ayant une expérience et des compétences diverses au cours de sa carrière de plus de 9 ans.
lecture recommandée
- Tutoriels Eclipse détaillés pour les débutants
- Tutoriel Python DateTime avec des exemples
- Syntaxe des commandes Unix Cat, options avec exemples
- Commande de tri Unix avec syntaxe, options et exemples
- Tutoriel de script Unix Shell avec des exemples
- Tutoriel de recherche d'élément par texte de sélénium avec des exemples
- Tutoriel sur les fonctions principales de Python avec des exemples pratiques
- Post-processeur Xpath Extractor dans JMeter