如何在 Selenium 中使用 DOM 结构查找元素？答案

【问题标题】：How to find an element by using DOM structure in Selenium?如何在 Selenium 中使用 DOM 结构查找元素？
【发布时间】：2017-03-23 17:33:12
【问题描述】：

我的应用程序与 Google 地图集成，我正在尝试使用 Selenium 编写一些 UI 测试。作为我的一项测试的一部分，我需要在 Google Maps 提供的 infoPopup 中找到 X。这个元素没有任何 id 或类，我可以直接使用它在 Selenium 中找到它。我可以使用 XPath，但它会使我的测试对 Google 的任何更改都很脆弱。

另一方面，我可以从我的自定义元素（使用父元素和兄弟元素）向上遍历 DOM 结构并非常容易地找到它（这就是我在 javascript 中访问它的方式）。我的问题是我是否也可以在 Selenium 中以相同的方式访问它。

HTML 表单：

<div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;">   
    <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" draggable="false" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
</div>

XPath：//*[@id="map"]/div[1]/div[1]/div/div[3]/div[3]/div/div[13]/div[1]

我对 Selenium 的经验非常有限。因此，如果有其他方法可以找到可能对我有帮助的元素，我也很想了解它们。

【问题讨论】：

您可以使用someElement/.. 获取元素的父元素。您还可以将驱动程序转换为 JSExecutor 并使用 DOM 访问元素（但我相信您也必须通过 JS 执行点击）

标签： xpath selenium webdriver selenium-webdriver

【解决方案1】：

你可以使用By.XPath:

driver.FindElement(By.XPath("//*[@id='map']/div[1]/div[1]/div/div[3]/div[3]/div/div[13]/div[1]"));

但是，像这样的 XPath 将非常不稳定且难以维护，我不建议这样做。

使用有意义的 XPath 或 CssSelector 之类的东西会很好。

By.XPath("//*[@id='map']//div[./img[contains(@src, 'mapfiles/mv/imgs8.png')]]");
By.CssSelector("#map img[src$='mapfiles/mv/imgs8.png']");

有关 XPath 或 CssSelector 的更多信息，请参阅the documentation。

【讨论】：

@Nitesh Baranwal：你对此有什么反馈吗？它对你有用吗？

【解决方案2】：

如果您刚刚开始，我建议您使用 FireBug+FirePath 添加到 Firefox 浏览器。首先，它将为您提供您在 UI 上突出显示的元素的精确 xpath。Click Here to see it

【讨论】：