Come fare clic sull'immagine in Selenium Webdriver

Facendo clic su un'immagine in Selenium WebDriver è un'operazione comune quando un'icona, un logo o una miniatura si comportano come un collegamento di navigazione. Poiché le immagini non contengono testo visibile, i tradizionali localizzatori di testo dei collegamenti risultano inefficaci ed è necessaria una strategia di selezione più affidabile.

Accesso ai collegamenti immagine

I link immagine sono ancoraggi presenti sulle pagine web, rappresentati da un'immagine che, una volta cliccata, reindirizza il browser a una finestra o pagina diversa.

Poiché si tratta di immagini, non possiamo utilizzare i metodi By.linkText() e By.partialLinkText() perché i link alle immagini non contengono alcun testo.

In questo caso, dovremmo ricorrere all'utilizzo di By.cssSelector o By.xpath. Il primo metodo è generalmente preferibile per la sua semplicità e leggibilità.

Nell'esempio seguente, accederemo al logo "Facebook" nella parte in alto a sinistra della pagina di recupero password di Facebook.

Utilizzeremo By.cssSelector e l'attributo "title" dell'elemento per accedere al link dell'immagine. Successivamente, verificheremo che il browser sia stato reindirizzato alla homepage di Facebook.

Java Code Esempio

Le seguenti Selenium Il frammento di codice WebDriver avvia Chrome, apre la pagina di recupero della password di Facebook, fa clic sull'immagine del logo di Facebook e verifica il titolo della pagina risultante.

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

Risultato

Migliori pratiche per scattare foto

Alcune abitudini rendono l'automazione del clic sulle immagini più affidabile su diversi browser e dimensioni dello schermo.

• È preferibile utilizzare attributi stabili come title, alt, aria-label o data-* piuttosto che percorsi CSS annidati in profondità.
• Aggiungi un WebDriverWait esplicito per ElementToBeClickable prima di emettere il clic.
• Per le immagini caricate in modo differito, scorri l'elemento per visualizzarlo con JavascriptPrima l'esecutore.
• Se una sovrapposizione trasparente intercetta il clic, torna a un JavaLo script fa clic sull'elemento sottostante.
• Convalida la navigazione con driver.getTitle() o con un elemento univoco sulla pagina di destinazione.

Come l'IA migliora le strategie di localizzazione delle immagini

Strumenti di test assistiti dall'IA come TestimMabl e Healenium analizzano il DOM intorno a un'immagine e propongono localizzatori auto-riparanti. Quando il nome di una classe o un attributo cambia dopo una release, il framework sostituisce automaticamente l'alternativa con quella più stabile, riducendo così i malfunzionamenti nella navigazione basata su icone.

Gli ingegneri possono anche utilizzare ChatGPT o GitHub Copilot per generare snippet di WebDriver, suggerire espressioni CSS o XPath efficaci per un'immagine e redigere asserzioni per la pagina che si carica dopo il clic. Il codice generato deve comunque essere rivisto per verificarne la correttezza e la gestione di attese e sovrapposizioni.

Conclusione

Facendo clic sui collegamenti delle immagini in Selenium WebDriver è semplice una volta scelto un localizzatore stabile. By.cssSelector con l'attributo title o alt è l'approccio più leggibile, By.xpath è il ripiego quando il markup è complesso e le attese esplicite rendono lo script affidabile tra le diverse esecuzioni.

DOMANDE FREQUENTI