How to extract the tooltip text within an Angular

Question

I'm trying to read text tooltip in angular7 application via selenium. But get text is returning blank and javascript executor is returning null.

Link to the image of the DOM for which I'm not able to find the xpath

But get text is returning blank and javascript executor is returning null.

This is returning blank

driver().get("https://vmware.github.io/clarity/documentation/v0.12/tooltips");
Wait(3000);
System.out.println(driver().findElement(By.xpath("(//span[@class='tooltip-content'])[2]")).getText());

This is returning null

System.out.println(driver().findElement(By.xpath("(//span[@class='tooltip-content'])[2]")).getAttribute("value"));

String theTextIWant = ((JavascriptExecutor) driver()).executeScript("return arguments[0].innerHTML;",driver().findElement(By.xpath("(//span[@class='tooltip-content'])[2]")));

Answer 1

To extract the tooltip text Lorem ipsum sit within the Angular7 Application using Selenium you have to:

• Induce WebDriverWait for the desired element to be visible
• Mouse Hover the element.
• Induce WebDriverWait for the desired tooltip to be visible
• Then extract the Tool Tip Text

• You can use the following solution:

  • Code Block:

    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    import org.openqa.selenium.interactions.Actions;
    import org.openqa.selenium.support.ui.ExpectedConditions;
    import org.openqa.selenium.support.ui.WebDriverWait;
    
    public class Angular_ToolTip {
    
        public static void main(String[] args) {
    
            System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
            ChromeOptions options = new ChromeOptions();
            options.addArguments("start-maximized");
            //options.addArguments("disable-infobars");
            options.addArguments("--disable-extensions");
            WebDriver driver = new ChromeDriver(options);
            driver.get("https://vmware.github.io/clarity/documentation/v0.12/tooltips");
            new Actions(driver).moveToElement(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//h6[text()='Small']//following::div[1]/a[@class='tooltip tooltip-sm']")))).build().perform();
            System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//h6[text()='Small']//following::div[1]/a[@class='tooltip tooltip-sm']//following::span[1]"))).getAttribute("innerHTML"));
        }
    }
    

• Console Output:

  Lorem ipsum sit
  

• Browser Snapshot: