Info-bulle dans Selenium
Une info-bulle dans Selenium est un texte qui apparaît lorsqu'une souris survole un objet sur une page Web. L'objet peut être un lien, une image, un bouton, une zone de texte, etc. Le texte de l'infobulle donne souvent plus d'informations sur l'objet sur lequel l'utilisateur survole le curseur de la souris.
Les info-bulles étaient traditionnellement implémentées en tant qu'attribut «titre» à un élément. La valeur de cet attribut était affichée sous forme d'info-bulle lors du survol de la souris. Il s'agit d'un texte statique donnant des informations sur l'élément sans style.
Maintenant, il existe de nombreux plugins disponibles pour l'implémentation des «info-bulles». Des info-bulles avancées avec style, rendu, images et liens sont mises en œuvre à l'aide de plugins JavaScript / JQuery ou à l'aide des info-bulles CSS.
- Pour accéder ou vérifier les info-bulles statiques qui sont implémentées à l'aide de l'attribut HTML "title", nous pouvons simplement utiliser la méthode getAttribute ("title") du WebElement. La valeur renvoyée de cette méthode (qui est le texte de l'info-bulle) est comparée à une valeur attendue pour la vérification.
- Pour les autres formes d'implémentation de l'info-bulle, nous devrons utiliser l '"API d'interactions utilisateur avancées" fournie par le pilote Web pour créer l'effet de survol de la souris, puis récupérer l'info-bulle de l'élément.
Présentation de l'API Advanced User Interactions:
L'API Advanced User Interactions fournit l'API pour les actions utilisateur telles que le glisser-déposer, le survol, la sélection multiple, la pression et le relâchement de touches et d'autres actions à l'aide du clavier ou de la souris sur une page Web.
Vous pouvez consulter ce lien pour plus de détails sur l'API.
https://seleniumhq.github.io/selenium/docs/api/java/index.html?org/openqa/selenium/interactions/Actions.html
Ici, voyons comment utiliser quelques classes et méthodes dont nous aurions besoin pour déplacer un élément de curseur d'un décalage.
Étape 1) Pour utiliser l'API, les packages / classes suivants doivent être importés:
Étape 2) Créez un objet de la classe "Actions" et construisez la séquence d'actions utilisateur. La classe Actions est utilisée pour construire la séquence d'actions utilisateur comme moveToElement (), dragAndDrop () etc. Diverses méthodes liées aux actions utilisateur sont fournies par l'API.
L'objet pilote est fourni en tant que paramètre à son constructeur.
Étape 3) Créez un objet Action en utilisant la méthode build () de la classe "Actions". Appelez la méthode perform () pour exécuter toutes les actions générées par l'objet Actions (constructeur ici).
Nous avons vu comment utiliser certaines des méthodes d'actions utilisateur fournies par l'API - clickAndHold (élément), moveByOffset (10,0), release (). L'API fournit de nombreuses méthodes de ce type.
Reportez-vous au lien pour plus de détails.
Comment obtenir le texte de l'info-bulle dans Selenium Webdriver
Voyons la démonstration de l'accès et de la vérification des info-bulles dans le scénario simple
- Scénario 1: l'info-bulle est implémentée à l'aide de l'attribut "title"
- Scénario 2: Tooltip est implémenté à l'aide d'un plugin jQuery.
Scénario 1: Attribut HTML 'title'
Pour ce cas, prenons l'exemple de site - http://demo.guru99.com/test/social-icon.html.
Nous allons essayer de vérifier l'infobulle de l'icône "github" en haut à droite de la page.
Pour ce faire, nous allons d'abord trouver l'élément et obtenir son attribut 'title' et vérifier avec le texte de l'info-bulle attendu.
Puisque nous supposons que l'info-bulle est dans l'attribut "title", nous n'automatisons même pas l'effet de survol de la souris, mais nous récupérons simplement la valeur de l'attribut en utilisant la méthode "getAttribute ()".
Voici le code
import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium. *;Info-bulle de classe publique {public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/social-icon.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");Pilote WebDriver = nouveau ChromeDriver ();driver.get (baseUrl);String attenduTooltip = "Github";// Trouvez l'icône Github en haut à droite de l'en-têteWebElement github = driver.findElement (By.xpath (".//*[@ class = 'soc-ico show-round'] / a [4]"));// récupère la valeur de l'attribut "title" de l'icône githubString actualTooltip = github.getAttribute ("titre");// Assure que la valeur de l'info-bulle est comme prévuSystem.out.println ("Titre réel de l'info-bulle" + actualTooltip);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Scénario de test réussi");}driver.close ();}}
Explication du code
- Trouvez le WebElement représentant l'icône "github".
- Obtenez son attribut "title" en utilisant la méthode getAttribute ().
- Affirmez la valeur par rapport à la valeur d'infobulle attendue.
Scénario 2: Plugin JQuery:
Il existe de nombreux plugins JQuery disponibles pour implémenter les info-bulles, et chacun a une forme d'implémentation légèrement différente.
Certains plugins s'attendent à ce que le HTML de l'info-bulle soit présent tout le temps à côté de l'élément pour lequel l'info-bulle est applicable, tandis que les autres créent une balise dynamique "div", qui apparaît à la volée en survolant l'élément.
Pour notre démonstration, considérons la méthode d'implémentation des info-bulles "jQuery Tools Tooltip".
Ici, dans l'URL - http://demo.guru99.com/test/tooltip.html, vous pouvez voir la démo où, en survolant la souris sur "Télécharger maintenant", nous obtenons une info-bulle avancée avec une image, un arrière-plan de légende, un tableau et un lien à l'intérieur qui est cliquable.
Si vous regardez la source ci-dessous, vous pouvez voir que la balise div représentant l'info-bulle est toujours présente à côté de la balise du lien "Télécharger maintenant". Mais, le code à l'intérieur de la balise de script ci-dessous contrôle le moment où il doit apparaître.
Essayons de vérifier uniquement le texte du lien dans l'info-bulle pour notre démonstration ici.
Nous allons d'abord trouver le WebElement correspondant au "Télécharger maintenant". Ensuite, en utilisant l'API Interactions, nous passerons à l'élément (survol de la souris). Ensuite, nous trouverons le WebElement qui correspond au lien dans l'info-bulle affichée et le vérifierons par rapport au texte attendu.
Voici le code
import org.openqa.selenium.interactions.Action;import org.openqa.selenium.interactions.Actions;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium. *;classe publique JqueryToolTip {public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/tooltip.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");Pilote WebDriver = nouveau ChromeDriver ();String expectedTooltip = "Quoi de neuf dans 3.2";driver.get (baseUrl);WebElement download = driver.findElement (By.xpath (".//*[@ id = 'download_now']"));Générateur d'actions = nouvelles actions (pilote);builder.clickAndHold (). moveToElement (téléchargement);builder.moveToElement (téléchargement) .build (). perform ();WebElement toolTipElement = driver.findElement (By.xpath (".//*[@ class = 'box'] / div / a"));String actualTooltip = toolTipElement.getText ();System.out.println ("Titre actuel de l'info-bulle" + actualTooltip);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Scénario de test réussi");}driver.close ();}}
Explication du code
- Trouvez le WebElement qui correspond à l'élément "télécharger maintenant" que nous allons passer la souris.
- À l'aide de l'API Interactions, passez la souris sur "Télécharger maintenant".
- En supposant que l'info-bulle est affichée, recherchez le WebElement qui correspond au lien à l'intérieur de l'info-bulle, c'est-à-dire la balise "a".
- Vérifiez le texte de l'info-bulle du lien récupéré à l'aide de getText () par rapport à une valeur attendue que nous avons stockée dans "expectedToolTip"
Résumé:
Dans ce didacticiel, vous avez appris à accéder aux info-bulles à l'aide du pilote Web Selenium.
- Les info-bulles sont mises en œuvre de différentes manières -
- L'implémentation de base est basée sur l'attribut "title" du HTML. getAttribute (title) obtient la valeur de l'info-bulle.
- D'autres implémentations d'infobulles telles que JQuery, les infobulles CSS nécessitent l'API Interactions pour créer un effet de survol de la souris
- API d'interactions utilisateur avancées
- moveToElement (element) de la classe Actions est utilisé pour survoler un élément avec la souris.
- La méthode Build () de la classe Actions crée la séquence d'actions utilisateur dans un objet Action.
- Perform () de la classe Action exécute toutes les séquences d'actions utilisateur à la fois.
- Afin de vérifier une info-bulle, nous devons d'abord survoler l'élément avec la souris, puis trouver l'élément qui correspond à l'info-bulle et obtenir son texte ou d'autres valeurs à vérifier par rapport aux valeurs attendues.