Comment vérifier l'info-bulle dans Selenium
Krishna Rungta
Info-bulle dans Selenium
A 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'info-bulle 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 comme attribut « titre » d'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.
Il existe désormais de nombreux plugins disponibles pour la mise en œuvre des « info-bulles ». Des info-bulles avancées avec style, rendu, images et liens sont implémentées à l'aide de JavaPlugins de script/JQuery ou utilisation d'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 par cette méthode (qui est le texte de l'info-bulle) est comparée à une valeur attendue pour vérification.
- Pour d'autres formes d'implémentations d'info-bulles, nous devrons utiliser « l'API Advanced User Interactions » 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.
Un résumé de l'API d'interactions utilisateur avancées
L'API Advanced User Interactions fournit l'API pour les actions utilisateur telles que le glisser-déposer, le survol, la sélection multiple, l'appui et le relâchement d'une touche et d'autres actions utilisant le clavier ou la souris sur une page Web.
Vous pouvez vous référer à ceci lien pour plus de détails sur l'API.
Voyons ici comment utiliser quelques classes et méthodes dont nous aurions besoin pour déplacer un élément slider 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 classe « Actions » et construisez la séquence d'actions utilisateur. La classe Actions est utilisée pour créer 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 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 construites par l'objet Actions (générateur ici).
Nous avons vu comment utiliser certaines des méthodes d'actions utilisateur fournies par l'API – clickAndHold(element), moveByOffset(10,0), release(). L'API propose de nombreuses méthodes de ce type.
Reportez-vous à lien pour plus de détails.
Comment vérifier (gérer) l'info-bulle dans Selenium
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 : l'info-bulle est implémentée à l'aide d'un plugin jQuery.
Scénario 1 : attribut HTML « titre »
Pour ce cas, prenons l'exemple de site – https://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, obtenir son attribut 'title' et vérifier avec le texte d'info-bulle attendu.
Puisque nous supposons que l'info-bulle se trouve dans l'attribut « titre », nous n'automatisons même pas l'effet de survol de la souris mais récupérons simplement la valeur de l'attribut à l'aide de 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.*;
public class ToolTip {
public static void main(String[] args) {
String baseUrl = "https://demo.guru99.com/test/social-icon.html";
System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get(baseUrl);
String expectedTooltip = "Github";
// Find the Github icon at the top right of the header
WebElement github = driver.findElement(By.xpath(".//*[@class='soc-ico show-round']/a[4]"));
//get the value of the "title" attribute of the github icon
String actualTooltip = github.getAttribute("title");
//Assert the tooltip's value is as expected
System.out.println("Actual Title of Tool Tip"+actualTooltip);
if(actualTooltip.equals(expectedTooltip)) {
System.out.println("Test Case Passed");
}
driver.close();
}
}
Explication du code
- Recherchez 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 attendue de l’info-bulle.
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 l'info-bulle HTML soit présente en permanence à côté de l'élément pour lequel l'info-bulle est applicable tandis que d'autres créent une balise dynamique « div », qui apparaît à la volée lors du survol de 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 - https://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 de notre démonstration ici.
On trouvera d'abord le WebElement correspondant au « Télécharger maintenant ». Ensuite, à l'aide de 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.*;
public class JqueryToolTip {
public static void main(String[] args) {
String baseUrl = "https://demo.guru99.com/test/tooltip.html";
System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
String expectedTooltip = "What's new in 3.2";
driver.get(baseUrl);
WebElement download = driver.findElement(By.xpath(".//*[@id='download_now']"));
Actions builder = new Actions (driver);
builder.clickAndHold().moveToElement(download);
builder.moveToElement(download).build().perform();
WebElement toolTipElement = driver.findElement(By.xpath(".//*[@class='box']/div/a"));
String actualTooltip = toolTipElement.getText();
System.out.println("Actual Title of Tool Tip "+actualTooltip);
if(actualTooltip.equals(expectedTooltip)) {
System.out.println("Test Case Passed");
}
driver.close();
}
}
Explication du code
- Recherchez le WebElement qui correspond à l'élément « télécharger maintenant » que nous allons survoler avec la souris.
- À l’aide de l’API Interactions, passez la souris sur « Télécharger maintenant ».
- En supposant que l'info-bulle soit 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 de Selenium Pilote Web.
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'info-bulles comme JQuery, les info-bulles 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 construit la séquence d’actions de l’utilisateur dans un objet Action.
- Perform() de la classe Action exécute toute la séquence d’actions de l’utilisateur en même temps.
Afin de vérifier une info-bulle, nous devons d'abord survoler l'élément avec la souris, puis rechercher l'élément qui correspond à l'info-bulle et obtenir son texte ou d'autres valeurs à vérifier par rapport aux valeurs attendues.
