Comment vérifier l'info-bulle dans Selenium

Info-bulle dans Selenium

A Info-bulle dans Selenium Une infobulle est un court texte qui s'affiche lorsque la souris survole un élément d'une page web. Cet élément peut être un lien, une image, un bouton ou une zone de texte. L'infobulle fournit généralement des informations supplémentaires sur l'élément sous le curseur.

Les infobulles étaient traditionnellement implémentées via un attribut « title » sur un élément. La valeur de cet attribut s'affichait sous forme d'infobulle au survol de la souris. Il s'agissait d'un texte statique fournissant des informations sur l'élément, sans mise en forme.

Aujourd'hui, de nombreux plugins permettent d'implémenter des infobulles. Des infobulles avancées, avec style, rendu, images et liens, sont créées à l'aide de ces plugins. JavaScript ou plugins jQuery, ou avec des infobulles uniquement en CSS.

• Pour accéder aux infobulles statiques implémentées via l'attribut HTML « title » ou les vérifier, utilisez le getAttribute("title") Cette méthode est appliquée à l'élément WebElement. La valeur renvoyée (le texte de l'infobulle) est comparée à une valeur attendue à des fins de vérification.
• Pour les autres implémentations d'infobulles, utilisez l'« API d'interactions utilisateur avancées » fournie par WebDriver pour créer l'effet de survol de la souris, puis récupérez l'infobulle de l'élément.

Un résumé de l'API d'interactions utilisateur avancées

L'API Advanced User Interactions expose les actions de l'utilisateur telles que le glisser-déposer, le survol, la sélection multiple, l'appui et le relâchement sur les touches, ainsi que d'autres actions au clavier ou à la souris sur une page Web.

Vous pouvez vous référer à ceci Référence officielle de la classe Actions pour plus de détails sur l'API.

Avant le sautping Prenons différents scénarios et examinons les classes et les méthodes nécessaires pour déplacer un élément de curseur selon un décalage.

Étape 1) Pour utiliser l'API, importez les packages et classes suivants :

Étape 2) Créez un objet de la classe « Actions » et définissez la séquence d’actions de l’utilisateur. La classe Actions permet d’enchaîner des actions telles que moveToElement() et dragAndDrop(). L’objet pilote est passé en paramètre à son constructeur.

Étape 3) Créez un objet Action à l'aide de la méthode build() de la classe « Actions ». Appelez la méthode perform() pour exécuter chaque action mise en file d'attente sur le générateur.

Nous avons vu comment utiliser certaines des méthodes d'action utilisateur fournies par l'API : clickAndHold(element), moveByOffset(10, 0) et release(). L'API en propose bien d'autres.

Implémentation des infobulles vs Selenium Approche de vérification

Comment vérifier (gérer) l'info-bulle dans Selenium

Examinons en détail l'accès aux infobulles et leur vérification à travers deux scénarios courants :

• Scénario 1 : L’infobulle est implémentée à l’aide de l’attribut « title ».
• Scénario 2 : L’infobulle est implémentée à l’aide d’un plugin jQuery.

Scénario 1 : Attribut HTML « title »

Dans ce cas, nous utilisons le site d'exemple https://demo.guru99.com/test/social-icon.html et vérifiez l'infobulle de l'icône « github » en haut à droite de la page.

Nous localisons d'abord l'élément, puis nous lisons son attribut « title » et le comparons au texte attendu de l'infobulle.

Comme l'infobulle se trouve dans l'attribut « title », nous n'automatisons même pas le survol de la souris ; nous récupérons simplement la valeur de l'attribut avec 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]"));

        // Read the "title" attribute value of the Github icon
        String actualTooltip = github.getAttribute("title");

        // Assert that the tooltip value matches the expected one
        System.out.println("Actual Title of Tool Tip " + actualTooltip);
        if (actualTooltip.equals(expectedTooltip)) {
            System.out.println("Test Case Passed");
        }
        driver.close();
    }
}

Explication du code:

1. Recherchez le WebElement représentant l'icône « github ».
2. Lisez son attribut « title » avec la méthode getAttribute().
3. Comparez la valeur au texte attendu dans l'infobulle.

Selenium 4 conseil: Préférez getDomAttribute("title") pour l'attribut HTML littéral, et laissez Selenium Le gestionnaire résout le problème du pilote au lieu de le coder en dur chromedriver.exe.

Scénario 2 : Plugin jQuery

De nombreux plugins jQuery implémentent des infobulles, et chacun d'eux s'affiche légèrement différemment.

Certains plugins conservent en permanence le balisage de l'infobulle à côté de l'élément déclencheur, tandis que d'autres créent une balise « div » dynamiquement lorsque le curseur entre dans le déclencheur.

Pour cette démonstration, nous utilisons le style « jQuery Tools Tooltip ».

Ouvrez https://demo.guru99.com/test/tooltip.html; en survolant « Télécharger maintenant », une infobulle avancée s'affiche avec une image, un fond de bulle, un petit tableau et un lien cliquable.

Si vous examinez le code source, vous constaterez que l'élément div représentant l'infobulle se trouve déjà à côté du lien « Télécharger maintenant ». La balise script ci-dessous détermine son affichage.

Nous vérifions maintenant le texte du lien affiché dans l'infobulle.

Commencez par localiser l'élément Web « Télécharger maintenant ». Utilisez l'API Interactions pour vous y déplacer (survolez l'élément avec la souris). Ensuite, trouvez l'élément Web correspondant au lien dans l'infobulle affichée et vérifiez que son texte correspond bien à la valeur attendue.

Voici le code:

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);

        // Hover over the "Download now" link to reveal the tooltip
        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();
    }
}

Code Explication:

1. Repérez l'élément Web qui correspond à l'élément « Télécharger maintenant » sur lequel vous passerez la souris.
2. Utilisez l'API Interactions pour survoler le bouton « Télécharger maintenant » avec le curseur.
3. Une fois l'infobulle visible, repérez l'élément Web représentant le lien à l'intérieur de l'infobulle (la balise « a »).
4. Lisez le texte de l'infobulle avec getText() et comparez-la à la valeur attendue stockée dans expectedTooltip.

FAQ