使用Selenium的css选择器语法有什么好处

Question

使用 css 选择器查找元素时，可以通过多种方式编写它们。 例如：

driver.FindElement(By.CssSelector("header.top-bar.js-top-bar._fixed"));

与

driver.FindElement(By.CssSelector("header[class='top-bar js-top-bar _fixed']"));

和

driver.FindElement(By.CssSelector("form[id='search'][action='/search']"));

与

driver.FindElement(By.CssSelector("form#search[action='/search']"));

---

对我来说，这只是使用一个而不是另一个的个人偏好，但我想知道使用是否有任何性能优势，例如：

header.top-bar.js-top-bar._fixed与header[class='top-bar js-top-bar _fixed']

Answer 1

您可以使用"CSS Test Creator"来测试不同CSS选择器的速度：

http://stevesouders.com/efws/css-selectors/csscreate.php

我使用 10,000 条规则和 10,000 个锚点测试了 tag.class 和 tag[class='class']。每个测试运行 5 次，我得到了以下结果：

+----------+-----------+----------+
|  Test #  | tag.class|tag[class|
+----------+-----------+----------+
|    1     |  226 ms  |  177 ms |
|    2     |  197 ms  |  211 ms |
|    3     |  228 ms  |  177 ms |
|    4     |  207 ms  |  200 ms |
|    5     |  209 ms  |  198 ms |
+----------+-----------+----------+
|  AVERAGE |  213 ms  |  192 ms |
+----------+-----------+----------+

基于上述推论，可以肯定地说 tag[class='class'] 比 tag 具有更好的性能.class