In search of a CSS selector that can target elements based on specific text contained within them

Question

In search of a CSS selector that can target elements based on specific text contained within them

Query:

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

This is the approach I've attempted so far - ".btn:contains('Clear search')" but selenium fails to locate it

html css selenium selenium-webdriver

Answer 1

Answer №1

The CSS Selector no longer recognizes the :contains() function. In order to achieve the same result, you must utilize XPath with the expression "//div[text()='Clear search']".

Answer 2

The CSS Selector no longer recognizes the :contains() function. In order to achieve the same result, you must utilize XPath with the expression "//div[text()='Clear search']".

Answer 3

Answer №2

Check out the following CSS code:

css=div:contains('Clear search')

For more information, visit this link: SauceLab

Answer 4

Check out the following CSS code:

css=div:contains('Clear search')

For more information, visit this link: SauceLab

Answer 5

Answer №3

When working with Selenium, XPATH strings are also accepted as a more flexible alternative to CSS Selectors in certain scenarios. Personally, I appreciate the convenience of being able to simply right click on a tag within the Elements view of DevTools and select "Copy > Copy XPath."

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

Answer 6

When working with Selenium, XPATH strings are also accepted as a more flexible alternative to CSS Selectors in certain scenarios. Personally, I appreciate the convenience of being able to simply right click on a tag within the Elements view of DevTools and select "Copy > Copy XPath."

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

Answer 7

Answer №4

Is it possible to modify the class based 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>' ; ?>

Here is the CSS

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

Answer 8

Is it possible to modify the class based 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>' ; ?>

Here is the CSS

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

Answer 9

Answer №5

Based on the information provided in your question, you can use the following CSS selector to identify elements:

// select all elements inside the list for a div with the 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 the same class name : " + mycsselements.size());
// print values 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());

// for the last one, do it like this

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

Here is the output:

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

I hope this information is helpful for you.

Answer 10

Based on the information provided in your question, you can use the following CSS selector to identify elements:

// select all elements inside the list for a div with the 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 the same class name : " + mycsselements.size());
// print values 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());

// for the last one, do it like this

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

Here is the output:

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

I hope this information is helpful for you.

Answer 11

Answer №6

It appears that css does not have the capability to search by the content of an html element.

One possible solution could be:

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

You can then style these elements using classes:

.btn{
  color:red;
}

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

Alternatively, you may consider using ids:

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

And target it like this:

#search{
 ...
}

Answer 12

It appears that css does not have the capability to search by the content of an html element.

One possible solution could be:

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

You can then style these elements using classes:

.btn{
  color:red;
}

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

Alternatively, you may consider using ids:

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

And target it like this:

#search{
 ...
}

In search of a CSS selector that can target elements based on specific text contained within them

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Implementing a dynamic loading strategy for Google reCAPTCHA based on language selection

Python script for logging in using Facebook with Selenium

Creating uniform-sized flex items with varying image sizes

selenium executes the method multiple times consecutively

Using Selenium class annotations in Java for Page Objects

Difficulty aligning headings in HTML

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

iOS 10's autofocus feature experiencing difficulties in focusing on input

bring in all the files located within the Directory

The checkbox is not updating as anticipated

Should we stick with reusing the same instance of the Page class in Selenium for multiple uses within the same test method, or is it better to create a fresh instance each time

ngx-datatable detail row failing to expand properly

Is Jquery struggling to modify the visual enhancements?

Limit selection choices in select element

Issues arising from the interaction of one DIV with another DIV

Enable the input field once the checkbox has been marked

textarea label align: center

Is it possible to have Protractor utilize the IEDriverServer.exe that was updated by webdriver-update in the node_modules folder?

What is the proper way to incorporate html entities in my specific situation?

Harnessing the power of JSON within an HTML document to display dynamic data