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
CSS Selector doesn't support :contains() anymore. You have to use XPath "//div[text()='Clear search']".
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();
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;
}
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
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{
...
}
