选择合适的 HTML 元素

Selecting the proper HTML Element

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

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

这应该等到指定的元素可见。但我收到此警告:

Warn: WaitForElement found 24 elements for selector "input[id="inputField"]". Only the first one will be checked.

我以为标签的id是唯一的。找这个id怎么可能得到24个元素的列表呢? 我现在可以做什么来 select 正是我需要的元素?

元素的 ID 应该 是唯一的。然而,这并不能消除开发人员在页面上根据需要创建尽可能多的具有相同 ID 的元素的能力。

此外,id 选择器通常这样指定 input#inputField

How is it possible to get a list of 24 elements when looking for this id?

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

What can I do now to select exactly the element I need?

根据文档,Nightwatch.js 允许您使用 XPath 作为 CSS 的替代方法。使用 XPath,您可以指定一组元素中的哪一个作为目标,例如:

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

...会使用第一个,[2] 会使用第二个,依此类推

如果您不能通过文档中元素的索引来做到这一点,您将需要找到关于它的其他内容,您可以使用它 select 它(使用 CSS 或XPath).

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

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