Selenium java：如何知道WebElement指向哪个DOM元素？

Question

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

有时选择器非常复杂，包括xpath和css Selector，在调试过程中知道哪个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选择器和xpath的引用链接。

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

• foo元素是具有id foo并且还具有祖先span节点的元素。 虽然id​​应该是唯一的标识符，但它不需要在文档中识别任何更多的轴。
• 然后是HelloWorld元素。 您正在foo元素内搜索。 它将忽略所有其他匹配元素，只找到foo元素的子元素。 在示例代码中，您在CSS选择器中的两个类之间放置了空格。 这意味着有一个带有类hello的元素，并且在该元素中有一个带有类world的子元素。 但是如果你删除空格那么就意味着有一个包含hello和world类的元素。 哪个可以很容易地解释为XPath "//*[contains(@class, 'hello')][contains(@class, 'world')]"你可以使用这个XPath来使一个XPath直接找到这个元素有一个定位器而不是两个。
• 现在oops元素很容易理解。 它是HelloWorld元素中的第一个li标签。

---

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