如何使用 Selenium 在 Angular 7 应用程序中提取工具提示文本

Question

我正在尝试通过 selenium 读取 angular7 应用程序中的文本工具提示。但是获取文本返回空白并且 javascript 执行程序返回空值。

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

但是获取文本返回空白，javascript 执行器返回空值。

这是返回空白

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

这将返回 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

要使用 Selenium 在 Angular7 Application 中提取工具提示文本 Lorem ipsum sit，您必须：

诱导 WebDriverWait 以使所需的 元素可见
鼠标悬停元素。
诱导 WebDriverWait 以使所需的 工具提示可见
然后提取工具提示文本

您可以使用以下解决方案：

代码块：

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

控制台输出：
```
Lorem ipsum sit
```
浏览器快照：

如何使用 Selenium 在 Angular 7 应用程序中提取工具提示文本

How to extract the tooltip text within an Angular 7 application using Selenium

selenium

selenium-webdriver

angular

webdriverwait

angular7