CODEWITHSUNDEEP
htmlcssseleniumselenium-webdriver
M.Naveed
M.Naveed

Reputation: 1857

I need CSS selector to select elements that contain a given text

Line:

<div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall">Basic Search</div>
<div class="btn btn-primary-stand-alone btn-tall search-btn">Search</div>

Here is what i have tried so far - ".btn:contains('Clear search')" but selenium is not able to catch it

Upvotes: 4

Views: 20508

Answers (6)

Sadik Ali
Sadik Ali

Reputation: 1205

User below css code:

css=div:contains('Clear search')

More details click on link: SauceLab

Upvotes: 2

Rajnish Kumar
Rajnish Kumar

Reputation: 2938

Hi on the basis of the source provided by you in the question you can use css selector as below to identify the elements

// take everything inside the list for div with same class
List<WebElement> mycsselements =  driver.findElements(By.cssSelector(".btn.btn-second-in-pair-not-desired.btn-tall"));
System.out.println("Size of the div elements with same class name : " + mycsselements.size());
// printing value one by one 
System.out.println("First value is "  + mycsselements.get(0).getText());
System.out.println("Second value is " + mycsselements.get(1).getText());
System.out.println("Third value is "  + mycsselements.get(2).getText());

// and for the last one do it like below

System.out.println("Last value is " + driver.findElement(By.cssSelector(".btn.btn-primary-stand-alone.btn-tall.search-btn")).getText());

and the output is :

Size of the div elements with same class name : 3
First value is Clear search
Second value is Raw Search
Third value is Basic Search
Last value is Search

Hope this helps you

Upvotes: 0

Erick Boileau
Erick Boileau

Reputation: 494

you cannot change the class depending on the content ?

<?php 
$content = $your_content_from_database;
$arr_content = explode(" ", $content);
$first = $arr_content[0];
echo '<div class="btn btn-second-in-pair-not-desired btn-tall clear" data-content="'.$first.'">'. $content. '</div>' ; ?>

and the CSS

[data-content="Clear"]{
color:red;
}

Upvotes: 0

Kraig Walker
Kraig Walker

Reputation: 812

If your using Selenium, it also accepts XPATH strings, which can sometimes be more flexible than CSS Selectors in some instances. Because I'm super lazy as well, I find it quite handy that you can right click a tag in the Elements view of DevTools and "Copy > Copy XPath"

webDriver.findElement(
  By.xpath(
    "//div[text()='Clear search']"
  )
).click();

Upvotes: 0

Buaban
Buaban

Reputation: 5137

CSS Selector doesn't support :contains() anymore. You have to use XPath "//div[text()='Clear search']".

Upvotes: 5

PeterTheLobster
PeterTheLobster

Reputation: 1395

I don't think css supports searching by content of the html element.

Why not try:

<div class="btn btn-second-in-pair-not-desired btn-tall clear">Clear search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall raw">Raw Search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall basic">Basic Search</div>
<div class="btn btn-primary-stand-alone btn-tall search-btn">Search</div>

And then selecting via:

.btn{
  color:red;
}

.clear, .raw, .basic, .search-btn{
  color:blue;
}

Or you could always try using ids

<div id="search">Search</div>

select:

#search{
 ...
}

Upvotes: -1

Related Questions