Selenium CSS selector syntax for checking class and text both

Question

Question is for JAVA + Selenium:

My HTML is:

<section class="d-menu d-outclass-bootstrap unclickable d-apps d-app-list">
<section class="standard-component image-sequence-button" tabindex="0" role="link">
    <div class="image-region">
        <div class="core-component image">...
    </div>
    <div class="sequence-region">
        <div class="core-component section">
            <div>
                <section class="standard-component text hide-section-separator-line">
                    <div class="text-region">
                        <div class="core-component text">
                            <span class="main-text">BART Times</span>
                            <span class="sub-text">Provider</span>
                        </div>
                    </div>
                </section>
                <section class="standard-component speech-bubble hide-section-separator-line">...
                <section class="standard-component text">...
            </div>
        </div>
    </div>
    <div class="button-region">
        <div class="core-component button" tabindex="0" role="link">...
    </div>
</section>
<section class="standard-component image-sequence-button" tabindex="0" role="link">...
<section class="standard-component image-sequence-button" tabindex="0" role="link">...
<section class="standard-component image-sequence-button" tabindex="0" role="link">...</section>

EDIT:

All <section class="standard-component image-sequence-button"... have exact same structure and hierarchy (same attributes for all tags). The only thing that changes are the TEXT values of the tags(e.g. span)

PART1: I'm looking for various elements inside the second section tag. So, What I'm trying to do is get the <span class="main-text"> which has a value BART Times because of the business requirement.

I already know how to get it via xpath:

My xpath (verified via firebug):

"//section//div[@class = 'sequence-region']//section[@class = 'standard-component text hide-section-separator-line']//span[@class = 'main-text' and text() = '%s']"

I can get the span tag via checking for %s values (e.g. BART Times).

However, due to design considerations, we've been told to use CSS only. So, I tried to come up with a CSS counterpart for the above xpath but did not find it.

The following CSS

"section div.sequence-region section.standard-component.text.hide-section-separator-line span[class=main-text]"

returns all the span tags under all the section tags.

Question1: How do I get the span tag which has a certain TEXT value (the %s part of xpath)?

Things I've tried for that last span tag which did not worked(according to the firebug):

span.main-text[text='BART Times']

span[class=main-text][text='BART Times']

span.main-text:contains('BART Times')

span[class=main-text]:contains('BART Times')

span.main-text[text="BART Times"]

span[class=main-text][text="BART Times"]

span.main-text[text=\"BART Times\"]

span[class=main-text][text=\"BART Times\"]

span[text="BART Times"]

span[text=\"BART Times\"]

span:contains('BART Times')

span:contains("BART Times")

span:contains(\"BART Times\")

So, basically I want to put a check on BOTH class and TEXT value of the span tag in CSS selector.

Part 2: Then I want to get the <section class="standard-component image-sequence-button"... element where I found the <span class="main-text"> and then find other elements inside that specific section tag

Question 2: Assuming, I found the span tag in question 1 via CSS, how do I get the section tag (which is a super--- parent of the span tag)?

If CSS is not possible, please provide an xpath counterpart for this as a workaround for a while.

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

CSS selectors can't select based on text. The answers to Is there a CSS selector for elements containing certain text? go into detail on why.

To select based on class and text in xpath: //span[contains(@class, 'main-text') and text() = 'BART Times']

edited May 23 '17 at 12:29

Community

1
1

answered Oct 01 '15 at 00:28

EGHM

2,116
22
37

score 0 · Answer 2 · edited May 23 '17 at 11:58

Regarding question 1, it is not possible, as stated in the other answer here. This is another thread about the topic : CSS selector based on element text?

Regarding question 2, once again there is no such parent selector in XPath : Is there a CSS parent selector?. Now for the xpath counterpart, you can use parent axis (parent::*) or shortcut notation for the same (..), or put the span selector as predicate for the parent (the third example below) :

....//span[@class = 'main-text' and text() = '%s']/parent::*
....//span[@class = 'main-text' and text() = '%s']/..
....//*[span[@class = 'main-text' and text() = '%s']]

See the following thread for some better (yet more complicated) alternative to match element by CSS class using XPath, just in case you haven't came across link on this topic : How can I find an element by CSS class with XPath?

Selenium CSS selector syntax for checking class and text both

2 Answers2