Selenium Java: как узнать, на какой элемент DOM указывает WebElement?

Question

Selenium java: как узнать, на какой элемент DOM указывает WebElement из отладчика java и инструмента разработчика браузера?

Иногда селектор очень сложный, состоящий из 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 selector и xpath .

Теперь давайте посмотрим на три элемента и их селекторы и как они находят элемент.

• Элемент foo - это элемент с идентификатором foo, а также с узлом span предка. Хотя идентификаторы должны быть уникальным идентификатором, и для них не нужно больше осей для идентификации в документе.
• Тогда HelloWorld элемент. Вы ищете внутри элемента foo. Он будет игнорировать все остальные совпадающие элементы и найдет только дочерний элемент foo. В вашем примере кода вы поместили пространство между двумя классами в селекторе CSS. Это будет означать, что есть элемент с классом hello, и внутри этого элемента есть дочерний элемент с классом world. Но если вы удалите пробел, это означает, что есть элемент с классом hello и world. Это можно легко интерпретировать как XPath "//*[contains(@class, 'hello')][contains(@class, 'world')]", и вы можете использовать этот XPath, чтобы один XPath мог напрямую находить этот элемент с одним локатором вместо двух.
• Теперь элемент oops легко понять. Это первый тег li внутри элемента HelloWorld.

---

Чтобы найти элемент, вы можете сначала использовать первый селектор в инструменте разработчика браузера, затем найти следующий элемент внутри первого элемента, используя второй селектор и так далее. Инструменты разработчика показывают иерархию элементов, так что это легко сделать.