如何为多个相似图片元素编写通用 XPath 表达式

本文介绍如何使用包含属性值匹配的 xpath 定位一组具有共同特征（如 `src` 属性含 "red"）的 `` 元素，避免为每个索引（如 `[1]`、`[2]`）单独写路径，提升定位鲁棒性与可维护性。

在自动化测试（如 Selenium）中，当页面存在多个结构相似但索引不同的元素（例如 //img[1] 和 //img[2]），硬编码位置索引（[1]、[2]）极易因 DOM 顺序变动而失效。您当前的场景是：两个 均位于相同容器路径下，且目标行为是验证其 src 属性是否包含 "red"（尤其在元素被禁用后）——此时，语义化、稳定的定位策略应聚焦于共同业务特征，而非物理位置。

✅ 推荐方案：使用 contains(@src, 'red') 实现属性内容匹配
该 XPath 表达式不依赖索引，而是直接筛选出所有满足条件的 元素：

//div[@class=
'name-slider-header']//button//img[contains(@src, 'red')]

⚠️ 注意：原问题中 @class=name-slider-header' 存在单引号缺失（应为 @class='name-slider-header'），已修正；同时确保 contains() 的第二个参数为字符串字面量（加引号）。

在 Java + Selenium 中，可批量获取并断言：

List redImgElements = driver.findElements(
    By.xpath("//div[@class='name-slider-header']//button//img[contains(@src, 'red')]")
);

// 验证至少找到一个匹配项（可根据业务逻辑调整）
Assert.assertFalse("未找到 src 含 'red' 的图片元素", redImgElements.isEmpty());

// 可进一步遍历检查每个元素的 src 属性
for (WebElement img : redImgElements) {
    String src = img.getAttribute("src");
    Assert.assertTrue("图片 src 不包含 'red': " + src, src != null && src.contains("red"));
}

? 关键优势：

• 稳定性高：不受兄弟节点增减或顺序变化影响；
• 语义清晰：XPath 直接表达“找 src 含 red 的图片”，与业务目标一致；
• 扩展性强：若后续新增第3个同类红图，无需修改 XPath 或代码逻辑。

? 补充建议：

• 若需区分多个红图（如按位置做不同操作），可在基础 XPath 上追加更精确的上下文约束（如 preceding-sibling::img 或结合 @alt/@data-testid 等稳定属性）；
• 生产环境推荐优先使用 data-* 自定义属性（如 data-state="disabled-red"）替代 src 字符串匹配，使定位更可靠、语义更明确。