{"id":2756,"date":"2023-11-24T15:04:21","date_gmt":"2023-11-24T14:04:21","guid":{"rendered":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/non-classifiee\/locators-in-selenium-webdriver\/"},"modified":"2024-10-22T14:14:26","modified_gmt":"2024-10-22T12:14:26","slug":"locators-in-selenium-webdriver","status":"publish","type":"post","link":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/tests-automatises\/tutoriel-selenium\/locators-in-selenium-webdriver\/","title":{"rendered":"Localisateurs dans Selenium WebDriver"},"content":{"rendered":"\n<p>Dans cet article, nous allons poursuivre notre <a href=\"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/automatizovane-testovanie\/selenium-tutorial\/selenium-tutorial\/\">tutoriel Selenium<\/a> et explorer les diff\u00e9rents types de localisateurs disponibles dans Selenium. Avant d&rsquo;\u00e9tudier les localisateurs, examinons d&rsquo;abord la n\u00e9cessit\u00e9 des localisateurs dans le processus d&rsquo;automatisation.<\/p>\n\n<p>Un processus d&rsquo;automatisation simple dans Selenium peut \u00eatre consid\u00e9r\u00e9 comme suit :<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Lancez le navigateur.<\/li>\n\n\n\n<li>Ouvrez la page web \u00e0 automatiser.<\/li>\n\n\n\n<li>Localisation d&rsquo;\u00e9l\u00e9ments web tels que les zones de texte.<\/li>\n\n\n\n<li>Effectuer des op\u00e9rations sur des \u00e9l\u00e9ments web, comme \u00e9crire dans une zone de texte.<\/li>\n\n\n\n<li>Faire des affirmations telles que le message \u00ab\u00a0Succ\u00e8s\u00a0\u00bb.<\/li>\n<\/ul>\n\n<p>Voyons un exemple de code mettant en \u0153uvre le processus ci-dessus. Nous \u00e9tudierons les diff\u00e9rentes lignes de code dans la suite du texte.<\/p>\n\n<h2 class=\"wp-block-heading\">Table des mati\u00e8res<\/h2>\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-ukazka-kodu-pre-lokatory-v-selenium-webdriver\">Uk\u00e1\u017eka k\u00f3du pre lok\u00e1tory v Selenium WebDriver<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzitie-nastroja-developer-tool\">Pou\u017eitie n\u00e1stroja Developer Tool<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-lokatory-selenium\">Lok\u00e1tory Selenium<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\" id=\"aioseo-ukazka-kodu-pre-lokatory-v-selenium-webdriver\">Exemple de code pour les localisateurs dans Selenium WebDriver<\/h2>\n\n<p><strong>\/\/Lancement du navigateur Firefox<\/strong><\/p>\n\n<p><strong>WebDriver driver = new FirefoxDriver() ;<\/strong><\/p>\n\n<p><strong>\/\/Ouverture de google.com<\/strong><\/p>\n\n<p><strong>driver.get(\u00ab\u00a0http:\/\/www.google.com\u00a0\u00bb) ;<\/strong><\/p>\n\n<p><strong>\/\/Initialisation de l&rsquo;\u00e9l\u00e9ment web searchBox<\/strong><\/p>\n\n<p><strong>WebElement searchBox = driver.findElement(By.name(\u00ab\u00a0q\u00a0\u00bb)) ;<\/strong><\/p>\n\n<p><strong>\/\/En \u00e9crivant un texte \u00ab\u00a0ITtester\u00a0\u00bb dans la bo\u00eete de recherche<\/strong><\/p>\n\n<p><strong>searchBox.sendKeys(\u00ab\u00a0ITtester\u00a0\u00bb) ;<\/strong><\/p>\n\n<p>Nous voyons donc ici que si nous voulons effectuer une op\u00e9ration sur un \u00e9l\u00e9ment web &#8211; searchBox, nous devons d&rsquo;abord le localiser. Voici le localisateur By.name(\u00ab\u00a0q\u00a0\u00bb) qui, lorsqu&rsquo;il est transmis \u00e0 la m\u00e9thode findElement, renvoie un \u00e9l\u00e9ment web searchBox.<\/p>\n\n<p>Avant d&rsquo;aborder plus en d\u00e9tail les diff\u00e9rents types de localisateurs disponibles dans Selenium, voyons d&rsquo;abord comment obtenir les diff\u00e9rents attributs d&rsquo;\u00e9l\u00e9ments utilis\u00e9s dans les localisateurs.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzitie-nastroja-developer-tool\">Utiliser l&rsquo;outil du d\u00e9veloppeur<\/h2>\n\n<p>La localisation d&rsquo;\u00e9l\u00e9ments web n\u00e9cessite la connaissance de leurs attributs HTML. Nous pouvons utiliser l&rsquo;outil de d\u00e9veloppement int\u00e9gr\u00e9 pour obtenir le code source HTML d&rsquo;\u00e9l\u00e9ments sp\u00e9cifiques (lanc\u00e9 en appuyant sur f12 dans le navigateur ou Shift+Ctrl+I).<\/p>\n\n<p>Etapes pour trouver les attributs d&rsquo;un \u00e9l\u00e9ment HTML :<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Lancez la page web \u00e0 automatiser, par exemple https:\/\/www.google.com<\/li>\n\n\n\n<li>Appuyez sur F12 (ou Shift+Ctrl+I) pour lancer l&rsquo;outil de d\u00e9veloppement.<\/li>\n\n\n\n<li>Cliquez sur l&rsquo;ic\u00f4ne inspecter-\u00e9l\u00e9ment comme indiqu\u00e9 dans l&rsquo;image ci-dessous.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"630\" src=\"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1.webp\" alt=\"Capture d'&#xE9;cran de l'outil de d&#xE9;veloppement ouvert dans le navigateur\" class=\"wp-image-688\" srcset=\"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1.webp 1500w, https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1-300x126.webp 300w, https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1-1024x430.webp 1024w, https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1-768x323.webp 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><figcaption class=\"wp-element-caption\">L&rsquo;utilisation de l&rsquo;outil Developer est un outil efficace et pratique pour corriger ou v\u00e9rifier des \u00e9l\u00e9ments web.\n\n<\/figcaption><\/figure>\n<\/div>\n<p>Apr\u00e8s avoir cliqu\u00e9 sur l&rsquo;ic\u00f4ne inspecter-\u00e9l\u00e9ment, cliquez sur l&rsquo;\u00e9l\u00e9ment web que vous souhaitez localiser, par exemple Bo\u00eete de recherche Google. Lorsque vous cliquez sur un \u00e9l\u00e9ment, son code HTML est affich\u00e9 dans l&rsquo;interface utilisateur de Firebug.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-1024x389.webp\" alt=\"Capture d'&#xE9;cran de l'outil de d&#xE9;veloppement ouvert dans le navigateur\" class=\"wp-image-690\" srcset=\"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-1024x389.webp 1024w, https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-300x114.webp 300w, https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-768x292.webp 768w, https:\/\/staging-msg-ittester-sk.rucolabs.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570.webp 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">L&rsquo;interface simple de Developer Tool vous indique les attributs et valeurs importants.<\/figcaption><\/figure>\n<\/div>\n<p>Nous pouvons voir ici les diff\u00e9rents attributs des \u00e9l\u00e9ments web tels que id, type, r\u00f4le, etc., ainsi que leurs balises telles que input, div, etc. Nous allons maintenant utiliser ces balises, attributs et valeurs pour rechercher des \u00e9l\u00e9ments \u00e0 l&rsquo;aide de diff\u00e9rents localisateurs.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-lokatory-selenium\">Localisateurs de s\u00e9l\u00e9nium<\/h2>\n\n<p>Il existe au total 8 localisateurs dans Selenium WebDriver :<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>By Id &#8211; Localise l&rsquo;\u00e9l\u00e9ment en utilisant l&rsquo;attribut id de l&rsquo;\u00e9l\u00e9ment web.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.id(\u00ab\u00a0elementId\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>By className &#8211; r\u00e9cup\u00e8re l&rsquo;\u00e9l\u00e9ment web \u00e0 l&rsquo;aide de l&rsquo;attribut className.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.className(\u00ab\u00a0objectClass\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong>Par nom de balise &#8211; Recherche un \u00e9l\u00e9ment web \u00e0 l&rsquo;aide de sa balise HTML, par exemple div, a, input, etc.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.tagName(\u00ab\u00a0a\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>Par nom &#8211; recherche d&rsquo;un \u00e9l\u00e9ment web \u00e0 l&rsquo;aide de l&rsquo;attribut name.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.name(\u00ab\u00a0male\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li><strong>By linkText &#8211; Recherche un \u00e9l\u00e9ment web de type lien en utilisant son texte.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.linkText(\u00ab\u00a0Click Here\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li><strong>By partialLinkText &#8211; Recherche un \u00e9l\u00e9ment web du type de lien avec une correspondance de texte partielle.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.partialLinkText(\u00ab\u00a0Click\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li><strong>By cssSelector &#8211; Recherche un \u00e9l\u00e9ment web \u00e0 l&rsquo;aide de CSS.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.cssSelector(\u00ab\u00a0div#id\u00a0\u00bb)) ;<\/p>\n\n<ol class=\"wp-block-list\" start=\"8\">\n<li><strong>Par XPath &#8211; Recherche d&rsquo;un \u00e9l\u00e9ment web \u00e0 l&rsquo;aide de son XPath.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.xpath(\u00ab\u00a0\/\/div[@id=&rsquo;id&rsquo;]\u00a0\u00bb)) ;<\/p>\n\n<p>Vous avez maintenant appris \u00e0 localiser des \u00e9l\u00e9ments dans Selenium. Comme vous pouvez le constater, il est facile de localiser des \u00e9l\u00e9ments par id, className, tagName, name, linkText et partialLinkText.<\/p>\n\n<p>Il suffit de s\u00e9lectionner le bon localisateur en fonction de l&rsquo;unicit\u00e9 de l&rsquo;\u00e9l\u00e9ment, par exemple nous pr\u00e9f\u00e9rons utiliser les identifiants car les identifiants des \u00e9l\u00e9ments sont g\u00e9n\u00e9ralement uniques. Toutefois, il peut arriver que nous ne disposions pas des attributs id de l&rsquo;\u00e9l\u00e9ment web et que d&rsquo;autres localisateurs, tels que name et className, ne permettent pas de retrouver l&rsquo;\u00e9l\u00e9ment web unique demand\u00e9. Dans ce cas, nous devons utiliser des s\u00e9lecteurs CSS et des localisateurs XPath.<\/p>\n\n<p>Ces localisateurs sont tr\u00e8s puissants et permettent de cr\u00e9er des localisateurs robustes pour des \u00e9l\u00e9ments web complexes.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce tutoriel, vous d\u00e9couvrirez la n\u00e9cessit\u00e9 des localisateurs dans le processus d&rsquo;automatisation et les diff\u00e9rents types de localisateurs disponibles dans Selenium.<\/p>\n","protected":false},"author":8,"featured_media":2759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[53],"tags":[],"class_list":["post-2756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriel-selenium"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/posts\/2756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/comments?post=2756"}],"version-history":[{"count":1,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/posts\/2756\/revisions"}],"predecessor-version":[{"id":2760,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/posts\/2756\/revisions\/2760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/media\/2759"}],"wp:attachment":[{"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/media?parent=2756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/categories?post=2756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging-msg-ittester-sk.rucolabs.sk\/fr\/wp-json\/wp\/v2\/tags?post=2756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}