CODEWITHSUNDEEP
seleniumselenium-webdriverautomationcss-selectors
milso
milso

Reputation: 600

How to use CSS locator with tag + class name + inner html text to identify a button in a span

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>

Upvotes: 1

Views: 3553

Answers (2)

aholt
aholt

Reputation: 2971

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

Upvotes: 1

Sakshi Singla
Sakshi Singla

Reputation: 2502

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.

Upvotes: 1

Related Questions