使用 CSS 以适合 Selenium 的样式定位元素？答案

【问题标题】：Using CSS to locate elements in Selenium- appropriate style?使用 CSS 以适合 Selenium 的样式定位元素？
【发布时间】：2015-08-12 14:26:37
【问题描述】：

作为实习的一部分，我目前正在学习 Selenium WebDriver。我的主管希望我学习它，建立一个概念证明并在上面展示，以便他们在测试他们的 web 应用程序时可以开始使用它（我们使用 JSF，但它与问题并不真正相关）。

我遇到的最大问题是使用动态 ID 属性定位元素。由于 ID 可以更改，因此没有一致的方法来标识元素。我要么使用了 XPath，要么提取了所有输入元素并进行了进一步过滤以创建我想要的元素的映射。

我与一位从事自动化工作的朋友交谈，他提出创建空的 CSS 类来识别元素。例如，给定标签：

<input id = "name"... class="... qa_name">

我可以调用driver.findElement.(By.cssSelector(".qa_name")) 来定位它。这对测试人员来说非常方便，因为他们有一种确定的方式来定位页面上的元素。

这有什么问题吗？我知道它会起作用，并且我想将其作为一种做法来推荐，但我担心的是：

1) 由于额外的 CSS 无法对页面执行任何操作，因此页面加载时间会更长。

2) 这不是风格上合适的 CSS，因为它对页面的外观没有任何作用。

我在 Programmers StackOverflow 上问了一个类似的问题，但没有运气，所以我希望我能在这里得到答案。谢谢！

【问题讨论】：

【解决方案1】：

我感觉到你的痛苦。向测试元素添加类可能不是最佳实践。可以加name吗？

动态 ID 的另一个选项... ID 的某些部分是否稳定？您可以使用 CSS 选择器来查找字符串的开头、字符串的结尾或字符串的某些部分。

假设您有一个带有动态 ID 的 DIV，例如<div id="ct100_Text1_12345_Text2"> 其中 12345 是一个动态数字。

您可以使用 CSS 选择器来定位 ID 的第一部分

driver.findElements(By.cssSelector("div[id^='ct100_Text1_']"));

您可以使用 CSS 选择器来定位 ID 的最后一部分

driver.findElements(By.cssSelector("div[id$='_Text2']"));

或者...您可以使用 CSS 选择器来定位 ID 的中间部分

driver.findElements(By.cssSelector("div[id*='_Text1_']"));

CSS 选择器是我最近才开始学习和使用的强大工具。它们值得花时间学习。

【讨论】：

这是正确的方法。并且由于 findElementS，您可以在需要时对它们进行迭代。而且，如果您的开发人员确保他们将 id 添加到所有内容中，那么唯一动态的就是迭代组件中的递增数字。
@JeffC 几乎总是有一个稳定的部分。通常最终发生的情况是，开发人员会命名一个 ID，但 JSF 会在呈现页面时重新生成 ID，如果其中一个父节点未命名，它会在该点插入一个随机字符串。我没有意识到您可以使用 By.cssSelector 按标签名称进行搜索，更不用说进行子字符串搜索了。非常感谢你！因此，如果您有一个嵌套 div 链，最外层的 div ID 为“outer”，最内层的 div ID 为“inner”，那么最内层的渲染 ID 将类似于“outer:j_id134545254:inner”。
@JeffC 忘了提，我不确定我是否可以使用“名称”。在某些呈现的标签上，“名称”与“id”匹配。我会调查一下。