Comment cliquer sur une image dans Selenium Pilote Web

Par : Krishna Rungta Krishna Rungta
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Cliquez sur l'image dans Selenium WebDriver nécessite l'utilisation de sélecteurs CSS ou de stratégies XPath, car les éléments image ne contiennent pas de texte pour les liens. Cet article explique comment localiser l'image, déclencher l'action de clic et vérifier que la navigation réussit.

  • 🇧🇷 Action principale : Utilisez driver.findElement(By.cssSelector(…)).click() pour effectuer un clic sur n'importe quel élément image rendu à l'intérieur d'une ancre.
  • (I.e. Choix du localisateur : Les méthodes By.linkText et By.partialLinkText ne fonctionnent pas pour les images ; il est donc nécessaire d’utiliser By.cssSelector ou By.xpath.
  • 🧪 Étape de vérification : Confirmez la réussite du clic en vérifiant le nouveau titre de la page avec driver.getTitle() par rapport à la chaîne de destination attendue.
  • 🤖 Assistance IA : Les plugins d'IA modernes suggèrent des sélecteurs CSS stables et des localisateurs à réparation automatique lorsque le balisage de l'application ou les valeurs des attributs changent.
  • ️ Pièges courants : Les images masquées, chargées à la demande ou superposées nécessitent souvent des attentes explicites, un défilement pour les afficher, ou JavaScript : cliquez pour vous enregistrer correctement.
En savoir plus

Cliquez sur l'image dans Selenium

Cliquer sur une image dans Selenium L'utilisation de WebDriver est courante lorsqu'une icône, un logo ou une miniature sert de lien de navigation. Comme les images ne contiennent aucun texte visible, les localisateurs de texte de lien traditionnels sont inefficaces et une stratégie de sélection plus fiable est nécessaire.

Accéder aux liens d'images

Les liens images sont des ancres sur les pages web représentées par une image qui, lorsqu'on clique dessus, fait naviguer le navigateur vers une autre fenêtre ou page.

Comme il s'agit d'images, nous ne pouvons pas utiliser les méthodes By.linkText() et By.partialLinkText() car les liens d'images ne contiennent aucun texte.

Dans ce cas, il convient d'utiliser soit By.cssSelector, soit By.xpath. La première méthode est généralement privilégiée pour sa simplicité et sa lisibilité.

Dans l'exemple ci-dessous, nous accéderons au logo « Facebook » dans la partie supérieure gauche de la page de récupération de mot de passe de Facebook.

Accéder aux liens d'images

Nous utiliserons By.cssSelector et l'attribut « title » de l'élément pour accéder au lien de l'image. Nous vérifierons ensuite que le navigateur a bien été redirigé vers la page d'accueil de Facebook.

Java Code Exemple

Selenium L'extrait de code WebDriver lance Chrome, ouvre la page de récupération du mot de passe Facebook, clique sur l'image du logo Facebook et affiche le titre de la page résultante.

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }
        driver.close();
    }
}

Résultat

Cliquez sur l'image dans Selenium Pilote Web

Meilleures pratiques pour cliquer sur les images

Quelques habitudes permettent de rendre l'automatisation des clics sur les images plus fiable sur tous les navigateurs et toutes les tailles d'écran.

  • Privilégiez un attribut stable tel que title, alt, aria-label ou data-* plutôt que des chemins CSS profondément imbriqués.
  • Ajoutez un WebDriverWait explicite pour ElementToBeClickable avant de déclencher le clic.
  • Pour les images chargées de manière différée, faites défiler l'élément jusqu'à ce qu'il soit visible avec JavascriptL'exécuteur testamentaire en premier.
  • Si une superposition transparente intercepte le clic, utilisez une méthode alternative. JavaScript : cliquez sur l’élément sous-jacent.
  • Validez la navigation avec driver.getTitle() ou un élément unique sur la page de destination.

ARTICLES LIÉS

Comment l'IA améliore les stratégies de localisation d'images

Les outils de test assistés par l'IA tels que TestimMabl et Healenium analysent le DOM autour d'une image et proposent des localisateurs auto-réparateurs. Lorsqu'un nom de classe ou un attribut change après une mise à jour, le framework le remplace automatiquement par l'alternative la plus stable, ce qui réduit les dysfonctionnements liés à la navigation par icônes.

Les ingénieurs peuvent également utiliser ChatGPT ou GitHub Copilot pour générer des extraits de code WebDriver, suggérer des expressions CSS ou XPath robustes pour une image et rédiger des assertions pour la page qui se charge après le clic. Le code généré doit néanmoins être vérifié afin de s'assurer de sa correction et de sa gestion des temps d'attente et des superpositions.

Conclusion

Cliquer sur les liens d'images dans Selenium WebDriver est simple d'utilisation une fois qu'un localisateur stable a été choisi. L'utilisation de `By.cssSelector` avec l'attribut `title` ou `alt` est la méthode la plus lisible ; `By.xpath` est la solution de repli lorsque le balisage est complexe, et les attentes explicites garantissent la fiabilité du script lors de ses exécutions successives.

FAQ

Localisez l'image à l'aide de By.cssSelector ou By.xpath en utilisant un attribut stable tel que title, alt ou aria-label, puis appelez .click() sur l'élément WebElement obtenu. Vérifiez le résultat avec driver.getTitle() ou un élément unique sur la page de destination.

Oui. Des outils tels que TestimMabl et ChatGPT analysent le DOM environnant et proposent un sélecteur stable basé sur les attributs title, alt, aria-label ou data. Les ingénieurs doivent néanmoins vérifier l'unicité et la robustesse du sélecteur généré.

Un localisateur auto-réparateur est une fonctionnalité d'IA qui remplace le sélecteur d'origine par un autre lorsque celui-ci échoue. Des frameworks comme Healenium et Mabl analysent les modifications d'attributs autour d'une image et choisissent le remplacement le plus stable, ce qui réduit les tests instables après les actualisations de l'interface utilisateur.

Ces deux méthodes de recherche s'appliquent au texte visible à l'intérieur d'une ancre. Un lien image contient une balise <img> et ne présente aucun élément de texte ; la recherche ne renvoie donc jamais de résultat. Utilisez plutôt By.cssSelector ou By.xpath avec les attributs title, alt ou aria-label.

Si une superposition, une fenêtre modale ou une infobulle bloque l'image, faites-la défiler pour la rendre visible avec JavascriptExécutez un exécuteur et ajoutez un WebDriverWait pour ElementToBeClickable. En cas de repli, exécutez un JavaScript : cliquez sur l’élément Web pour contourner le chevauchementping couche.

Vérifiez le nouveau titre de la page avec driver.getTitle(), le titre actuel URL avec driver.getCurrentUrl(), ou la présence d'un élément unique sur la page de destination. La combinaison de ces vérifications permet au test de s'assurer que le clic a bien déclenché la navigation.

Résumez cet article avec :