Tooltip verifiëren in Selenium

Tooltip erin Selenium

A Tooltip erin Selenium Een tooltip is een korte tekst die verschijnt wanneer de muis over een object op een webpagina beweegt. Het object kan een link, een afbeelding, een knop of een tekstveld zijn. De tooltiptekst geeft vaak meer informatie over het element onder de cursor.

Tooltips werden traditioneel geïmplementeerd als een "title"-attribuut op een element. De waarde van dit attribuut werd als tooltip weergegeven wanneer de muis eroverheen bewoog. Dit is een statische tekst die informatie over het element geeft zonder opmaak.

Tegenwoordig zijn er veel plugins beschikbaar voor het implementeren van tooltips. Geavanceerde tooltips met styling, rendering, afbeeldingen en links worden gebouwd met behulp van JavaScript- of jQuery-plugins, of tooltips die alleen met CSS zijn gemaakt.

• Om statische tooltips te bekijken of te controleren die zijn geïmplementeerd via het HTML-attribuut "title", gebruikt u de volgende methode: getAttribute("title") Deze methode wordt toegepast op het WebElement. De geretourneerde waarde (de tooltiptekst) wordt ter verificatie vergeleken met een verwachte waarde.
• Voor andere tooltip-implementaties kunt u de "Advanced User Interactions API" van WebDriver gebruiken om het muis-hover-effect te creëren en vervolgens de tooltip voor het element op te halen.

Een overzicht van de API voor geavanceerde gebruikersinteracties

De Advanced User Interactions API maakt gebruikersacties zoals slepen en neerzetten, zweven met de muis, meerdere items selecteren, toetsen indrukken en loslaten, en andere toetsenbord- of muisacties op een webpagina zichtbaar.

U kunt hiernaar verwijzen officiële Actions klasse referentie voor meer informatie over de API.

Voordat je springtping Laten we aan de hand van verschillende scenario's eens kijken naar de klassen en methoden die we nodig hebben om een ​​schuifregelaar met een bepaalde afstand te verplaatsen.

Stap 1) Om de API te gebruiken, moet u de volgende pakketten en klassen importeren:

Stap 2) Maak een object van de klasse "Actions" aan en bouw de reeks gebruikersacties op. De klasse Actions bouwt gekoppelde acties zoals moveToElement() en dragAndDrop(). Het driver-object wordt als parameter aan de constructor doorgegeven.

Stap 3) Maak een Action-object aan met behulp van de build()-methode van de klasse "Actions". Roep de perform()-methode aan om elke actie in de wachtrij van de builder uit te voeren.

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

Implementatie van tooltips versus Selenium Verificatieaanpak

Tooltip verifiëren (afhandelen) in Selenium

Laten we aan de hand van twee veelvoorkomende scenario's bekijken hoe u tooltips kunt raadplegen en verifiëren:

• Scenario 1: De tooltip wordt geïmplementeerd met behulp van het attribuut "title".
• Scenario 2: De tooltip wordt geïmplementeerd met behulp van een jQuery-plugin.

Scenario 1: HTML-attribuut "title".

In dit geval gebruiken we de voorbeeldsite. https://demo.guru99.com/test/social-icon.html en controleer de tooltip van het "github"-pictogram rechtsboven op de pagina.

We lokaliseren eerst het element, lezen vervolgens het "title"-attribuut en vergelijken dit met de verwachte tooltiptekst.

Omdat de tooltip zich in het attribuut "title" bevindt, automatiseren we de muisover-actie niet eens; we halen de attribuutwaarde eenvoudigweg op met de getAttribute()-methode.

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]"));

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

Toelichting code:

1. Zoek het WebElement dat het “github” -pictogram vertegenwoordigt.
2. Lees het attribuut "title" uit met de getAttribute()-methode.
3. Vergelijk de waarde met de verwachte tooltiptekst.

Selenium 4 tip: Verkiezen getDomAttribute("title") voor het letterlijke HTML-attribuut, en laat Selenium Manager lost het probleem met het stuurprogramma op in plaats van het vast te coderen. chromedriver.exe.

Scenario 2: jQuery-plugin

Veel jQuery-plugins implementeren tooltips, en elke plugin geeft ze op een iets andere manier weer.

Sommige plugins houden de tooltip-markup altijd naast het triggerelement, terwijl andere dynamisch een "div"-tag aanmaken wanneer de cursor het triggerelement binnenkomt.

Voor deze demonstratie gebruiken we de stijl "jQuery Tools Tooltip".

Open https://demo.guru99.com/test/tooltip.htmlAls je met de muis over 'Nu downloaden' beweegt, verschijnt een geavanceerde tooltip met een afbeelding, een achtergrond voor tekstballonnen, een kleine tabel en een klikbare link.

Als je de broncode bekijkt, zie je dat de div die de tooltip voorstelt al naast de link "Nu downloaden" staat. De onderstaande scripttag bepaalt wanneer deze verschijnt.

Nu controleren we de linktekst die in de tooltip wordt weergegeven.

Zoek eerst het WebElement voor 'Nu downloaden'. Gebruik de Interactions API om naar het element te navigeren (muis eroverheen bewegen). Zoek vervolgens het WebElement dat overeenkomt met de link in de weergegeven tooltip en controleer of de tekst overeenkomt met de verwachte waarde.

Hier is de 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 Uitleg:

1. Zoek het webelement dat overeenkomt met het element 'Nu downloaden' waar u met de muis overheen beweegt.
2. Gebruik de Interactions API om de cursor op "Nu downloaden" te plaatsen.
3. Zodra de tooltip zichtbaar is, zoek je het WebElement dat de link in de tooltip vertegenwoordigt (de "a"-tag).
4. Lees de tooltiptekst met getText() en vergelijk het met de verwachte waarde die is opgeslagen in expectedTooltip.

Veelgestelde vragen