如何点击图片 Selenium 网络驱动程序

⚡ 智能摘要

点击图片 Selenium WebDriver 需要使用 CSS 选择器或 XPath 策略,因为图像元素不会显示链接文本。本文将介绍如何定位图像、触发点击操作以及验证导航是否成功。

  • 🖱️ 核心行动: 使用 driver.findElement(By.cssSelector(…)).click() 可以对锚点内渲染的任何图像元素执行单击操作。
  • 🎯 定位器选择: By.linkText 和 By.partialLinkText 对图像无效,因此需要使用 By.cssSelector 或 By.xpath。
  • 🧪 验证步骤: 使用 driver.getTitle() 将新页面标题与预期目标字符串进行比对,以确认点击是否成功。
  • 🤖 人工智能协助: 现代人工智能插件会在应用程序标记或属性值更改时建议稳定的 CSS 选择器和自动修复定位器。
  • 🛠️ 常见陷阱: 隐藏的、延迟加载的或重叠的图像通常需要显式等待、滚动到视图中,或者 Java点击脚本即可正确注册。

点击图片 Selenium

点击图片 Selenium 当图标、徽标或缩略图充当导航链接时,WebDriver 就派上了用场。由于图像不包含可见文本,传统的链接文本定位器失效,因此需要更可靠的选择器策略。

访问图像链接

图片链接是网页上的锚点,以图片的形式呈现,点击后会将浏览器导航到不同的窗口或页面。

因为它们是图像,所以我们不能使用 By.linkText() 和 By.partialLinkText() 方法,因为图像链接根本没有链接文本。

在这种情况下,我们应该使用 `By.cssSelector` 或 `By.xpath`。由于 `By.cssSelector` 简单易读,因此通常更推荐使用前者。

在下面的例子中,我们将访问 Facebook 密码恢复页面左上角的“Facebook”徽标。

访问图像链接

我们将使用 By.cssSelector 和元素的“title”属性来获取图片链接。然后,我们将验证浏览器是否已跳转到 Facebook 的主页。

Java Code 例如:

下列 Selenium WebDriver 代码片段启动 Chrome,打开 Facebook 密码恢复页面,点击 Facebook 徽标图像,并断言生成的页面标题。

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }
        driver.close();
    }
}

成果

点击图片 Selenium 网络驱动程序

点击图片的最佳实践

一些习惯可以使图像点击自动化在各种浏览器和屏幕尺寸上更加可靠。

  • 建议使用稳定的属性,例如 title、alt、aria-label 或 data-*,而不是深度嵌套的 CSS 路径。
  • 在发出点击操作之前,添加一个显式的 WebDriverWait 等待 ElementToBeClickable。
  • 对于懒加载的图片,使用滚动条将元素滚动到视图中。 Javascript执行者优先。
  • 如果透明叠加层拦截了点击事件,则回退到其他情况。 Java脚本点击底层元素。
  • 使用 driver.getTitle() 或目标页面上的唯一元素验证导航。

人工智能如何改进图像定位策略

人工智能辅助测试工具,例如 TestimMabl 和 Healenium 会分析图像周围的 DOM,并提出自愈定位器。当类名或属性在版本发布后发生变化时,框架会自动替换为最稳定的替代方案,从而减少基于图标的导航出现不稳定的情况。

工程师还可以使用 ChatGPT 或 GitHub Copilot 生成 WebDriver 代码片段,为图像提供可靠的 CSS 或 XPath 表达式建议,并为点击后加载的页面编写断言。生成的代码仍需进行审查,以确保其正确性以及对等待和叠加层的处理。

结语

点击图片链接 Selenium 一旦选定了稳定的定位器,WebDriver 的使用就非常简单。使用带有 title 或 alt 属性的 `By.cssSelector` 是最易读的方法;当标记结构复杂时,可以使用 `By.xpath` 作为备选方案;而显式等待则能确保脚本在不同版本间的可靠性。

常见问题

使用 `By.cssSelector` 或 `By.xpath` 并借助 `title`、`alt` 或 `aria-label` 等稳定属性定位图像,然后对返回的 WebElement 调用 `.click()` 方法。使用 `driver.getTitle()` 或目标页面上的唯一元素验证结果。

是的。例如这样的工具。 TestimMabl 和 ChatGPT 会检查周围的 DOM,并根据 title、alt、aria-label 或 data 属性建议一个稳定的选择器。工程师仍应检查生成的定位器的唯一性和稳定性。

自愈定位器是一种人工智能功能,当原始选择器失效时,它会自动切换到备用选择器。像 Healenium 和 Mabl 这样的框架会监测图像周围属性的变化,并选择最稳定的替代方案,从而减少 UI 刷新后测试结果不稳定的情况。

这两个定位器都匹配锚点内的可见文本。图片链接包含一个 img 标签,不包含任何文本节点,因此匹配结果始终为空。请改用 By.cssSelector 或 By.xpath,并结合 title、alt 或 aria-label 属性。

如果叠加层、模态框或工具提示遮挡了图像,请使用滚动条将其滚动到视图中。 Javascript执行器并添加 WebDriverWait 等待 ElementToBeClickable。作为备用方案,执行一个 Java点击 WebElement 上的脚本可以绕过重叠部分ping 层。

使用 driver.getTitle() 获取新页面标题,当前 URL 使用 driver.getCurrentUrl() 方法,或者检查目标页面上是否存在唯一元素。这些检查的结合使测试能够确信点击确实触发了导航。

总结一下这篇文章: