如何使用CSS定位器与标签+类名+内部HTML文本的跨度来识别按钮 [英] How to use CSS locator with tag + class name + inner html text to identify a button in a span

问题描述

我使用硒FirefoxDriver自动化测试用例（我是新在此）

我需要一种方法来定位按钮（我觉得作为一个DIV / SPAN实现）

当我尝试在硒IDE //跨度此XPath定位器的工作原理[包含（文字（），'登录'）

我也可以使用span标签和类名使用CSS定位器 CSS = span.x-BTN-按钮

我需要的是使用CSS定位器与标签+类名+内部HTML文本的方式。 （这将帮助我在handelling其他一些UI元素在我的应用程序）

HTML是如下

\r

\r

＆LT; D​​IV ID =工具栏-1035级=X-工具栏点¯x -docked的X工具栏英尺的X停靠底部的X工具栏停靠底部的X工具栏英尺停靠底台X-box布局-CT的风格=右：自动;左：0像素;顶：141px ; WIDTH：223px;＆GT;\r
  ＆LT; D​​IV角色=presentation级=X-箱内部的ID =工具栏-1035-innerCt的风格=WIDTH：217px;高度：的22px;＆GT;\r
    ＆LT; D​​IV角色=presentation级=X-箱目标ID =工具栏-1035-targetEl的风格=WIDTH：217px;＆GT;\r
      ＆下;一个ID =按钮1036不可选择=上HIDEFOCUS =上的类=X-BTN的X不可选择的x箱项的x工具栏项的x BTN - 缺省 - 小x-noicon点¯x -btn-noicon的X BTN默认小noicon的风格=右：自动;顶部：0像素;保证金：0像素;左：0像素，宽度：960x75像素;的tabindex =0＆GT;\r
        ＆所述;跨度不可选择=上的类=X-BTN缠绕角色=presentationID =按钮-1036-btnWrap＆GT;\r
＆LT;跨度的角色=presentation级=X-BTN-按钮ID =按钮-1036-btnEl的风格=背景颜色：透明;＆GT;\r
＆LT;关于级=X-BTN-内的X BTN-内中心跨越不可选择= ID =按钮-1036-btnInnerEl的风格=背景颜色：透明;＆GT;登录＆LT; / SPAN＆GT;\r
        ＆所述;跨度风格=上不可选择=类=X-BTN-图标-el的ID =按钮-1036-btnIconEl角色=presentation＆GT;＆下; /跨度＆GT;\r
        ＆LT; / SPAN＆GT;\r
        ＆LT; / SPAN＆GT;\r
      ＆所述; / A＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

<击> #Css

  findElement（By.cssSelector（span.x-BTN-按钮：包含（'登录'））;
 

记

请在CSS这个伪类不被每一个浏览器的支持，特别是这不是在PhantomJS支持（可能还有其他的浏览器不起作用的，但是这是一个我记不清了）。

这里，方式在页面约75％。

修改

看这多一点之后，它似乎的伪选择：包含（''）不再是CSS3规范之内。 参考

如果您的Web应用程序使用jQuery，您可以检索该元素具有类似选择这种方式，否则，你将不得不JQuery的加载到页面，然后使用它，但真的不会使用CSS，而是在JQuery的JavaScript的功能选择使用CSS语法。

结论：

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

I am using selenium FirefoxDriver to automate a test case (I am new at this)

I need a way to locate a Button (which I think is implemented as a div/span)

This xpath locator works when I try that in Selenium IDE //span[contains(text(), 'Login')]

Also I can use this CSS locator using the span tag and the classname css=span.x-btn-button

What I need is a way to use CSS locator with tag + class name + inner html text. (This will help me in handelling some of the other UI element in my application)

HTML is as below

<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>

解决方案

#Css

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

Keep in mind that this pseudo-class in CSS is not supported by every browser, specifically this is not supported in PhantomJS (There may be other browsers this does not work in, but that is the one I remember).

From Here, about 75% of the way down the page.

Edit:

After looking at this a little more, it seems the pseudo-selector of ":contains('')" is no longer within the CSS3 spec. Reference

If your web application uses JQuery, you can retrieve the element that way with a similar selector, otherwise, you will have to load JQuery into the page and then use it, but that really wouldn't be using CSS, but rather javascript selector functions within JQuery that use CSS syntax.

Conclusion:

Currently, what you are asking is (officially) not supported by CSS.

这篇关于如何使用CSS定位器与标签+类名+内部HTML文本的跨度来识别按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！