Tooltip verifiëren in Selenium webdriver

Door: Krishna Rungta Krishna Rungta
Hours Bijgewerkt

Tooltip erin Selenium

A Tooltip erin Selenium is een tekst die verschijnt wanneer een muis over een object op een webpagina beweegt. Het object kan een link, een afbeelding, een knop, een tekstgebied, enz. zijn. De tooltiptekst geeft vaak meer informatie over het object waarop de gebruiker met de muiscursor beweegt.

Tooltips werden traditioneel geïmplementeerd als een 'title'-attribuut voor een element. De waarde van dit attribuut werd weergegeven als tooltip bij het bewegen met de muis. Dit is een statische tekst die informatie geeft over het element, zonder stijl.

Nu zijn er veel plug-ins beschikbaar voor de implementatie van 'tooltips'. Er worden geavanceerde tooltips met styling, rendering, afbeeldingen en links geïmplementeerd JavaScript/JQuery-plug-ins of het gebruik van CSS-tooltips.

  • Voor toegang tot of verificatie van de statische tooltips die zijn geïmplementeerd met behulp van het HTML-attribuut “title” kunnen we eenvoudigweg de getAttribute(“title”)-methode van het WebElement gebruiken. De geretourneerde waarde van deze methode (de tooltiptekst) wordt ter verificatie vergeleken met een verwachte waarde.
  • Voor andere vormen van tooltip-implementaties zullen we de “Advanced User Interaction API” van de Web Driver moeten gebruiken om het muiszweefeffect te creëren en vervolgens de tooltip voor het element op te halen.

Een overzicht van de API voor geavanceerde gebruikersinteracties

Geavanceerde gebruikersinteracties API biedt de API voor gebruikersacties zoals slepen en neerzetten, zweven, meervoudig selecteren, indrukken en loslaten van toetsen en andere acties met behulp van het toetsenbord of de muis op een webpagina.

U kunt dit doorverwijzen link voor meer informatie over de API.

Laten we hier eens kijken hoe we een aantal klassen en methoden kunnen gebruiken die we nodig hebben om een ​​schuifelement met een offset te verplaatsen.

Stap 1) Om de API te kunnen gebruiken, moeten de volgende pakketten/klassen worden geïmporteerd:

Geavanceerde gebruikersinteracties-API

Stap 2) Maak een object van de klasse "Actions" en bouw de reeks gebruikersacties. De klasse Actions wordt gebruikt om de reeks gebruikersacties op te bouwen, zoals moveToElement(), dragAndDrop() enz. De API biedt verschillende methoden met betrekking tot gebruikersacties.

Het driverobject wordt als parameter aan zijn constructor geleverd.

Geavanceerde gebruikersinteracties-API

Stap 3) Maak een Action Object met behulp van de build() methode van de klasse “Actions”. Roep de methode perform() aan om alle acties uit te voeren die zijn gebouwd door het Actions-object (hier bouwer).

Geavanceerde gebruikersinteracties-API

We hebben gezien hoe we enkele van de gebruikersactiemethoden van de API kunnen gebruiken: clickAndHold(element), moveByOffset(10,0), release(). De API biedt veel van dergelijke methoden.

Verwijs naar de link voor meer details.

Tooltip verifiëren (afhandelen) in Selenium

Laten we eens kijken naar de demonstratie van het openen en verifiëren van de tooltips in het eenvoudige scenario

  • Scenario 1: Tooltip wordt geïmplementeerd met behulp van het attribuut “title”.
  • Scenario 2: Tooltip wordt geïmplementeerd met behulp van een jQuery-plug-in.

Scenario 1: HTML-kenmerk 'titel'

Laten we voor dit geval de voorbeeldsite nemen: https://demo.guru99.com/test/social-icon.html.

We zullen proberen de tooltip van het “github” -pictogram rechtsboven op de pagina te verifiëren.

HTML-kenmerk 'titel'

Om dit te doen, zullen we eerst het element vinden en het attribuut 'title' ophalen en verifiëren met de verwachte tooltiptekst.

Omdat we ervan uitgaan dat de tooltip zich in het “title” attribuut bevindt, automatiseren we niet eens het muiszweefeffect, maar halen we simpelweg de waarde van het attribuut op met behulp van de “getAttribute()” methode.

HTML-kenmerk 'titel'

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

Uitleg van code

  1. Zoek het WebElement dat het “github” -pictogram vertegenwoordigt.
  2. Haal het “title” attribuut op met behulp van de getAttribute() methode.
  3. Bevestig de waarde ten opzichte van de verwachte tooltipwaarde.

Scenario 2: JQuery-plug-in

Er zijn tal van JQuery-plug-ins beschikbaar om de tooltips te implementeren, en elke plug-in heeft een iets andere implementatievorm.

Sommige plug-ins verwachten dat de tooltip-HTML altijd aanwezig is naast het element waarvoor de tooltip van toepassing is, terwijl andere een dynamische “div”-tag creëren, die direct verschijnt terwijl u over het element zweeft.

Laten we voor onze demonstratie eens kijken naar de “jQuery Tools Tooltip”-manier van tooltip-implementatie.

Hier in de URL – https://demo.guru99.com/test/tooltip.html je kunt de demo zien waarbij je met de muis over "Nu downloaden" beweegt. We krijgen een geavanceerde tooltip met een afbeelding, bijschriftachtergrond, een tabel en een link erin waarop kan worden geklikt.

JQuery-plug-in

Als je naar de onderstaande bron kijkt, zie je dat de div-tag die de tooltip vertegenwoordigt altijd aanwezig is naast de tag van de link 'Nu downloaden'. Maar de code in de onderstaande scripttag bepaalt wanneer deze moet verschijnen.

JQuery-plug-in

Laten we proberen alleen de linktekst in de tooltip voor onze demonstratie hier te verifiëren.

We vinden eerst het WebElement dat overeenkomt met "Download nu". Vervolgens gaan we met behulp van de Interactions API naar het element (muis-hover). Vervolgens vinden we het WebElement dat overeenkomt met de link in de weergegeven tooltip en verifiëren we het met de verwachte tekst.

JQuery-plug-in

Hier is de code

GERELATEERDE ARTIKELEN

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 Uitleg

  1. Zoek het WebElement dat overeenkomt met het element “nu downloaden” waarover we met de muis bewegen.
  2. Met behulp van de Interactions API beweegt u de muis naar 'Nu downloaden'.
  3. Ervan uitgaande dat de tooltip wordt weergegeven, zoekt u het WebElement dat overeenkomt met de koppeling in de tooltip, d.w.z. de "a"-tag.
  4. Controleer of de tooltiptekst van de link die is opgehaald met getText() overeenkomt met een verwachte waarde die we hebben opgeslagen in "expectedToolTip"

Samenvatting

In deze zelfstudie hebt u geleerd hoe u Tooltips kunt openen met behulp van Selenium Webstuurprogramma.

Tooltips worden op verschillende manieren geïmplementeerd:

  • De basisimplementatie is gebaseerd op het HTML-attribuut “title”. getAttribute(title) haalt de waarde van de tooltip op.
  • Andere tooltip-implementaties zoals JQuery en CSS-tooltips vereisen Interactions API om een ​​muiszweefeffect te creëren

Geavanceerde gebruikersinteracties-API–

  • moveToElement(element) van de klasse Actions wordt gebruikt om met de muis over een element te bewegen.
  • De methode Build() van de klasse Actions bouwt de reeks gebruikersacties op in een Action-object.
  • Perform() van de Action-klasse voert alle reeks gebruikersacties in één keer uit.

Om een ​​tooltip te verifiëren, moeten we eerst met de muis over het element bewegen, vervolgens het element zoeken dat overeenkomt met de tooltip en de tekst of andere waarden ervan laten verifiëren aan de hand van de verwachte waarden.

Je houdt misschien van: