Come verificare il tooltip usando Selenium WebDriver

Sommario:

Anonim

Tooltip in selenio

Un suggerimento in Selenium è un testo che appare quando il mouse passa sopra un oggetto in una pagina web. L'oggetto può essere un collegamento, un'immagine, un pulsante, un'area di testo, ecc. Il testo del suggerimento spesso fornisce maggiori informazioni sull'oggetto su cui l'utente passa sopra il cursore del mouse.

Le descrizioni comandi venivano tradizionalmente implementate come attributo "titolo" a un elemento. Il valore di questo attributo è stato mostrato come una descrizione comando al passaggio del mouse. Questo è un testo statico che fornisce informazioni sull'elemento senza stile.

Ora sono disponibili molti plugin per l'implementazione dei "suggerimenti". I tooltip avanzati con stile, rendering, immagini e collegamenti vengono implementati utilizzando plugin JavaScript / JQuery o utilizzando CSS Tooltips.

  • Per accedere o verificare i tooltip statici implementati utilizzando l'attributo HTML "title", possiamo semplicemente utilizzare il metodo getAttribute ("title") di WebElement. Il valore restituito da questo metodo (che è il testo della descrizione comando) viene confrontato con un valore previsto per la verifica.
  • Per altre forme di implementazione dei tooltip, dovremo usare la "Advanced User Interactions API" fornita dal Web Driver per creare l'effetto al passaggio del mouse e quindi recuperare il tooltip per l'elemento.

Breve descrizione dell'API Advanced User Interactions:

L'API Advanced User Interactions fornisce l'API per le azioni dell'utente come il trascinamento della selezione, il passaggio del mouse, la selezione multipla, la pressione e il rilascio dei tasti e altre azioni utilizzando la tastiera o il mouse su una pagina web.

Puoi fare riferimento a questo link per maggiori dettagli sull'API.

https://seleniumhq.github.io/selenium/docs/api/java/index.html?org/openqa/selenium/interactions/Actions.html

Vediamo ora come utilizzare un paio di classi e metodi di cui avremmo bisogno per spostare un elemento slider di un offset.

Passaggio 1) Per utilizzare l'API, è necessario importare i seguenti pacchetti / classi:

Passaggio 2) Creare un oggetto della classe "Azioni" e costruire la sequenza di azioni dell'utente. La classe Actions viene utilizzata per costruire la sequenza di azioni dell'utente come moveToElement (), dragAndDrop () ecc. Vari metodi relativi alle azioni dell'utente sono forniti dall'API.

L'oggetto driver viene fornito come parametro al suo costruttore.

Passaggio 3) Creare un oggetto azione utilizzando il metodo build () della classe "Actions". Chiama il metodo perform () per eseguire tutte le azioni create dall'oggetto Actions (builder qui).

Abbiamo visto come utilizzare alcuni dei metodi di azioni utente forniti dall'API: clickAndHold (element), moveByOffset (10,0), release (). L'API fornisce molti di questi metodi.

Fare riferimento al collegamento per maggiori dettagli.

Come ottenere il testo della descrizione comando in Selenium Webdriver

Vediamo la dimostrazione di accesso e verifica delle descrizioni degli strumenti nello scenario semplice

  • Scenario 1: la descrizione comando viene implementata utilizzando l'attributo "titolo"
  • Scenario 2: il tooltip viene implementato utilizzando un plugin jQuery.

Scenario 1: attributo "titolo" HTML

In questo caso, prendiamo il sito di esempio: http://demo.guru99.com/test/social-icon.html.

Cercheremo di verificare il suggerimento dell'icona "github" in alto a destra nella pagina.

Per farlo, prima troveremo l'elemento, ne prenderemo l'attributo "titolo" e lo verificheremo con il testo del suggerimento previsto.

Poiché, presumendo che la descrizione comandi sia nell'attributo "title", non stiamo nemmeno automatizzando l'effetto passaggio del mouse ma semplicemente recuperando il valore dell'attributo utilizzando il metodo "getAttribute ()".

Ecco il codice

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium. *;descrizione comando public class {public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/social-icon.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");Driver WebDriver = nuovo ChromeDriver ();driver.get (baseUrl);String expectedTooltip = "Github";// Trova l'icona Github in alto a destra nell'intestazioneWebElement github = driver.findElement (By.xpath (".//*[@ class = 'soc-ico show-round'] / a [4]"));// ottiene il valore dell'attributo "titolo" dell'icona githubString actualTooltip = github.getAttribute ("titolo");// Asserisce che il valore del tooltip sia quello previstoSystem.out.println ("Titolo effettivo della descrizione comando" + suggerimento strumento effettivo);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Test case superato");}driver.close ();}}

Spiegazione del codice

  1. Trova il WebElement che rappresenta l'icona "github".
  2. Ottieni il suo attributo "title" utilizzando il metodo getAttribute ().
  3. Asserire il valore rispetto al valore della descrizione comando previsto.

Scenario 2: plug-in JQuery:

Sono disponibili molti plugin JQuery per implementare i suggerimenti e ognuno ha una forma di implementazione leggermente diversa.

Alcuni plugin si aspettano che il tooltip HTML sia sempre presente accanto all'elemento per il quale il tooltip è applicabile, mentre gli altri creano un tag dinamico "div", che appare al volo mentre si passa con il mouse sopra l'elemento.

Per la nostra dimostrazione, consideriamo il modo "jQuery Tools Tooltip" di implementazione del tooltip.

Qui nell'URL - http://demo.guru99.com/test/tooltip.html puoi vedere la demo dove al passaggio del mouse su "Scarica ora", otteniamo un tooltip avanzato con un'immagine, uno sfondo di callout, una tabella e un link al suo interno cliccabile.

Se guardi la fonte di seguito, puoi vedere che il tag div che rappresenta la descrizione comando è sempre presente accanto al tag del link "Scarica ora". Tuttavia, il codice all'interno del tag dello script sottostante controlla quando deve essere visualizzato.

Proviamo a verificare solo il testo del collegamento nel suggerimento per la nostra dimostrazione qui.

Per prima cosa troveremo il WebElement corrispondente a "Scarica ora". Quindi utilizzando l'API Interactions, ci sposteremo sull'elemento (mouse-hover). Successivamente, troveremo il WebElement che corrisponde al collegamento all'interno del suggerimento visualizzato e lo verificheremo rispetto al testo previsto.

Ecco il codice

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 pubblica JqueryToolTip {public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/tooltip.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");Driver WebDriver = nuovo ChromeDriver ();String expectedTooltip = "Novità nella 3.2";driver.get (baseUrl);WebElement download = driver.findElement (By.xpath (".//*[@ id = 'download_now']"));Generatore di azioni = nuove azioni (driver);builder.clickAndHold (). moveToElement (download);builder.moveToElement (download) .build (). perform ();ToolTipElement WebElement = driver.findElement (By.xpath (".//*[@ class = 'box'] / div / a"));String actualTooltip = toolTipElement.getText ();System.out.println ("Titolo effettivo della descrizione comando" + suggerimento strumento effettivo);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Test case superato");}driver.close ();}}

Spiegazione del codice

  1. Trova il WebElement che corrisponde all'elemento "scarica ora" su cui passeremo il mouse.
  2. Utilizzando l'API Interactions, passa con il mouse su "Scarica ora".
  3. Supponendo che il tooltip sia visualizzato, trova il WebElement che corrisponde al collegamento all'interno del tooltip, cioè il tag "a".
  4. Verifica il testo della descrizione comando del collegamento recuperato utilizzando getText () rispetto a un valore atteso che abbiamo memorizzato in "expectedToolTip"

Sommario:

In questo tutorial, hai imparato come accedere ai suggerimenti utilizzando il driver Web Selenium.

  • I suggerimenti vengono implementati in diversi modi:
    • L'implementazione di base si basa sull'attributo "title" dell'HTML. getAttribute (title) ottiene il valore del tooltip.
    • Altre implementazioni di tooltip come JQuery, i tooltip CSS richiedono l'API Interactions per creare un effetto al passaggio del mouse
  • API per interazioni utente avanzate
    • moveToElement (elemento) della classe Actions viene utilizzato per passare il mouse su un elemento.
    • Il metodo Build () della classe Actions crea la sequenza di azioni dell'utente in un oggetto Action.
    • La classe Perform () of Action esegue contemporaneamente tutte le sequenze di azioni dell'utente.
  • Per verificare un suggerimento, dobbiamo prima passare il mouse sull'elemento, quindi trovare l'elemento che corrisponde al suggerimento e ottenere il suo testo o altri valori da verificare rispetto ai valori attesi.