Hur du verifierar verktygstips i Selenium webbdrivrutin

Verktygstips i Selenium

A Verktygstips i Selenium är en text som visas när en mus svävar över ett objekt på en webbsida. Objektet kan vara en länk, en bild, en knapp, ett textområde etc. Verktygstipstexten ger ofta mer information om objektet som användaren svävar över muspekaren på.

Verktygstips implementerades traditionellt som ett "titel"-attribut till ett element. Värdet på det här attributet visades som ett verktygstips när du håller musen. Detta är en statisk text som ger information om elementet utan styling.

Nu finns det många plugins tillgängliga för implementering av "verktygstips". Avancerade verktygstips med styling, rendering, bilder och länkar implementeras med hjälp av JavaSkript/JQuery-plugins eller med hjälp av CSS-verktygstips.

  • För att komma åt eller verifiera de statiska verktygstipsen som implementeras med HTML-attributet "title" kan vi helt enkelt använda metoden getAttribute("title") i WebElement. Det returnerade värdet för denna metod (som är verktygstipset) jämförs med ett förväntat värde för verifiering.
  • För andra former av verktygstipsimplementeringar måste vi använda "Advanced User Interactions API" som tillhandahålls av webbdrivrutinen för att skapa muspekarens effekt och sedan hämta verktygstipset för elementet.

Kort om Advanced User Interactions API

Advanced User Interactions API tillhandahåller API för användaråtgärder som dra och släpp, hovring, multival, tangenttryckning och -släpp och andra åtgärder med tangentbord eller mus på en webbsida.

Du kan hänvisa till detta länk för mer information om API.

Låt oss här se hur man använder ett par klasser och metoder som vi skulle behöva för att flytta ett skjutreglage med en offset.

Steg 1) För att kunna använda API:t måste följande paket/klasser importeras:

Advanced User Interactions API

Steg 2) Skapa ett objekt av klassen "Actions" och bygg sekvensen av användaråtgärder. Actions-klassen används för att bygga sekvensen av användaråtgärder som moveToElement(), dragAndDrop() etc. Olika metoder relaterade till användaråtgärder tillhandahålls av API.

Drivrutinsobjektet tillhandahålls som en parameter till dess konstruktor.

Advanced User Interactions API

Steg 3) Skapa ett Action Object med metoden build() i klassen "Actions". Anropa metoden perform() för att utföra alla åtgärder som byggts av Actions-objektet (byggaren här).

Advanced User Interactions API

Vi har sett hur man använder några av användaråtgärdsmetoderna som tillhandahålls av API:n – clickAndHold(element), moveByOffset(10,0), release(). API tillhandahåller många sådana metoder.

Referera till länk för mer detaljer.

Hur du verifierar (hanterar) verktygstips i Selenium

Låt oss se demonstrationen av att komma åt och verifiera verktygstipsen i det enkla scenariot

  • Scenario 1: Verktygstips implementeras med attributet "title".
  • Scenario 2: Verktygstips implementeras med hjälp av en jQuery-plugin.

Scenario 1: HTML "titel"-attribut

För det här fallet, låt oss ta exempelwebbplatsen – https://demo.guru99.com/test/social-icon.html.

Vi kommer att försöka verifiera verktygstipset för "github"-ikonen längst upp till höger på sidan.

HTML "title" Attribut

För att göra det kommer vi först att hitta elementet och få dess 'title'-attribut och verifiera med den förväntade verktygstipstexten.

Eftersom vi antar att verktygstipset finns i "title"-attributet, automatiserar vi inte ens muspekarens effekt utan hämtar helt enkelt attributets värde med metoden "getAttribute()".

HTML "title" Attribut

Här är koden

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

Förklaring av kod

  1. Hitta WebElement som representerar "github"-ikonen.
  2. Få dess "title"-attribut med metoden getAttribute().
  3. Säkerställ värdet mot det förväntade verktygstipsvärdet.

Scenario 2: JQuery Plugin

Det finns massor av JQuery-plugins tillgängliga för att implementera verktygstipsen, och var och en har en något annorlunda form av implementering.

Vissa plugins förväntar sig att verktygstipsets HTML hela tiden ska finnas bredvid elementet som verktygstipset är tillämpligt för medan andra skapar en dynamisk "div"-tagg, som dyker upp i farten medan du svävar över elementet.

För vår demonstration, låt oss överväga "jQuery Tools Tooltip" sättet att implementera verktygstips.

Här i webbadressen – https://demo.guru99.com/test/tooltip.html du kan se demon där vi håller musen över "Ladda ner nu" får ett avancerat verktygstips med en bild, bildtextbakgrund, en tabell och en länk inuti som är klickbar.

JQuery plugin

Om du tittar på källan nedan kan du se att div-taggen som representerar verktygstipset alltid finns bredvid "Ladda ner nu"-länkens tagg. Men koden inuti skripttaggen nedan styr när den behöver popup upp.

JQuery plugin

Låt oss försöka verifiera bara länktexten i verktygstipset för vår demonstration här.

Vi kommer först att hitta det WebElement som motsvarar "Ladda ner nu". Sedan med hjälp av Interactions API, kommer vi att flytta till elementet (mouse-hover). Därefter hittar vi WebElement som motsvarar länken inuti det visade verktygstipset och verifierar det mot den förväntade texten.

JQuery plugin

Här är koden

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

Kodförklaring

  1. Hitta WebElement som motsvarar elementet "ladda ner nu" som vi kommer att hålla musen över.
  2. Med hjälp av Interactions API, håll muspekaren på "Ladda ner nu".
  3. Förutsatt att verktygstipset visas, hitta WebElement som motsvarar länken inuti verktygstipset, dvs. "a"-taggen.
  4. Verifiera länkens verktygstipstext hämtad med getText() mot ett förväntat värde som vi har lagrat i "expectedToolTip"

Sammanfattning

I den här handledningen har du lärt dig hur du kommer åt verktygstips med hjälp av Selenium Webb-drivrutin.

Verktygstips implementeras på olika sätt–

  • Den grundläggande implementeringen är baserad på HTMLs "title"-attribut. getAttribute(title) får värdet av verktygstipset.
  • Andra verktygstipsimplementering som JQuery, CSS-verktygstips kräver Interactions API för att skapa muspekningseffekt

Advanced User Interactions API–

  • moveToElement(element) i klassen Actions används för att muspeka ett element.
  • Build()-metoden för Actions-klassen bygger sekvensen av användaråtgärder i ett Action-objekt.
  • Perform() av ​​klassen Action exekverar alla sekvenser av användaråtgärder på en gång.

För att verifiera ett verktygstips måste vi först föra musen över elementet, sedan hitta det element som motsvarar verktygstipset och få dess text eller andra värden att verifiera mot de förväntade värdena.