使用属性匹配为 webDriver 编写 cssselector 表达式答案

【问题标题】：Writing cssselector expression for webDriver using attribute matching使用属性匹配为 webDriver 编写 cssselector 表达式
【发布时间】：2014-02-21 20:20:08
【问题描述】：

我是 css、html 等以及 cssselectors 的新手。我一直在搞乱 selenium webdriver 并试图 .click() 以下按钮：

<button title="" class="btn addWidgButt bt-block" href="" role="button" type="button"     context="UNIQUE_THING">
<span class="btn-text">UNIQUE THING</span></button>

根据http://www.w3.org/TR/css3-selectors/#selectors，以下选择器不应该工作吗？（对于元素 E，规则是 E[foo="bar"]

By.cssSelector("button title[context=UNIQUE_THING]")
By.cssSelector("btn.addWidgButt.bt-block[context=UNIQUE_THING]")
By.cssSelector("span[btn-text=UNIQUE THING]")

我认为最后一个是我最好的选择，因为 span 是一个元素，而 btn-text 是一个属性值。任何帮助表示赞赏，谢谢。

【问题讨论】：

您可以做一件事来测试您的 CSS 选择器：在 Chrome 中打开网页。按 F12 获取开发工具。 Ctrl+F 查找。将您的选择器粘贴到搜索框中。它会显示匹配的数量。

标签： java css selenium css-selectors

【解决方案1】：

我注意到的一件事是 [] 中的所有选择器都缺少单引号。

By.cssSelector("button[context='UNIQUE_THING']")
By.cssSelector(".btn.addWidgButt.bt-block[context='UNIQUE_THING']")
By.cssSelector("span.btn-text")

您的第二个选择器缺少前导 .

您的最后一个选择器将不起作用，因为您无法使用 CSS 选择器匹配文本。你可以用 . 匹配一个类，或者用 # 匹配 id。

更多信息，这是一个很好的参考：http://www.w3schools.com/cssref/css_selectors.asp

【讨论】：