Css selector for getting web element based on text

Question

Below is the dom structure of the page :

I have tried

button:contains("srave")

I also tried

button[innerText="srave"]
button[text="srave"]`    
button[innerHtml="srave"]`

none of them work.

Need way to get elements when element attribute is not defined. PS: textContent() return srave as outcome.

Edit:

I have many such button elements on the page. I know I can iterate through all of them and check text. But I want to get web element directly based on the text it contains to reduce the execution time

you may need to use javascript for that, I'm not familar with a css selector for that — alexis, Jun 20 '17 at 11:35
Possible duplicate of [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — Ori Drori, Jun 20 '17 at 11:41
There is nothing unique to identify the element, so `xpath` could be your last resort or add something to the element to identify it — me_digvijay, Jun 20 '17 at 11:49

LKG · Answer 1 · 2017-06-20T11:50:28.517

0

You can use jquery for get the same because css is not select the text.

Working fiddle

fiddle link

Try this

alert($('button').find('span').html());

You can use following css to get the button name with "srave".

HTML

<button data-name="srave">
  <span>Brave</span>
</button>

css

button[data-name="srave"] {
  background:tomato;
}

edited Jun 20 '17 at 11:50

answered Jun 20 '17 at 11:37

LKG

4,152
1
11
21

Thanks Lokesh!I want to get button which has srave text on it. There are many similar web elements on the page. Can you share css selector for that? – Swapnil Pingle Jun 20 '17 at 11:43
You can get it by `data-attribute` i updated jsfiddle u can check it – LKG Jun 20 '17 at 11:47
I can not change the html code that I have shared in the screenshot above. I have to work with that DOM structure only and try to get the web element which is button and has text srave. – Swapnil Pingle Jun 20 '17 at 11:49
Then you have only jquery solution to get it, because css can't get by inside content. – LKG Jun 20 '17 at 11:52

score 0 · Answer 2 · answered Jun 20 '17 at 11:43

0

Did you try: button[class='k-button k-button-icontext'] or button[dir='ltr'] I don't think the cssSelectors you were attempting in your example are correct because you pluralized button. If neither of these work, it may be that there are more than one button on the page with the same selector. In which case it might be better to use xpath or you could get a list of all the elements with the same selector and then get whichever one from that list you created and click it.

answered Jun 20 '17 at 11:43

danidangerbear

41
8

'buttons' was a typo. I have used correct css selector syntax. There are many web elements matching criteria button[class='k-button k-button-icontext'] or button[dir='ltr'] and I want to search the button which has text 'srave' on it. – Swapnil Pingle Jun 20 '17 at 11:52
You could use xpath or you could create a list (List) of webelements that have that css selector and then loop through all of them until you find the button with the text you are looking for. In your loops you would use element.getText();. And then compare the actual text to the expected text (srave). And if the text matches then click the button. If not, keep going through the list of elements in the loop until you find the match. – danidangerbear Jun 20 '17 at 12:09
That is taking lot of time for execution as I have many of those elements that match class and other attribute. That is why I was trying to get optimum solution for getting the element – Swapnil Pingle Jun 20 '17 at 12:23

score 0 · Answer 3 · answered Jun 20 '17 at 11:48

0

No, you can't use CSS Selector. You can use XPath.

//button[text()='srave']

Or

//button[contains(text(),'srave')]

answered Jun 20 '17 at 11:48

Buaban

5,029
1
17
33

score 0 · Answer 4 · answered Jun 20 '17 at 18:34

To add to danidangerbear here is a java method that will do what you want:

public String getElementText(String elementText){
List<WebElement> elements = driver.findElements(By.cssSelector("button"));
    String elementText = null;
    for(WebElement element : elements)
        if(element.getText().equals(actualValue)){
            elementText = element.getText();
            break;
        } else {
            elementText = "element text does not exist";
            continue;
        }
    return elementText;
}

Css selector for getting web element based on text

4 Answers4