【问题标题】：How to use CSS locator with tag + class name + inner html text to identify a button in a span如何使用带有标签+类名+内部html文本的CSS定位器来识别跨度中的按钮
【发布时间】：2015-04-09 22:29:21
【问题描述】：

我正在使用 selenium FirefoxDriver 来自动化测试用例（我是新手）

我需要一种方法来定位按钮（我认为它是作为 div/span 实现的）

当我在 Selenium IDE //span[contains(text(), 'Login')] 中尝试时，此 xpath 定位器有效

我也可以通过 span 标签和类名 css=span.x-btn-button 来使用这个 CSS 定位器

我需要的是一种使用带有标签 + 类名 + 内部 html 文本的 CSS 定位器的方法。（这将帮助我处理我的应用程序中的一些其他 UI 元素）

HTML如下

<div id="toolbar-1035" class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct" style="right: auto; left: 0px; top: 141px; width: 223px;">
  <div role="presentation" class="x-box-inner " id="toolbar-1035-innerCt" style="width: 217px; height: 22px;">
    <div role="presentation" class="x-box-target" id="toolbar-1035-targetEl" style="width: 217px;">
      <a id="button-1036" unselectable="on" hidefocus="on" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="right: auto; top: 0px; margin: 0px; left: 0px; width: 75px;" tabindex="0">
        <span unselectable="on" class="x-btn-wrap" role="presentation" id="button-1036-btnWrap">
<span role="presentation" class="x-btn-button" id="button-1036-btnEl" style="background-color: transparent;">
<span unselectable="on" class="x-btn-inner x-btn-inner-center" id="button-1036-btnInnerEl" style="background-color: transparent;">Login</span>
        <span style="" unselectable="on" class="x-btn-icon-el  " id="button-1036-btnIconEl" role="presentation"></span>
        </span>
        </span>
      </a>
    </div>
  </div>
</div>

【问题讨论】：

使用 xpath，您可以执行以下操作。 by.xpath('//div[@class="text-label" and .="SomeText"]
具体使用xpath，可以做到以下几点。 by.xpath('//span[@class="x-btn-button" and . = "Login"] 如果这能解决您的目的，请告诉我
@SakshiSingla 谢谢。所以这给了我一个更多的选择来使用带有类名和内部 html 的 xpath。如何为同一个标签使用多个类名？另外我真的在寻找一种在 CSS 定位器中做同样事情的方法
我不确定使用 css 实现它的方法！也不确定多个类名。你能为多个类名提供一个示例html吗

标签： selenium selenium-webdriver automation css-selectors qa

【解决方案1】：

这篇文章有一些使用 xpath/css 进行元素识别的真正好方法！

Is it possible to get next sibling using cssContainingText in Protractor

然而，函数 cssContainingText 是 Protractor 特有的。

【讨论】：

我需要类似 driver.findElement(By.cssContainingText('span.x-btn-button','Login')) 但对于使用 java 的 selenium
是的。但似乎使用 cssSelector 是不可能的！让我们等待更多响应，看看是否有使用 cssSelectors 的解决方案

【解决方案2】：

~~#Css~~

findElement(By.cssSelector("span.x-btn-button:contains('Login'));

请记住，并非每个浏览器都支持 CSS 中的这个伪类，特别是 PhantomJS 中不支持它（可能有其他浏览器不支持，但我记得那个）。

从Here，大约在页面下方的 75%。

编辑：

再看一遍之后，似乎 ":contains('')" 的伪选择器不再属于 CSS3 规范。 Reference

如果您的 Web 应用程序使用 JQuery，您可以使用类似的选择器以这种方式检索元素，否则，您必须将 JQuery 加载到页面中然后使用它，但这实际上不会使用 CSS，而是JQuery 中使用 CSS 语法的 javascript 选择器函数。

结论：

目前，您所问的是（官方）不支持 CSS。

【讨论】：

我试过 driver.findElement(By.cssSelector("span.x-btn-button:contains('Login')")).click(); 我得到 org.openqa.selenium.InvalidSelectorException: 引号有什么问题吗？ " / '
所以下面在 Sel IDE 中工作 click css=span:contains('Login').x-btn-button 我把它从 ide 转换成 java 格式在驱动中使用它仍然不起作用 driver.findElement(By.cssSelector("span:contains('Login').x-btn-按钮")).click();
查看我对原始答案的更新。基本上，不再支持 :contains('') 的伪选择器。令人惊讶，因为我认为 Chrome 仍然支持它。