1

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>
bad_coder
  • 11,289
  • 20
  • 44
  • 72
milso
  • 590
  • 1
  • 6
  • 11
  • 2
    Using xpath, you can do the following. by.xpath('//div[@class="text-label" and . = "SomeText"] – Sakshi Singla Apr 09 '15 at 11:37
  • 1
    Specifically Using xpath, you can do the following. `by.xpath('//span[@class="x-btn-button" and . = "Login"]` In case this solves your purpose then let me know – Sakshi Singla Apr 09 '15 at 11:54
  • @SakshiSingla Thanks. So that gives me one more option to use xpath with class name and inner html. How can I use the same with multiple class names for the same tag? Also I am really looking for a way to do the same in CSS locator – milso Apr 09 '15 at 11:58
  • I am not sure of a way to use css to achieve it! Not sure of multiple classnames either. Can you give an example html for multiple classnames – Sakshi Singla Apr 09 '15 at 12:20

2 Answers2

1

This post has some real good methods to use xpath/css for element identification!

Is it possible to get next sibling using cssContainingText in Protractor

Function cssContainingText is however specific to Protractor.

Community
  • 1
  • 1
Sakshi Singla
  • 2,462
  • 1
  • 18
  • 34
  • I need something like driver.findElement(By.cssContainingText('span.x-btn-button','Login')) but for selenium using java – milso Apr 09 '15 at 13:07
  • Yes. But it seems that this is not possible using cssSelector! Lets wait for more responses and see if there's a solution to this using cssSelectors – Sakshi Singla Apr 10 '15 at 05:49
1

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

Community
  • 1
  • 1
aholt
  • 2,829
  • 2
  • 10
  • 13
  • I tried `driver.findElement(By.cssSelector("span.x-btn-button:contains('Login')")).click();` I am getting org.openqa.selenium.InvalidSelectorException: Is there anything wrong with quotes? " / ' – milso Apr 09 '15 at 14:08
  • So below is working in Sel IDE click css=span:contains('Login').x-btn-button I converted it to java format from ide to use it in the driver it still doesnt work driver.findElement(By.cssSelector("span:contains('Login').x-btn-button")).click(); – milso Apr 09 '15 at 14:29
  • See my updates to my original answer. Basically, the pseudo-selector of :contains('') is no longer supported. Surprising, because I think Chrome still supports it. – aholt Apr 09 '15 at 14:31