选择合适的 HTML 元素答案

【问题标题】：Selecting the proper HTML Element选择合适的 HTML 元素
【发布时间】：2015-07-17 18:47:26
【问题描述】：

我使用 Nightwatch.js 测试国外网站代码。我使用了这个命令：

.waitForElementVisible('input[id="inputField"]', TIMEOUT)

这应该等到指定的元素可见。但我收到了这个警告：

警告：WaitForElement 为选择器“input[id="inputField"]”找到 24 个元素。只会检查第一个。

我认为标签的 id 是唯一的。查找此 id 时如何获得 24 个元素的列表？我现在可以做什么来准确选择我需要的元素？

【问题讨论】：

“在查找这个 id 时，怎么可能得到一个包含 24 个元素的列表？” 因为人们总是无法理解ids 必须是的基本概念独特的。显然，您要测试的网站是由其中一个或多个人编写的。
仅仅因为它是独一无二的并不意味着它真的是。浏览器不会崩溃，也不会拒绝错误乘以的 id。
您需要使用另一个选择器进行选择。如果您知道 DOM 中的特定输入。然后您可以选择第 n 个子选择器
如果下面的任何答案回答了您的问题，Stack Overflow 的工作方式，您可以通过单击旁边的复选标记“接受”该答案； details here。但前提是您的问题得到了回答；如果不是，请考虑为问题添加更多详细信息，或者如果您自己回答的方式与现有答案明显不同，则发布您自己的答案并接受它是完全可以的（所以会让您等待两天接受它） .

【解决方案1】：

在查找这个 id 时，如何获得一个包含 24 个元素的列表？

因为人们总是无法理解ids 必须是唯一的基本概念。显然，您正在测试的网站是由其中一个或多个人编写的。

我现在可以做什么来准确选择我需要的元素？

根据文档，Nightwatch.js 允许您使用 XPath 作为 CSS 的替代方案。使用 XPath，您可以指定要定位的一组元素中的哪一个，例如：

.useXpath()
.waitForElementVisible('//input[@id="inputField"][1]', TIMEOUT)

...将使用第一个，[2] 将使用第二个，等等。

如果您无法通过文档中元素的索引来执行此操作，则需要找到可以用来选择它的其他内容（使用 CSS 或 XPath）。

【讨论】：

我认为问题的第二部分是指如何找出这 24 个结果中的哪一个是要查找的结果 - 像这样，似乎不可能。
@JavaScript：我不明白你所说的“是寻找的那个”是什么意思。
好吧，假设我们正在寻找一个特定的元素——它具有这个 id 并包含我们希望分析的代码块。然而，我们检索到 24。我如何获得包含我首先要分析的代码块的那个。然而，这正是我理解问题的方式。
xpath 选择器不知何故不起作用。但是我现在可以通过选择一个明确的父元素然后选择它的子元素来解决这个问题；像这样：div[id="listItem_0"] > span > input[id="inputField"]
@Garrarufa：是的，这就是我在答案的最后一行所说的。

【解决方案2】：

元素的id应该是唯一的。然而，这并没有取消开发人员在页面上创建任意数量的具有相同 id 的元素的能力。

另外，id 选择器通常这样指定input#inputField。

【讨论】：

【解决方案3】：

我现在可以通过选择一个明确的父元素然后选择它的子元素的子元素来解决问题；像这样：

div[id="listItem_0"] > span > input[id="inputField"]

【讨论】：