如何验证工具提示 Selenium

⚡ 智能摘要

验证工具提示 Selenium WebDriver 提供了两种可靠的工具提示文本断言模式：直接读取 HTML title 属性和使用 Actions API 将鼠标悬停在动态渲染的元素上。 Java脚本或 jQuery 工具提示。

???? 关键原则： 工具提示是指鼠标悬停时显示的文本，因此验证策略取决于浏览器将该文本存储在 DOM 中的哪个位置。
🏷️ 静态工具提示： 对于基于 HTML 标题的工具提示，请调用 getAttribute("title") or getDomAttribute("title") 并与预期字符串进行比较。
🖱️ 动态工具提示： 对于 jQuery、CSS 或插件工具提示，请使用 Actions 类。 moveToElement(target).build().perform() 在阅读工具提示元素之前。
⏱️ 最佳实践： 等待鼠标悬停后工具提示容器可见，然后断言文本。 getText() 避免读取过期或空数据。
🚀 Selenium 4 年预测： 对 Selenium 使用显式等待而不是 Thread.sleep 的管理器来实现稳定、无驱动程序路径的工具提示检查。

工具提示 Selenium

A 工具提示 Selenium 工具提示是鼠标悬停在网页上的某个对象上时显示的简短文本。该对象可以是链接、图像、按钮或文本区域。工具提示文本通常会提供有关光标所在元素的更多信息。

传统上，工具提示是通过元素的“title”属性实现的。当鼠标悬停在元素上时，该属性的值会以工具提示的形式显示。这是一种静态文本，提供有关元素的信息，没有任何样式。

如今，有很多插件可用于实现工具提示。使用插件可以构建具有样式、渲染、图像和链接等功能的高级工具提示。 Java可以使用脚本或 jQuery 插件，也可以只使用 CSS 工具提示。

要访问或验证通过 HTML “title” 属性实现的静态工具提示，请使用以下方法： getAttribute("title") 对 WebElement 执行此方法。返回值（工具提示文本）将与预期值进行比较以进行验证。
对于其他工具提示实现，请使用 WebDriver 提供的“高级用户交互 API”创建鼠标悬停效果，然后检索元素的工具提示。

高级用户交互 API 简介

高级用户交互 API 公开了网页上的用户操作，例如拖放、悬停、多选、按键和释放以及其他键盘或鼠标操作。

你可以参考这个官方行动类参考有关 API 的更多详细信息。

跳伞前ping 接下来，让我们看看要将滑块元素移动一定偏移量需要哪些类和方法。

步骤1） 要使用该 API，请导入以下包和类：

步骤2） 创建“Actions”类的对象并构建用户操作序列。“Actions”类用于构建链式操作，例如 moveToElement() 和 dragAndDrop()。驱动程序对象作为参数传递给其构造函数。

步骤3） 使用“Actions”类的build()方法创建一个Action对象。调用perform()方法来执行构建器上所有已排队的操作。

我们已经了解了如何使用 API 提供的一些用户操作方法：clickAndHold(element)、moveByOffset(10, 0) 和 release()。API 还公开了更多方法。

工具提示实现与 Selenium 验证方法

工具提示类型	渲染方式	Selenium 途径
HTML title 属性	存储在元素本身的文本；鼠标悬停时浏览器会显示该文本。	阅读 `getAttribute("title")` or `getDomAttribute("title")`无需悬停。
jQuery/JS插件	鼠标悬停时，会在元素旁边显示一个专用的div元素。	使用操作 `moveToElement(target).perform()`稍等片刻，然后读取工具提示元素 `getText()`.
仅 CSS 工具提示	伪元素或同级 div 切换 `:hover`.	使用操作触发鼠标悬停，并读取渲染后的文本或计算出的样式。

如何验证（处理）工具提示 Selenium

让我们通过两个常见场景来了解如何访问和验证工具提示：

场景 1：使用“title”属性实现工具提示。
场景 2：使用 jQuery 插件实现工具提示。

场景 1：HTML “title” 属性

本例中，我们使用示例网站。 https://demo.guru99.com/test/social-icon.html 并查看页面右上角“github”图标的工具提示。

我们首先找到该元素，然后读取其“title”属性，并将其与预期的工具提示文本进行比较。

因为工具提示位于“title”属性中，所以我们甚至不需要自动执行鼠标悬停操作；我们只需使用getAttribute()方法检索属性值即可。

这是代码：

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

代码说明：

找到代表“github”图标的 WebElement。
使用 getAttribute() 方法读取其“title”属性。
将值与预期的工具提示文本进行比对。

Selenium 4个提示： 比较喜欢 getDomAttribute("title") 对于字面 HTML 属性，并让 Selenium 经理通过解决驱动程序问题来解决问题，而不是硬编码。 chromedriver.exe.

场景 2：jQuery 插件

许多 jQuery 插件都实现了工具提示功能，但每个插件的渲染方式略有不同。

有些插件会始终将工具提示标记保留在触发元素旁边，而另一些插件则会在光标进入触发器时动态创建一个“div”标签。

在本演示中，我们使用“jQuery Tools Tooltip”样式。

可选 https://demo.guru99.com/test/tooltip.html将鼠标悬停在“立即下载”上，即可显示高级工具提示，其中包含图像、标注背景、小表格和可点击的链接。

如果查看源代码，会发现代表工具提示的 div 元素已经位于“立即下载”链接旁边。下面的 script 标签控制着工具提示的显示时间。

现在我们来验证工具提示中显示的链接文本。

首先找到“立即下载”的 WebElement。使用交互 API 将鼠标悬停到该元素上。接下来，找到与显示的提示框中的链接对应的 WebElement，并将其文本与预期值进行核对。

这是代码：

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 说明：

找到与鼠标悬停的“立即下载”元素对应的 WebElement。
使用交互 API 将光标悬停在“立即下载”上。
工具提示显示后，找到表示工具提示内链接的 WebElement（“a”标签）。
使用以下方式读取工具提示文本 getText() 并将其与存储在预期值中的值进行比较。 expectedTooltip.

常见问题

如果工具提示是使用 HTML title 属性构建的，则在 WebElement 上调用 getAttribute(“title”) 或 getDomAttribute(“title”)，并将返回的文本与预期值进行比较。

使用 Actions 类执行 moveToElement(target).perform()，等待工具提示元素变为可见，然后使用 getText() 读取其文本或属性并断言其值。

当元素没有 title 属性或工具提示文本是通过单独的 div 动态渲染时，它会返回 null。检查 DOM 并找到实际的工具提示容器。

AI 驱动的工具可以自动生成定位器，在 DOM 更改时自动修复选择器，并建议悬停序列，从而减少不稳定的工具提示测试和跨浏览器的维护时间。

是的。现代人工智能助手会扫描页面，检测可悬停元素，并生成可直接运行的提示。 Selenium 脚本带有断言，大大减少了手动编写工具提示覆盖率脚本的工作量。