Sådan bekræfter du værktøjstip i Selenium webdriver
Krishna Rungta
Værktøjstip i Selenium
A Værktøjstip i Selenium er en tekst, der vises, når en mus svæver over et objekt på en webside. Objektet kan være et link, et billede, en knap, et tekstområde osv. Værktøjstipteksten giver ofte mere information om det objekt, som brugeren svæver over musemarkøren på.
Værktøjstip blev traditionelt implementeret som en 'title'-attribut til et element. Værdien af denne attribut blev vist som et værktøjstip ved musebevægelse. Dette er en statisk tekst, der giver information om elementet uden styling.
Nu er der mange plugins tilgængelige til implementering af 'værktøjstip'. Avancerede værktøjstip med styling, gengivelse, billeder og links implementeres vha JavaScript/JQuery-plugins eller brug af CSS-værktøjstip.
- For at få adgang til eller verificere de statiske værktøjstip, som er implementeret ved hjælp af HTML "title" attributten, kan vi blot bruge getAttribute("title") metoden i WebElement. Den returnerede værdi af denne metode (som er værktøjstip-teksten) sammenlignes med en forventet værdi for verifikation.
- For andre former for værktøjstip-implementeringer skal vi bruge "Advanced User Interactions API" leveret af webdriveren for at skabe musehovedeffekten og derefter hente værktøjstippet til elementet.
Kort om Advanced User Interactions API
Advanced User Interactions API giver API'en til brugerhandlinger som træk og slip, hovering, multivalg, tastetryk og -slip og andre handlinger ved hjælp af tastatur eller mus på en webside.
Du kan henvise til dette link for flere detaljer om API.
Lad os her se, hvordan man bruger et par klasser og metoder, vi skal bruge for at flytte et skyderelement med en offset.
Trin 1) For at bruge API'en skal følgende pakker/klasser importeres:
Trin 2) Opret et objekt af klassen "Actions" og opbyg sekvensen af brugerhandlinger. Actions-klassen bruges til at bygge sekvensen af brugerhandlinger som moveToElement(), dragAndDrop() osv. Forskellige metoder relateret til brugerhandlinger leveres af API.
Driverobjektet leveres som en parameter til dets konstruktør.
Trin 3) Opret et handlingsobjekt ved hjælp af build()-metoden i klassen "Actions". Kald perform()-metoden for at udføre alle handlinger bygget af Actions-objektet (builder her).
Vi har set, hvordan man bruger nogle af brugerhandlingsmetoderne fra API'et – clickAndHold(element), moveByOffset(10,0), release(). API'et giver mange sådanne metoder.
Se i link for flere detaljer.
Sådan bekræftes (håndterer) værktøjstip i Selenium
Lad os se demonstrationen af at få adgang til og verificere værktøjstip i det enkle scenarie
- Scenarie 1: Værktøjstip implementeres ved hjælp af "title"-attributten
- Scenarie 2: Værktøjstip er implementeret ved hjælp af et jQuery-plugin.
Scenarie 1: HTML 'title'-attribut
I dette tilfælde, lad os tage eksempelwebstedet – https://demo.guru99.com/test/social-icon.html.
Vi vil forsøge at bekræfte værktøjstippet til "github"-ikonet øverst til højre på siden.
For at gøre det, vil vi først finde elementet og få dets 'title'-attribut og verificere med den forventede værktøjstip-tekst.
Da vi antager, at værktøjstip er i "title"-attributten, automatiserer vi ikke engang musehovedeffekten, men henter blot attributtens værdi ved hjælp af "getAttribute()"-metoden.
Her er 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();
}
}
Forklaring af kode
- Find det WebElement, der repræsenterer "github"-ikonet.
- Få dens "title"-attribut ved hjælp af getAttribute()-metoden.
- Hæv værdien mod den forventede værktøjstip-værdi.
Scenario 2: JQuery Plugin
Der er masser af JQuery-plugins tilgængelige til at implementere værktøjstip, og hver enkelt har en lidt anden form for implementering.
Nogle plugins forventer, at HTML-værktøjstip hele tiden er til stede ved siden af det element, som værktøjstippet er anvendeligt til, mens de andre opretter et dynamisk "div"-tag, som dukker op, mens du svæver over elementet.
Til vores demonstration, lad os overveje "jQuery Tools Tooltip"-metoden til værktøjstip-implementering.
Her i URL'en - https://demo.guru99.com/test/tooltip.html du kan se demoen, hvor vi ved at holde musen over "Download nu", får vi et avanceret værktøjstip med et billede, billedforklaringsbaggrund, en tabel og et link inde i det, som er klikbart.
Hvis du ser på kilden nedenfor, kan du se, at div-tagget, der repræsenterer værktøjstippet, altid er til stede ved siden af "Download nu"-linkets tag. Men koden inde i script-tagget nedenfor styrer, hvornår det skal popup op.
Lad os prøve at verificere linkteksten i værktøjstippet til vores demonstration her.
Vi finder først det WebElement, der svarer til "Download nu". Så ved at bruge Interactions API, vil vi flytte til elementet (muse-hover). Dernæst finder vi det WebElement, der svarer til linket inde i det viste værktøjstip og verificerer det mod den forventede tekst.
Her er 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();
}
}
Kode Forklaring
- Find det WebElement, der svarer til elementet "download nu", som vi vil holde musen over.
- Ved hjælp af Interactions API skal du holde musen over til "Download nu".
- Hvis du antager, at værktøjstippet vises, skal du finde det WebElement, der svarer til linket inde i værktøjstippet, dvs. "a"-tagget.
- Bekræft linkets værktøjstip-tekst hentet ved hjælp af getText() mod en forventet værdi, vi har gemt i "expectedToolTip"
Resumé
I denne øvelse har du lært, hvordan du får adgang til værktøjstip ved hjælp af Selenium Web driver.
Værktøjstip implementeres på forskellige måder –
- Den grundlæggende implementering er baseret på HTMLs "title"-attribut. getAttribute(title) får værdien af værktøjstip.
- Andre implementeringer af værktøjstip som JQuery, CSS-værktøjstip kræver Interactions API for at skabe musehovedeffekt
Advanced User Interactions API–
- moveToElement(element) af Actions-klassen bruges til at holde musen over et element.
- Build()-metoden for Actions-klassen bygger sekvensen af brugerhandlinger ind i et Action-objekt.
- Perform() af Action-klassen udfører alle sekvensen af brugerhandlinger på én gang.
For at verificere et værktøjstip, skal vi først holde musen over elementet, derefter finde det element, der svarer til værktøjstip, og få dets tekst eller andre værdier til at verificere mod de forventede værdier.
