Javascript Selenium DOM 定位器的语义是如何工作的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12742287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does semantics of Selenium DOM locators work?
提问by Zarkonnen
I'm trying to understand the semantics of Selenium DOM locators. The documentation states that they are basically Javascript expressions evaluated to get the target element. But if I try to evaluate eg document.div[0].button[2](from these examples), I just get Error: TypeError: document.div is undefined.
我试图理解 Selenium DOM 定位器的语义。文档指出，它们基本上是评估以获取目标元素的 Javascript 表达式。但是，如果我尝试评估例如document.div[0].button[2]（从这些示例中），我只会得到Error: TypeError: document.div is undefined.
Is that example invalid? Is this an outdated way of navigating the DOM that's no longer supported in modern browsers but emulated by Selenium for backward-compatibility? Is there any documentation on how this syntax is meant to work?
那个例子无效吗？这是一种过时的 DOM 导航方式吗？现代浏览器不再支持这种方式，但 Selenium 为向后兼容而模拟了这种方式？是否有任何关于此语法如何工作的文档？
Note that I'm not trying to useDOM locators - I'm well aware that using CSS or id or even XPath is cleaner. I, however, need to understand their semantics so I can write code that can convert common DOM locators into XPath locators for use in WebDriver.
请注意，我不是在尝试使用DOM 定位器 - 我很清楚使用 CSS 或 id 甚至 XPath 更干净。但是，我需要了解它们的语义，以便我可以编写代码，将常见的 DOM 定位器转换为 XPath 定位器，以便在 WebDriver 中使用。
回答by eugene.polschikov
I'd share my understanding of DOM locators. There are several DOM abbreviations:
我会分享我对 DOM 定位器的理解。有几种 DOM 缩写：
gEBI - getElementById
gEBTN - getElementsByTagName
Xpath locators and css selectors are used in the context of selenium web driver, and DOM locators are used in the context of javascript (i.e. to locate element with DOM locator properly you shoulda wrap DOM locators with JavascriptExecutorfirstly)
Xpath 定位器和 css 选择器用于 selenium Web 驱动程序的上下文中，而 DOM 定位器用于 javascript 的上下文中（即要使用 DOM 定位器正确定位元素，您应该JavascriptExecutor首先使用 DOM 定位器包装）
usage example:
用法示例：
Whole web page document.documentElement
Whole web page body document.body
Element <E> by absolute reference document.body.childNodes[i]...childNodes[j]
Element <E> by relative reference document.gEBTN('E')[0]
document.getElementById('TestTable')
First <E> child document.getEBTN('E')[0]
Last <E> child document.gEBTN(E)[document.gEBTN(E).length-1]
Second <E> child document.getEBTN('E')[1]
Second-to-last <E> child document.gEBTN(E)[document.gEBTN(E).length-2]
Parent of element <E> document.gEBTN('E')[0].parentNode
Descendant <E> of element with id I using specific path
document.gEBI('I')…gEBTN('E')[0]
Descendant <E> of element with id I using unspecified path
document.gEBI('I').gEBTN('E')[0]
So if you like to get this work we should call jsExecutor. It be somthing like:
所以如果你想得到这个工作，我们应该调用 jsExecutor。有点像：
JavascriptExecutor js = (JavascriptExecutor) driver;
String script = "return document.getElementById('example');";
WebElement exampleDiv = (WebElement) js.executeScript(script);
exampleDiv.getText();
Also concerning your issue I've found a piece of explanation here
另外关于你的问题，我在这里找到了一段解释
Hope it be a lil bit more clear now)
希望现在更清楚一点）
回答by Arran
There is a great overview of some DOM commands in Selenium here:
Selenium 中的一些 DOM 命令在这里有一个很好的概述：
http://www.simple-talk.com/dotnet/.net-framework/xpath,-css,-dom-and-selenium-the-rosetta-stone/
http://www.simple-talk.com/dotnet/.net-framework/xpath,-css,-dom-and-selenium-the-rosetta-stone/
It talks a lot about the other selectors as well, but it may be useful in seeing what the commands look like, compared to it's alternatives. It gives a PDF file of basically what eugene has talked about above too.
它也谈到了很多其他选择器，但与它的替代品相比，它可能有助于查看命令的外观。它也提供了一个基本的 eugene 上面谈到的 PDF 文件。
