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

Question

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

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

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

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

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

这有什么问题吗？我知道它会奏效，我想推荐这种做法，但我担心的是：

1) 由于额外的 CSS 没有对页面做任何适当的事情，页面将需要更长的时间来加载。

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

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

Answer 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 选择器是我最近才开始学习和使用的强大工具。他们值得花时间学习。

Using CSS to locate elements in Selenium- appropriate style?