Tooltip in Selen
Ein Tooltip in Selen ist ein Text, der angezeigt wird, wenn Sie mit der Maus über ein Objekt auf einer Webseite fahren. Das Objekt kann ein Link, ein Bild, eine Schaltfläche, ein Textbereich usw. sein. Der QuickInfo-Text enthält häufig weitere Informationen zu dem Objekt, auf dem der Benutzer mit der Maus über den Mauszeiger fährt.
Tooltips wurden traditionell als 'title'-Attribut für ein Element implementiert. Der Wert dieses Attributs wurde als Tooltip beim Bewegen der Maus angezeigt. Dies ist ein statischer Text, der Informationen über das Element ohne Stil enthält.
Jetzt sind viele Plugins für die Implementierung von "Tooltipps" verfügbar. Erweiterte Tooltips mit Stil, Rendering, Bildern und Links werden mithilfe von JavaScript / JQuery-Plugins oder mithilfe von CSS-Tooltips implementiert.
- Um auf die statischen QuickInfos zuzugreifen oder diese zu überprüfen, die mit dem HTML-Attribut "title" implementiert wurden, können Sie einfach die Methode getAttribute ("title") des WebElement verwenden. Der zurückgegebene Wert dieser Methode (der Tooltip-Text) wird mit einem erwarteten Wert zur Überprüfung verglichen.
- Für andere Formen von Tooltip-Implementierungen müssen wir die vom Web-Treiber bereitgestellte "Advanced User Interactions API" verwenden, um den Maus-Hover-Effekt zu erstellen und dann den Tooltip für das Element abzurufen.
Ein Überblick über die Advanced User Interactions API:
Die API für erweiterte Benutzerinteraktionen bietet die API für Benutzeraktionen wie Ziehen und Ablegen, Schweben, Mehrfachauswahl, Drücken und Loslassen von Tasten und andere Aktionen mit Tastatur oder Maus auf einer Webseite.
Sie können auf diesen Link verweisen, um weitere Informationen zur API zu erhalten.
https://seleniumhq.github.io/selenium/docs/api/java/index.html?org/openqa/selenium/interactions/Actions.html
Hier sehen wir uns an, wie Sie einige Klassen und Methoden verwenden, um ein Schiebereglerelement um einen Versatz zu verschieben.
Schritt 1) Um die API verwenden zu können, 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 Folge von Benutzeraktionen wie moveToElement (), dragAndDrop () usw. zu erstellen. Verschiedene Methoden für Benutzeraktionen werden von der API bereitgestellt.
Das Treiberobjekt wird seinem Konstruktor als Parameter bereitgestellt.
Schritt 3) Erstellen Sie ein Aktionsobjekt mit der build () -Methode der Klasse "Actions". Rufen Sie die perform () -Methode auf, um alle vom Actions-Objekt erstellten Aktionen auszuführen (Builder hier).
Wir haben gesehen, wie einige der von der API bereitgestellten Benutzeraktionsmethoden verwendet werden - clickAndHold (Element), moveByOffset (10,0), release (). Die API bietet viele solcher Methoden.
Weitere Informationen finden Sie unter dem Link.
So erhalten Sie Tooltip-Text in Selenium Webdriver
Sehen wir uns die Demonstration des Zugriffs auf und der Überprüfung der Tooltipps im einfachen Szenario an
- Szenario 1: Der Tooltip wird mithilfe des Attributs "title" implementiert
- Szenario 2: Der Tooltip wird mithilfe eines jQuery-Plugins implementiert.
Szenario 1: HTML-Attribut 'title'
Nehmen wir für diesen Fall die Beispielseite http://demo.guru99.com/test/social-icon.html.
Wir werden versuchen, den Tooltip des "Github" -Symbols oben rechts auf der Seite zu überprüfen.
Dazu finden wir zuerst das Element, erhalten das Attribut 'title' und überprüfen es mit dem erwarteten QuickInfo-Text.
Da wir davon ausgehen, dass sich der Tooltip im Attribut "title" befindet, automatisieren wir nicht einmal den Maus-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. *;öffentliche Klasse ToolTip {public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/social-icon.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");WebDriver-Treiber = neuer ChromeDriver ();driver.get (baseUrl);String expectedTooltip = "Github";// Finde das Github-Symbol oben rechts in der KopfzeileWebElement github = driver.findElement (By.xpath (".//*[@ class = 'soc-ico show-round'] / a [4]"));// Den Wert des Attributs "title" des Github-Symbols abrufenString actualTooltip = github.getAttribute ("title");// Bestätige, dass der Wert des Tooltips wie erwartet istSystem.out.println ("Tatsächlicher Titel des Tooltips" + actualTooltip);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Testfall bestanden");}}driver.close ();}}}}
Erklärung des Codes
- Suchen Sie das WebElement, das das Symbol "Github" darstellt.
- Rufen Sie das Attribut "title" mit der Methode getAttribute () ab.
- Setzen Sie den Wert gegen den erwarteten Tooltip-Wert.
Szenario 2: JQuery-Plugin:
Für die 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 immer neben dem Element vorhanden ist, für das der Tooltip gilt, während die anderen ein dynamisches "div" -Tag erstellen, das im laufenden Betrieb angezeigt wird, während Sie mit der Maus über das Element fahren.
Betrachten wir für unsere Demonstration die "jQuery Tools Tooltip" -Methode für die Implementierung von Tooltips.
Hier in der URL - http://demo.guru99.com/test/tooltip.html können Sie die Demo sehen, in der Sie mit der Maus über "Jetzt herunterladen" einen erweiterten Tooltip mit einem Bild, einem Callout-Hintergrund, einer Tabelle und ein Link darin, der anklickbar ist.
Wenn Sie sich die Quelle unten ansehen, sehen Sie, 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 er eingeblendet werden muss.
Lassen Sie uns versuchen, nur den Linktext im Tooltip für unsere Demonstration hier zu überprüfen.
Wir werden zuerst das WebElement finden, das dem "Jetzt herunterladen" entspricht. Dann bewegen wir uns mit der Interactions-API zum Element (Mouse-Hover). Als Nächstes finden wir das WebElement, das dem Link in der angezeigten QuickInfo entspricht, und überprüfen es anhand des erwarteten Textes.
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. *;öffentliche Klasse JqueryToolTip {public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/tooltip.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");WebDriver-Treiber = neuer ChromeDriver ();String expectedTooltip = "Was ist neu in 3.2";driver.get (baseUrl);WebElement download = driver.findElement (By.xpath (".//*[@ id = 'download_now']"));Builder für Aktionen = neue Aktionen (Treiber);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 ("Tatsächlicher Titel des Tooltips" + actualTooltip);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Testfall bestanden");}}driver.close ();}}}}
Code Erklärung
- Suchen Sie das WebElement, das dem Element "Jetzt herunterladen" entspricht, das wir mit der Maus bewegen.
- Bewegen Sie den Mauszeiger über die Interaktions-API auf "Jetzt herunterladen".
- Angenommen, der Tooltip wird angezeigt, suchen Sie das WebElement, das dem Link im Tooltip entspricht, dh das "a" -Tag.
- Überprüfen Sie den Tooltip-Text des Links, der mit getText () abgerufen wurde, anhand eines erwarteten Werts, den wir in "expectedToolTip" gespeichert haben.
Zusammenfassung:
In diesem Tutorial haben Sie gelernt, wie Sie mit dem Selenium-Webtreiber auf QuickInfos zugreifen.
- Tooltipps 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 erzielen
- Erweiterte Benutzerinteraktions-API
- moveToElement (Element) der Actions-Klasse wird verwendet, um mit der Maus über ein Element zu fahren.
- Die Build () -Methode der Actions-Klasse erstellt die Folge von Benutzeraktionen in einem Action-Objekt.
- Die Klasse Perform () of Action führt alle Abfolgen von Benutzeraktionen gleichzeitig aus.
- Um eine QuickInfo zu überprüfen, müssen Sie zuerst mit der Maus über das Element fahren, dann das Element suchen, das der QuickInfo entspricht, und seinen Text oder andere Werte abrufen, um sie mit den erwarteten Werten zu vergleichen.