So überprüfen Sie den Tooltip in Selenium WebTreiber

Tooltip ein Selenium

A Tooltip ein Selenium ist ein Text, der erscheint, wenn man mit der Maus über ein Objekt auf einer Webseite fährt. Das Objekt kann ein Link, ein Bild, eine Schaltfläche, ein Textbereich usw. sein. Der Tooltip-Text gibt oft weitere Informationen über das Objekt, über das der Benutzer mit dem Mauszeiger fährt.

Tooltips wurden traditionell als „Titel“-Attribut für ein Element implementiert. Der Wert dieses Attributs wurde beim Bewegen der Maus als Tooltip angezeigt. Dies ist ein statischer Text ohne Stil, der Informationen zum Element enthält.

Mittlerweile gibt es viele Plugins für die Implementierung von „Tooltips“. Erweiterte Tooltips mit Styling, Rendering, Bildern und Links werden implementiert mit JavaSkript-/JQuery-Plugins oder Verwendung von CSS-Tooltips.

• Für den Zugriff oder die Überprüfung der statischen Tooltips, die mithilfe des HTML-Attributs „title“ implementiert werden, können wir einfach die Methode getAttribute(“title“) des WebElements verwenden. Der zurückgegebene Wert dieser Methode (der Tooltip-Text) wird zur Überprüfung mit einem erwarteten Wert verglichen.
• Für andere Formen von Tooltip-Implementierungen müssen wir die vom Web Driver bereitgestellte „Advanced User Interactions API“ verwenden, um den Mauszeigereffekt zu erstellen und dann den Tooltip für das Element abzurufen.

Eine kurze Beschreibung der Advanced User Interactions API

Die Advanced User Interactions API stellt die API für Benutzeraktionen wie Ziehen und Ablegen, Bewegen des Mauszeigers, Mehrfachauswahl, Drücken und Loslassen von Tasten und andere Aktionen über Tastatur oder Maus auf einer Webseite bereit.

Sie können das verweisen refer Link Weitere Informationen zur API.

Sehen wir uns hier an, wie wir einige Klassen und Methoden verwenden, die wir benötigen, um ein Schiebereglerelement um einen Versatz zu verschieben.

Schritt 1) Um die API zu verwenden, müssen die folgenden Pakete/Klassen importiert werden:

Schritt 2) Erstellen Sie ein Objekt der Klasse „Aktionen“ und erstellen Sie die Reihenfolge der Benutzeraktionen. Die Actions-Klasse wird verwendet, um die Abfolge von Benutzeraktionen wie moveToElement(), dragAndDrop() usw. zu erstellen. Verschiedene Methoden im Zusammenhang mit Benutzeraktionen werden von der API bereitgestellt.

Das Treiberobjekt wird seinem Konstruktor als Parameter bereitgestellt.

Schritt 3) Erstellen Sie ein Aktionsobjekt mit der Methode build() der Klasse „Actions“. Rufen Sie die perform()-Methode auf, um alle vom Actions-Objekt (hier Builder) erstellten Aktionen auszuführen.

Wir haben gesehen, wie man einige der von der API bereitgestellten Benutzeraktionsmethoden verwendet – clickAndHold(element), moveByOffset(10,0), release(). Die API stellt viele solcher Methoden bereit.

Siehe die Link für weitere Informationen an.

So überprüfen (behandeln) Sie den Tooltip in Selenium

Sehen wir uns die Demonstration des Zugriffs und der Überprüfung der Tooltips im einfachen Szenario an

• Szenario 1: Tooltip wird mithilfe des Attributs „title“ implementiert
• Szenario 2: Tooltip wird mithilfe eines jQuery-Plugins implementiert.

Szenario 1: HTML-Attribut „title“.

Nehmen wir für diesen Fall die Beispielseite – https://demo.guru99.com/test/social-icon.html.

Wir werden versuchen, den Tooltip des „Github“-Symbols oben rechts auf der Seite zu überprüfen.

Dazu suchen wir zunächst das Element, rufen sein „title“-Attribut ab und überprüfen es mit dem erwarteten Tooltip-Text.

Da wir davon ausgehen, dass sich der Tooltip im Attribut „title“ befindet, automatisieren wir nicht einmal den Mouse-Hover-Effekt, sondern rufen einfach den Wert des Attributs mit der Methode „getAttribute()“ ab.

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

Erläuterung des Codes

1. Suchen Sie das WebElement, das das „Github“-Symbol darstellt.
2. Rufen Sie das Attribut „title“ mit der Methode getAttribute() ab.
3. Setzen Sie den Wert anhand des erwarteten Tooltip-Werts fest.

Szenario 2: JQuery-Plugin

Zur Implementierung der Tooltips stehen zahlreiche JQuery-Plugins zur Verfügung, und jedes hat eine etwas andere Form der Implementierung.

Einige Plugins erwarten, dass der Tooltip-HTML-Code ständig neben dem Element vorhanden ist, für das der Tooltip gilt, während andere ein dynamisches „div“-Tag erstellen, das im Handumdrehen angezeigt wird, wenn Sie mit der Maus über das Element fahren.

Betrachten wir für unsere Demonstration die „jQuery Tools Tooltip“-Methode zur Tooltip-Implementierung.

Hier in der URL – https://demo.guru99.com/test/tooltip.html Sie können die Demo sehen, in der wir, wenn wir mit der Maus über „Jetzt herunterladen“ fahren, einen erweiterten Tooltip mit einem Bild, einem Callout-Hintergrund, einer Tabelle und einem darin enthaltenen Link erhalten, der anklickbar ist.

Wenn Sie sich die Quelle unten ansehen, können Sie sehen, dass das div-Tag, das den Tooltip darstellt, immer neben dem Tag des Links „Jetzt herunterladen“ vorhanden ist. Der Code im Skript-Tag unten steuert jedoch, wann es angezeigt werden muss.

Versuchen wir, nur den Linktext im Tooltip für unsere Demonstration hier zu überprüfen.

Wir suchen zuerst das WebElement, das dem „Jetzt herunterladen“ entspricht. Dann bewegen wir uns mithilfe der Interactions API zum Element (Mauszeiger darüber). Als Nächstes suchen wir das WebElement, das dem Link im angezeigten Tooltip entspricht, und vergleichen es mit dem erwarteten Text.

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

Code Erklärung

1. Suchen Sie das WebElement, das dem Element „Jetzt herunterladen“ entspricht, über das wir mit der Maus fahren.
2. Bewegen Sie den Mauszeiger über die Interaktions-API auf „Jetzt herunterladen“.
3. Angenommen, der Tooltip wird angezeigt. Suchen Sie das WebElement, das dem Link im Tooltip entspricht, also dem „a“-Tag.
4. Überprüfen Sie den mit getText() abgerufenen Tooltip-Text des Links anhand eines erwarteten Werts, den wir in „expectedToolTip“ gespeichert haben.

Zusammenfassung

In diesem Tutorial haben Sie gelernt, wie Sie auf Tooltips zugreifen Selenium Web-Treiber.

Tooltips werden auf unterschiedliche Weise implementiert –

• Die grundlegende Implementierung basiert auf dem HTML-Attribut „title“. getAttribute(title) ruft den Wert des Tooltips ab.
• Andere Tooltip-Implementierungen wie JQuery und CSS-Tooltips erfordern die Interactions API, um einen Maus-Hover-Effekt zu erzeugen

API für erweiterte Benutzerinteraktionen –

• moveToElement(element) der Actions-Klasse wird verwendet, um mit der Maus über ein Element zu fahren.
• Die Build()-Methode der Actions-Klasse erstellt die Abfolge von Benutzeraktionen in einem Action-Objekt.
• Perform() der Action-Klasse führt die gesamte Abfolge von Benutzeraktionen auf einmal aus.

Um einen Tooltip zu überprüfen, müssen wir zunächst mit der Maus über das Element fahren, dann das Element finden, das dem Tooltip entspricht, und seinen Text oder andere Werte abrufen, um ihn mit den erwarteten Werten zu vergleichen.