So überprüfen Sie den Tooltip in Selenium

Tooltip ein Selenium

A Tooltip ein Selenium Ein Tooltip ist ein kurzer Text, der erscheint, wenn man mit der Maus über ein Objekt auf einer Webseite fährt. Bei diesem Objekt kann es sich um einen Link, ein Bild, eine Schaltfläche oder ein Textfeld handeln. Der Tooltip-Text liefert oft zusätzliche Informationen über das Element unter dem Cursor.

Tooltips wurden traditionell als „title“-Attribut eines Elements implementiert. Der Wert dieses Attributs wurde beim Überfahren mit der Maus als Tooltip angezeigt. Es handelte sich dabei um einen statischen Text, der Informationen über das Element ohne Formatierung lieferte.

Heute stehen zahlreiche Plugins zur Implementierung von Tooltips zur Verfügung. Erweiterte Tooltips mit Styling, Rendering, Bildern und Links werden mithilfe von [hier fehlende Information] erstellt. JavaSkript- oder jQuery-Plugins oder Tooltips, die ausschließlich auf CSS basieren.

• Um auf statische Tooltips zuzugreifen oder diese zu überprüfen, die über das HTML-Attribut „title“ implementiert wurden, verwenden Sie die getAttribute("title") Die Methode des WebElements wird aufgerufen. Der zurückgegebene Wert (der Tooltip-Text) wird zur Überprüfung mit einem erwarteten Wert verglichen.
• Für andere Tooltip-Implementierungen verwenden Sie die von WebDriver bereitgestellte „Advanced User Interactions API“, um den Mouse-Hover-Effekt zu erzeugen und anschließend den Tooltip für das Element abzurufen.

Eine kurze Beschreibung der Advanced User Interactions API

Die Advanced User Interactions API ermöglicht die Nutzung von Benutzeraktionen wie Drag & Drop, Hovern, Mehrfachauswahl, Tastendruck und -loslassen sowie anderen Tastatur- oder Mausaktionen auf einer Webseite.

Sie können sich darauf beziehen offizielle Klassenreferenz für Aktionen Weitere Informationen zur API.

Vor dem Sprungping Um in verschiedene Szenarien zu gelangen, wollen wir uns die Klassen und Methoden ansehen, die wir benötigen, um ein Slider-Element um einen Offset zu verschieben.

Schritt 1) Um die API zu verwenden, importieren Sie die folgenden Pakete und Klassen:

Schritt 2) Erstellen Sie ein Objekt der Klasse „Actions“ und definieren Sie die Abfolge der Benutzeraktionen. Die Klasse „Actions“ ermöglicht die Verkettung von Aktionen wie moveToElement() und dragAndDrop(). Das Treiberobjekt wird als Parameter an den Konstruktor übergeben.

Schritt 3) Erstellen Sie ein Action-Objekt mithilfe der build()-Methode der Klasse „Actions“. Rufen Sie die perform()-Methode auf, um alle in der Warteschlange befindlichen Aktionen des Builders auszuführen.

Wir haben gesehen, wie man einige der von der API bereitgestellten Benutzeraktionsmethoden verwendet: clickAndHold(element), moveByOffset(10, 0) und release(). Die API stellt noch viele weitere bereit.

Tooltip-Implementierung vs. Selenium Verifikationsansatz

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

Lassen Sie uns anhand zweier gängiger Szenarien den Zugriff auf und die Überprüfung von Tooltips durchgehen:

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

Szenario 1: HTML-Attribut „title“

In diesem Fall verwenden wir die Beispielseite https://demo.guru99.com/test/social-icon.html und überprüfen Sie den Tooltip des „github“-Symbols oben rechts auf der Seite.

Wir lokalisieren zuerst das Element, lesen dann sein „title“-Attribut und vergleichen es mit dem erwarteten Tooltip-Text.

Da sich der Tooltip im Attribut „title“ befindet, automatisieren wir nicht einmal das Mouseover; wir rufen den Attributwert einfach 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]"));

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

Erklärung des Codes:

1. Suchen Sie das WebElement, das das „Github“-Symbol darstellt.
2. Lesen Sie das „title“-Attribut mit der Methode getAttribute().
3. Vergleichen Sie den Wert mit dem erwarteten Tooltip-Text.

Selenium 4 Tipp: Bevorzugen getDomAttribute("title") für das wörtliche HTML-Attribut und lassen Selenium Der Manager löst den Treiber auf, anstatt ihn fest zu codieren. chromedriver.exe.

Szenario 2: jQuery-Plugin

Viele jQuery-Plugins implementieren Tooltips, und jedes einzelne wird etwas anders dargestellt.

Manche Plugins behalten die Tooltip-Markup-Informationen stets neben dem Auslöser-Element bei, während andere ein „div“-Tag dynamisch erstellen, sobald der Cursor in den Auslöser eintritt.

Für diese Demonstration verwenden wir den Stil „jQuery Tools Tooltip“.

Öffne https://demo.guru99.com/test/tooltip.htmlBeim Überfahren von „Jetzt herunterladen“ mit der Maus wird ein erweiterter Tooltip mit einem Bild, einem Hintergrund mit Beschriftung, einer kleinen Tabelle und einem anklickbaren Link angezeigt.

Im Quelltext befindet sich das Div-Element für den Tooltip bereits neben dem Link „Jetzt herunterladen“. Das darunter stehende Skript-Tag steuert dessen Anzeige.

Nun überprüfen wir den im Tooltip angezeigten Linktext.

Suchen Sie zunächst das WebElement für „Jetzt herunterladen“. Verwenden Sie die Interactions API, um zum Element zu navigieren (Mauszeiger). Suchen Sie anschließend das WebElement, das dem Link im angezeigten Tooltip zugeordnet ist, und vergleichen Sie dessen Text mit dem erwarteten Wert.

Hier ist der 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 Erläuterung:

1. Suchen Sie das WebElement, das dem Element „Jetzt herunterladen“ entspricht, über das Sie mit der Maus fahren.
2. Verwenden Sie die Interactions API, um den Cursor auf „Jetzt herunterladen“ zu bewegen.
3. Sobald der Tooltip sichtbar ist, suchen Sie das WebElement, das den Link innerhalb des Tooltips darstellt (das „a“-Tag).
4. Lesen Sie den Tooltip-Text mit getText() und vergleichen Sie ihn mit dem in gespeicherten Erwartungswert. expectedTooltip.

Häufig gestellte Fragen