java - Selenium java : how to know which DOM element is pointed by a WebElement?

Question

Selenium java:如何从java调试器和浏览器开发工具中知道WebElement指向哪个DOM元素？

有时选择器非常复杂，由xpath和css选择器组成，在调试时了解指向哪个DOM元素非常有帮助。

WebElement
    ------> show me the element in DOM

浏览器开发者工具不支持混合选择器。例如，

WebElement foo = driver.findElement(By.xpath("//div[@id='foo'][./ancestor::span]"));
WebElement helloWorld = foo.findElement(By.cssSelector(".hello .world"));
WebElement oops = helloWorld.findElement(By.xpath(".//li[1]"));

在现实世界中，这可能会变得非常复杂。

Answer 1

TL;DR，您需要了解选择器的工作原理。您可以访问 css selector 的引用文献链接和 xpath 。

现在让我们看看这三个元素及其选择器以及它们如何定位元素。

• foo 元素是一个具有 id foo 且还具有祖先跨度节点的元素。尽管 ids 应该是唯一的标识符，并且它不应该需要更多的轴来在文档中进行识别。
• 然后是 HelloWorld 元素。您正在 foo 元素内搜索。它将忽略所有其他匹配元素，只查找 foo 元素的子元素。在示例代码中，您在 CSS 选择器中的两个类之间添加了空格。这意味着有一个类 hello 的元素，并且该元素内有一个类 world 的子元素。但如果删除空格，则意味着存在一个同时具有类 hello 和 world 的元素。这可以很容易地解释为 XPath "//*[contains(@class, 'hello')][contains(@class, 'world')]" 并且您可以使用此 XPath 来制作使用一个定位器(而不是两个)直接查找该元素的一个 XPath。
• 现在 oops 元素很容易理解了。它是 HelloWorld 元素内的第一个 li 标记。

<小时/>

要查找元素，您可以首先使用浏览器开发工具中的第一个选择器，然后使用第二个选择器在第一个元素中查找下一个元素，依此类推。开发工具显示元素的层次结构，以便可以轻松完成。